分类: note

  • jQuery Cookie 插件

    第一次接触 JavaScript 的 Cookie 是在大三的时候,当时用 WordPress 模仿“最土”的团购模板,也就是美团第一个版本,因为后台的东西不太懂,也不会编插件,于是乎,除了评论表单项目增加了内容外,其余功能一概前台处理。当时连清除浮动也不知道是什么玩意,却糊里糊涂的在 WordPress 上实现了团购功能,当然,没有支付功能,因为,是校内团购,给现金,哈哈。

    言归正传,那时候的团购网站基本都一个样,首页会显示一个提示框,右上角有关闭按钮,我要实现的就是关闭然后不再显示的功能,我就想到了用 Cookie 来记住这个动作。现在我看回当时的代码,我看不明白了…

    function turnoff(obj) {
    	var the_date = new Date("December 21, 2012");
    	var the_cookie_date = the_date.toUTCString();
    	document.cookie = "guide_status=guide_close;expires=" + the_cookie_date;
    	document.getElementById(obj).style.display = "none";
    }
    function readcookie(the_info) {
    	var the_cookie = document.cookie;
    	var the_cookie = unescape(the_cookie);
    	var pair_cookie = the_cookie.split(";");
    	var property_value = "";
    	for (loop = 0; loop < pair_cookie.length; loop++) {
    		property_value = pair_cookie[loop];
    		var broken_info = property_value.split("=");
    		var the_property = broken_info[0];
    		var the_value = broken_info[1];
    		the_info[the_property] = the_value;
    		if (the_info[the_property] == "guide_close") document.getElementById('guidebar').style.display = "none";
    	}
    }
    var cookie_information = new Array(); 

    学习 JavaScript 可以扎实基础,使用 jQuery 可以简单快速实现功能。于是乎,我现在使用 jQuery 的 Cookie 插件,实现记住显示隐藏边栏的功能。这个插件两年前,我就使用过,也是实现相同的功能,我翻回当时的代码,稍作修改,就可以工作了。当我想把代码改得更完美的时候,问题却出来了,我花了一个下午的时间来调,一直找不到原因,甚至我把代码重写也不能正常使用…这是闹哪样,搞得我脖子都酸痛了。后来,在下班前糊里糊涂又搞好了,原因是,变量赋值问题,我现在说不出具体的,日后再说吧。上一下代码。

    $(function() {
    	$('.sidebar-switch a').click(function() {
    		if ($('#sidebar').is(':visible')) {
    			$.cookie('sidebar', 'hide');
    			$('#sidebar').fadeOut().parent().animate({width: "640px"},600).removeClass('container-wide');
    			$(".sidebar-switch a").text("SidebarOFF");
    		}
    		else {
    			$.cookie('sidebar', 'show');
    			$('#sidebar').fadeIn().parent().animate({width: "840px"},600);
    			$(".sidebar-switch a").text("SidebarON");
    		};
    	});
    	var thesidebar = $.cookie("sidebar");
    	if (thesidebar == "show") {
    		$('#sidebar').show().parent().addClass('container-wide');
    		$(".sidebar-switch a").text("SidebarON");     
    	}
    }); 

    由于模板结构不同,HTML 、CSS、jQuery 都要作改动才能使用。

    言归正传,jQuery Cookie 插件的使用方法。插件主页:http://plugins.jquery.com/cookie/,使用前加载像加载 jQuery 一样加载插件是必须的。

    创建 cookie:

    $.cookie('the_cookie', 'the_value');

    创建临时 cookie, 7 天之后过期:

    $.cookie('the_cookie', 'the_value', { expires: 7 });

    创建临时 cookie, 7 天之后过期,并且作用于整个站点的:

    $.cookie('the_cookie', 'the_value', { expires: 7, path: '/' });

    读取 cookie:

    $.cookie('the_cookie'); // => "the_value" $.cookie('not_existing'); // => undefined

    读取所有 cookies:

    $.cookie(); // => { "the_cookie": "the_value", "...remaining": "cookies" }

    删除 cookie:

    // 存在 Cookie 返回 true, 否则返回 false... $.removeCookie('the_cookie'); 
    // 写法跟上面一样... $.removeCookie('the_cookie', { path: '/' });
  • WordPress 显示同分类下的上一篇、下一篇链接方法

    一直有使用上下篇的链接,一直都发现默认是把全分类文章按发表的时间先后来确定链接,就是一直没有把这个修改成想要的统一分类下的文章链接,今天终于把它修改好了。

    要想很好的理解这一原理,先来学习一下Wordpress的上一篇、下一篇的函数格式:

    <?php previous_post_link($format, $link, $in_same_cat = false, $excluded_categories = ''); ?>
    <?php next_post_link($format, $in_same_cat = false, $excluded_categories = ''); ?>

    说明:

    $format:格式化被显示的字符串,缺省值是 « %link,第二个函数缺省值是 %link »
    $link:被显示的字符串,缺省值是上一篇或下一篇的 $title,也可以设置为其它你想显示的字符串。
    $in_same_cat :表示是显式同一类别下的文章还是不区分类别的文章,缺省值 false 表示不区分类别,只以发帖的时间先后来确定。
    $excluded_categories:表示在显示上一篇或下一篇时是否排除掉某分类,缺省不排除,如果排除,把分类ID列在此处,以英文逗号分隔。

    于是大家都看出来了,实现同分类下的上一篇、下一篇链接,只要在上面的基础上添加一个判断:true,当同分类下存在文章时就显示出来。

    <?php if (get_previous_post()) { previous_post_link('上一篇: %link','%title',true);} else { echo "没有了,已经是最后文章";} ?>
    <?php if (get_next_post()) { next_post_link('上一篇: %link','%title',true);} else { echo "没有了,已经是最新文章";} ?>

    但是这里也有一个问题就是当指定了同分类下的上一篇、下一篇时,会依然显示空白,而不是输出代码中的“已经是最后文章”,所以我们还需要给特定的分类下指定ID就行了。代码如下:

    <?php
    $categories = get_the_category();
    $categoryIDS = array();
    foreach ($categories as $category) {
    array_push($categoryIDS, $category->term_id);
    }
    $categoryIDS = implode(",", $categoryIDS);
    ?>
    <?php if (get_previous_post($categoryIDS)) { previous_post_link(‘上一篇: %link’,'%title’,true);} else { echo “没有了,已经是最后文章”;} ?>
    <?php if (get_next_post($categoryIDS)) { next_post_link(‘上一篇: %link’,'%title’,true);} else { echo “没有了,已经是最新文章”;} ?> 
  • WordPress 如何调用 jQuery 库

    本文中将讲解调用 jQuery 的几种方法,当然都是针对 WordPress 的,请自行按喜好进行选择:
    WP 的 jQuery 和原版唯一的不同, 就是在最后一行加了

    jQuery.noConflict(); 

    这个 noConflict() 就是为了与其它的 library 兼容性, 如: Prototype, MooTools, 或 YUI.
    第一种方法,直接在网上搜索到的 jQuery 特效,然后对其进行直接调用:

    <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/jQuery.js"></script>

    2.使用 Google 的 API 库进行调用,貌似很多 jQuery 都是这样调用的,很多插件通过 Google API 替换了 WP 默认的 jQuery,利用谷歌强大的服务器来加快其调用加载速度。

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jQuery/1.2.3/jQuery.min.js">

    3.直接调用 WordPress 自带的 jQuery 库:

    <?php wp_enqueue_script('jQuery'); ?>

    但要注意的是:此句必需加在 wp_head(); 的前面!
    并且在js文件中的写法是:

    jQuery(document).ready(function($) { … }); 

    这样 jQuery() 包里的所有 $() 才能被正确识别.
    当然也可以使用以下方法,将:

    $(document).ready(function() { … });

    修改为:

    jQuery(document).ready(function($) { … });
  • 工具:透明化桌面窗口的小工具 Vitrite

    使用非常简单,切换到想要透明化的窗口使用组合键 Ctrl+Shift+上排数字键(英文区域上方),透明度由1到0递减。

    这软件非常简单,运行了只在托盘显示图标,尽管你多手点开开,也只是看到一堆英文说明而已,简单到甚至没有截图。

  • Cookie 在前端开发中的一些事

    Cookie 操作在前端开发过程中会经常遇到。

    Cookie 的属性

    除了 name(名)和 value(值), Cookie 还有以下一些可选属性,用来控制 Cookie 的有效期,作用域,安全性等:

    expires属性

    指定了 Cookie 的生存期,默认情况下 Cookie 是暂时存在的,他们存储的值只在浏览器会话期间存在,当用户退出浏览器后这些值也会丢失,如果想让 Cookie 存在一段时间,就要为 expires 属性设置为未来的一个用毫秒数表示的过期日期或时间点,expires 默认为设置的 expires 的当前时间。现在已经被 max-age 属性所取代,max-age 用秒来设置 Cookie 的生存期。

    如果 max-age 属性为正数,则表示该 Cookie 会在 max-age 秒之后自动失效。浏览器会将 max-age 为正数的 Cookie 持久化,即写到对应的 Cookie 文件中。无论客户关闭了浏览器还是电脑,只要还在max-age秒之前,登录网站时该 Cookie 仍然有效。

    如果 max-age 为负数,则表示该 Cookie 仅在本浏览器窗口以及本窗口打开的子窗口内有效,关闭窗口后该 Cookie 即失效。max-age 为负数的 Cookie ,为临时性 Cookie ,不会被持久化,不会被写到 Cookie 文件中。 Cookie 信息保存在浏览器内存中,因此关闭浏览器该 Cookie 就消失了。 Cookie 默认的 max-age 值为-1。

    如果 max-age 为0,则表示删除该 Cookie 。 Cookie 机制没有提供删除 Cookie 的方法,因此通过设置该 Cookie 即时失效实现删除 Cookie 的效果。失效的 Cookie 会被浏览器从 Cookie 文件或者内存中删除。

    如果不设置 expires 或者 max-age 这个 Cookie 默认是 Session 的,也就是关闭浏览器该 Cookie 就消失了。

    这里要说明一下:Session 的 Cookie 在 IE6 下,如果用户实在网页上跳转打开页面或新开窗口(包括 target=”_blank”,鼠标右键新开窗口),都是在同一个 Session 内。如果用户新开浏览器程序或者说是进程再打开当前的页面就不是同一个Session。其他浏览器只要你 Session 存在,还是同一个 Session, Cookie 还能共享。在前段时间的项目中 IE6 下吃了很大一个亏。

    Domain 属性

    Domain 属性可以使多个 WEB 服务器共享 Cookie 。Domain 属性的默认值是创建 Cookie 的网页所在服务器的主机名。不能将一个 Cookie 的域设置成服务器所在的域之外的域。

    例如让位于a.sodao.com的服务器能够读取b.sodao.com设置的 Cookie 值。如果b.sodao.com的页面创建的 Cookie 把它的 Path 属性设置为“/”,把Domain 属性设置成“.sodao.com”,那么所有位于b.sodao.com的网页和所有位于a.sodao.com的网页,以及位于sodao.com域的其他服务器上的网页都可以访问这个 Cookie 。

    Path 属性

    它指定与 Cookie 关联在一起的网页。在默认的情况下 Cookie 会与创建它的网页,该网页处于同一目录下的网页以及与这个网页所在目录下的子目录下的网页关联

    Secure 属性

    它是一个布尔值,指定在网络上如何传输 Cookie ,默认是不安全的,通过一个普通的http连接传输;

    HttpOnly 属性

    HttpOnly 属性限制了 Cookie 对 HTTP 请求的作用范围。特别的,该属性指示用户代理忽略那些通过“非 HTTP” 方式对 Cookie 的访问(比如浏览器暴露给 js 的接口)。注意 HttpOnly 属性和 Secure 属性相互独立:一个 Cookie 既可以是 HttpOnly 的也可以有 Secure 属性。

    Cookie 的传输

    浏览器将 Cookie 信息以 name-value 对的形式存储于本地,每当请求新文档时,浏览器将发送 Cookie ,目的是让 Server 可以通过HTTP请求追踪客户。所以从WEB性能的角度来说我们要尽量的减小 Cookie ,以达到传输性能的最大化。

    Cookie 的编码和解码

    由于 Cookie 的名/值中的值不允许包含分号,逗号和空格符,为了最大化用户代理和服务器的兼容性,任何被存储为 Cookie 值的数据都应该被编码,例如用我们前端熟知的 js 全局函数 encodeURIComponent 编码和 decodeURIComponent 解码。

    Cookie 作为客户端存储

    前面说了每当请求新文档时,浏览器将发送 Cookie 到服务器,导致WEB性能下降。所以不建议将 Cookie 作为客户端存储一种实现方案,替代方案参见:JavaScript 本地存储实践(html5 的 localStorage 和 ie 的 userData)等。

    同名的 Cookie

    同名的 Cookie ,不同的 Domain 或不同的 Path ,属不同的 Cookie ;同名的 Cookie ,相同的 Domain 且相同的 Path ,不同的 expires,属同一个 Cookie 。

  • 清除浮动的一些方法

    浮动的元素不在文档流占据空间,如下图所示,里面的方框分别左右浮动,容器并没有被撑开。IE6 除外,但也有需要清除的时候。

    clearfloat_1

    我说 IE6 除外只是因为此框框在 IE6 表现正常,并没受浮动影响,至于真相是什么,还有待考究。

    HTML结构

    <div id='container'>
    	<div id='left'>填充文字</div>
    	<div id='right'>填充文字</div>
    </div>

    解决方法
    1.添加额外标签
    在容器末尾添加<div style=”clear:both”></div>从而将容器撑开,但这样会添加额外的标签。
    Demo

    2.浮动容器
    将容器 #container 添加 float:left,虽然这样能产生想要的效果,但是下一个元素会受到这个浮动元素的影响。
    Demo

    3.使用 overflow 属性
    应用值为 hidden 或 auto 的 overflow 属性有一个有用的副作用,会自动地清理包含的任何浮动元素。
    Demo

    4.使用 :after 伪类(IE6无效)
    使用 :after 在容器末尾添加新的内容并清除内容浮动。

    #container{
    	display: inline-block; /*ie for mac*/
    }
    #container:after{
    	content:".";         /*额外的东西越小越好,此处添加一个点*/
    	display:block;       /*这是必须的*/
    	clear:both;          /*这是必须的*/
    	visibility:hidden;   /*隐藏所添加的内容*/
    	height:0;            /*不占用空间*/
    }

    5.其他
    IE6 在有些情况下使用以上方法并没有清除浮动,而 IE 很多奇怪的渲染问题可以通过赋予其 layout 得到解决,或者叫触发 IE 的 layout 属性,例如添加 CSS 的 zoom:1,_height:1%,至于什么是 layout ,我也不太懂,可以搜索一下。

    欢迎探讨~

  • 改进版简单的 jQuery 前台评论表单验证

    昨天说过要在家里等考试,旅游也去不了,而今天我决定要去旅游,估计周末也不会考试滴~

    与之前 简单的 jQuery 前台评论表单验证 不同在于这个代码是当文本框失去焦点时验证,也就是填完一个框到下一个框时就验证,也是很轻量的。

    jQuery(function(){
    	$('#commentform :input').blur(function(){ //当表单里的输入框失去焦点时
    		if($(this).is('#author')){
    			if(this.value==""){
    				//这里添加了一个 CSS 类 onError ,需要在 CSS 里面添加,我只设置了背景颜色
    				//其最大作用还是辅助判断是否发生错误,有错误则存在 onError 类
    				$(this).addClass("onError"); 
    			}else{
    				$(this).removeClass("onError");
    			}
    		}
    		if($(this).is('#email')){
    			if(this.value=="" || !/^http://[A-Za-z0-9]+.[A-Za-z0-9]+[/=?%-&_~`@[]':+!]*([^<>""])*$/.test(this.value)){
    				$(this).addClass("onError");
    			}else{
    				$(this).removeClass("onError");
    			}
    		}
    		if($(this).is('#url')){
    			if(this.value!="" && !/^http://[A-Za-z0-9]+.[A-Za-z0-9]+[/=?%-&_~`@[]':+!]*([^<>""])*$/.test(this.value)){
    				$(this).addClass("onError");
    			}else{
    				$(this).removeClass("onError");
    			}
    		}
    		if($(this).is('#comment:first')){
    			if(this.value==""){
    				$(this).addClass("onError");
    			}else{
    				$(this).removeClass("onError");
    			}
    		}
    	});
    	$('#submit').click(function(){
    		$('#commentform :input').trigger('blur'); 		//提交时再全局验证
    		var numError=$('#commentform .onError').length; //判断 onError 类是否存在
    		if(numError){ 									//存在则禁止提交
    			return false;
    		}
    	});
    });
  • 简单的 jQuery 前台评论表单验证

    WordPress 当然也有表单的验证,不过大家都知道用户体验一点都不好,页面发生跳转,有时还会把表单清空了,而前台表单认证显得非常有必要了。以下是我写的通过改变文本框背景颜色提示用户输入内容,WordPress 只要把以下代码放到 js 文件里就能工作了。验证由点击提交按钮触发,工作原理看注释。

    //表单验证
    $(function(){
        $('#submit').click(function(){
            var $author=$('#author').val();   //名称
            var $email=$('#email').val();     //邮箱
            var $url=$('#url').val();         //网址
            var $textarea=$('textarea:first').val();   //评论
            var $errorNo=0;
            if($author==""){
                $('#author').css("background","#F9A4A4");
                $errorNo+=1;
            }else{
                $('#author').css("background","#FFF");
            }
            if($email==""){
                $('#email').css("background","#F9A4A4");
                $errorNo+=1;
            }else if(!/^(?:[a-zd]+[_-+.]?)*[a-zd]+@(?:([a-zd]+-?)*[a-zd]+.)+([a-z]{2,})+$/i.test($email)){
                $('#email').css("background","#F9A4A4");
                $errorNo+=1;
            }else{
                $('#email').css("background","#FFF");
            }
            if($url!="" && !/^http://[A-Za-z0-9]+.[A-Za-z0-9]+[/=?%-&_~`@[]':+!]*([^<>""])*$/.test($url)){
                $('#url').css("background","#F9A4A4");
                $errorNo+=1;
            }else{
                $('#url').css("background","#FFF");
            }
            if($textarea==""){
                $('textarea:first').css("background","#F9A4A4");
                $errorNo+=1;
            }else{
                $('textarea:first').css("background","#FFF");
            }
            if($errorNo>0){
                return false;
            }
        });
    });

    这样一个非常简单的表单验证就出来了~效果就是小博现在这样,欢迎指正改进~

    PS:8月14日修正,更严密的正则表达式。
    PS2:2013年10月18日修正,真是弄巧反拙,简单复杂化……现已修正。

  • 配合使用 Cookie 控制边栏的显示隐藏

    发现很多博客都添加了边栏的显示隐藏功能,但是没有保存状态,只要一切换页面边栏又出来的,隐藏功能变得耍帅多于实用。为此我查找了一下 jQuery 的 Cookie 操作教程,使边栏隐藏状态保存到 Cookie ,切换页面照样隐藏,效果就像小博这样。

    本来我使用的 jQuery 代码是五木好同志的“完美终结版”,但是使用 cookie 后会出现第一次点击无效的情况,估计是因为他使用的是 toggle 方法,toggle 就是模拟鼠标的连续单击事件,在两种状态下切换,隐藏边栏是第一状态,如果你本来就隐藏了边栏,第一次点击时还是切换到第一状态,其实状态没有改变,出现无效点击的错觉。

    下面分享我使用的方法:

    jQuery(function(){
    	var thesidebar = $.cookie("sidebar"); //读取cookie "sidebar"的值
    	if(thesidebar=="hide"){  //"sidebar"的值为"hide"则隐藏边栏
    		$('#sidebar').hide().prev().animate({width: "860px"}, 1000); //隐藏边栏并设 #content 宽860px,宽度和速度要修改,结构不同也要改~
    		$("#menu-item-2304 a").text("显示边栏"); //修改按钮文字,这里使用的是控制按钮的ID,肯定要修改的
    	}
    	$("#menu-item-2304 a").click(function(){ //设置按钮点击动作
    		if($('#sidebar').is(':visible')){ //如果边栏显示则执行以下代码
    			$(this).text("显示边栏");
    			$('#sidebar').hide().prev().animate({width: "860px"}, 1000);
    			$.cookie("sidebar", "hide", { expires: 3 }); //写入属性 sidebar ,值为 hide ,有效时间 3 天
    		}else{ //如果边栏隐藏则执行以下代码
    			$(this).text("隐藏边栏");
    			$('#sidebar').delay(800).show(0).prev().animate({width: "599px"}, 800); //显示边栏并设 #content 为原来的宽度,宽度和速度要修改,结构不同也要改~
    			$.cookie("sidebar", null); //删除 cookie "sidebar"
    		};return false //点击链接不跳转
    	});
    });

    原理通过上面的注释应该可以理解了,哈哈。要注意一点,jQuery 本身是不支持 Cookie 操作的,需要使用官方的插件,你可以在这里下载到,http://plugins.jquery.com/project/Cookie,下载后像挂 jQuery 库一样挂上,那就ok了。

  • 利用 SQL 语句修改日志标题

    具体情况是这样,某个博客的所有日志都有“[视频]”或“[图片]”这样的前缀,现在想把这些前缀去掉。其实方法非常简单,用替换字符函数即可,将“[视频]”或“[图片]”替换成空字符串,语句:

    UPDATE wp_posts SET post_title = REPLACE(post_title, '[视频]','');
    UPDATE wp_posts SET post_title = REPLACE(post_title, '[图片]','');

    然而一时没想替换来,找到了取指定字符数后的所有字符串:

    UPDATE wp_posts SET post_title = SUBSTRING(post_title,5);

    使用 SQL 语句就省去了很多劳动力呀。