分类
其他

配合使用 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了。