最新消息:

第64款插件:jquery.cookie.js保存你操作的信息

菜单插件 杨红伟 3756浏览 0评论

描述:Cookie是网站设计者放置在客户端的小文本文件。Cookie能为用户提供很多的使得,例如购物网站存储用 户曾经浏览过的产品列表,或者门户网站记住用户喜欢选择浏览哪类新闻。 在用户允许的情况下,还可以存储用户的登录信息,使得用户在访问网站时不必每次都键入这些信息。本文要介绍的是笔者最近在做一个项目时,当鼠标点击过后菜 单时,还保留当时点击后的样式。默认用CSS只能操作部分,保留不了数据。这时我们就必须要借助于cookie这个用法了,而 jquery.cookie.js是一款强大的插件,可以帮助我们实现这一功能!
图片:

11

兼容浏览器:IE6+/Firefox/Google Chrome
官方链接:暂无    作者:Klaus Hartl/klaus.hartl@stilbuero.de
JS下载:http://www.ijquery.cn/js/portamento/jquery.cookie.js
预览:http://www.ijquery.cn/demo/cookie
打包下载:http://www.ijquery.cn/demo/cookie/cookie.zip
参数说明:

$.cookie('the_cookie'); // 获得cookie
$.cookie('the_cookie', 'the_value'); // 设置cookie
$.cookie('the_cookie', 'the_value', { expires: 7 }); //设置带时间的cookie
$.cookie('the_cookie', '', { expires: -1 }); // 删除
$.cookie('the_cookie', null); // 删除 cookie
$.cookie('the_cookie', 'the_value', {expires: 7, path: '/', domain: 'jquery.com', secure: true});//新建一个cookie 包括有效期 路径 域名等

JS代码:

[js]

<script type="text/javascript" language="javascript" src="http://www.ijquery.cn/js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" language="javascript" src="http://www.ijquery.cn/js/jquery.cookie.js"></script>
<script type="text/javascript">
$(function(){
//init seleted tab
var on= $.cookie('current_tab');
if(on!="" && !isNaN(on))
{
$(".nav li").eq(on).addClass("on").siblings().removeClass();
}
//default tab
else
{ $.cookie('current_tab', 0); }

//change tab
$(".nav li").click(function(){
var current_tab = $(".nav li").index(this);
$.cookie('current_tab', current_tab);
window.location = $(this).attr("href");
});

})
</script>

[/js]

HTML代码:注:3个HTML的代码是一样的,分别命名为1.html,2.html,3.html

[html]

<ul>
<li><a href="index.html">首页</a></li>
<li><a href="index2.html">第二页</a></li>
<li><a href="index3.html">第三页</a></li>
</ul>

[/html]

CSS代码:

[css]

.nav { overflow:hidden; }
.nav li { float:left; display:inline; padding:10px;font-size:20px;font-weight:bold;}
.nav li a:hover { color:#FF9900; }
.nav li.on { background:#900; color:#FFF;}
.nav li.on a { color:#fff; }
.nav li.on a:hover { color:#FF9900; }
a { text-decoration:none; }

[/css]

 

 

发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址