Javascript Widget之一: JCookie-基于JQuery的Cookie增强插件

JQuery中的cookie 插件,太过于简单,只是对cookie做一个简单的封装,在实际应用中还需要做大量的工作。所以一直想做一个增强型的cookie插件,更方便使用。

从需求的角度讲,在电子商务应用当中,cookie的灵活应用对于用户体验非常重要,可以记忆用户的经常重复性的操作,个人偏好,等等。可惜很多的应用,并不擅长使用cookie.经常是输入一大堆搜索查询条件、可选操作后,再回退、刷新、再次登录后没有了,还要重新输入,非常恼火。所以我觉得能够智能化的记住用户的常用操作,是非常体贴用户、让用户感动的事情。

从技术的角度讲,一个high-level的javascript cookie API应当能够:

1).保存一个复杂的javascript Object. 这个类实例里可以包含基本类型、类成员变量等。

2).保存一个复杂的DOM节点的状态

如:保存一个表单中各种控件的状态,如输入框、下拉选择框、单选复选框

3).界面的布局和风格,如Portal中用户偏好的theme、窗口的大小、位置、个数等等。

4).用户经常性的操作结果,如排序等等。

我编写了一个增强型的基于Jquery的cookie插件JCookie(点此查看和下载Demo>>), 暂时以解决在实际应用中的问题为主。

使用方法:

< SCRIPT src ="js/jquery.js" temp_src ="js/jquery.js" type =text/javascript ></ SCRIPT >
< SCRIPT src ="js/jquery.ui.all.js" temp_src ="js/jquery.ui.all.js" type =text/javascript ></ SCRIPT >
< SCRIPT src ="js/jquery.cookie.js" temp_src ="js/jquery.cookie.js" type =text/javascript ></ SCRIPT >

1.保存和恢复一个复杂的javascript 类实例。

var obj = new Object(); //你可以任意构造一个复杂成员变量的类实例。
var key = 'form_id';
$.cookie(key, obj);//保存一个实例
var obj = $.cookie(key); //恢复一个实例

2.保存和恢复一个表单中的字段值到cookie中

3.保存和恢复一个Sortable List的顺序到cookie中

$('#list3').cookie();
//
将list的各个item的顺序保存到cookie中
$('#list3').decookie();
//
从cookie中恢复一个list的各个item的顺序

sortable List 的HTML代码如下:

$('document').ready( function () {
   // here, we allow the user to sort the items
  $('#list3').sortable( {
  axis: 'y',
  cursor: 'move',
  update: function () { $('#list3').cookie(); }
  } );
   // here, we reload the saved order
   $('#list3').decookie();
  } );

时间: 2024-08-22 14:54:39

Javascript Widget之一: JCookie-基于JQuery的Cookie增强插件的相关文章

10 个非常酷的基于jQuery的菜单效果插件

除了直观的界面效果外,炫酷的网站导航菜单或右键菜单也能为访问者带来眼前一亮的感觉.本文为你带来10个非常酷的基于jQuery的菜单效果插件.  1.  右击菜单  一个创建右击菜单的插件,简洁且易用.  源码/演示  2.  jQuery多级菜单--FX CSS菜单与子菜单  使用CSS创建菜单,使用JavaScript展示效果.特点如下:  跨浏览器,兼容所有浏览器(包括IE6). 效果:在鼠标经过和子菜单展开时,具有平滑的淡入淡出效果. 易于设置:简单的.用于无限级别菜单项目的嵌套无序列表.

基于jQuery的消息提示插件之旅 DivAlert(三)_jquery

本版本遵循了2.0的写法,此处通过extend方法封装了需要设置的各个选项,比起2.0版本的代码要精简了一些. 2.0版本 复制代码 代码如下: //设置插件基本信息 var options = o || {}; options.width = o.width || 300; //提示框宽度若小于104px则自动重置为200px if (options.height > 104) { options.height = o.height; } else { options.height = 200

基于jQuery的消息提示插件 DivAlert之旅(二)_jquery

改进的代码部分主要如下: 1.创建default.css文件: 代码 复制代码 代码如下: img { vertical-align:middle; } .jBg { position: absolute; top: 0; left: 0; z-index: 9999; background-color: #999; filter: alpha(opacity=70); opacity: 0.7; } .jWrap { position: absolute; border: 1px solid

基于 Jquery操作Cookie记录用户查询过信息

这是一个Cookie数据生成的列表, 每次单击查询会存储一个域名,并把最后一次查询的域名放在最上方.本例子最多存储10个,大家可以根据自己情况进行设置 下在咱们一起来看看是怎么实现的吧. 先写一个操作Cookie的JS文件如下 Code  代码如下 复制代码 function getid(id) {return (typeof id == 'string') ? document.getElementById(id) : id};function getOffsetTop(el, p) {var

基于JQuery的cookie插件_jquery

简单使用方法: 复制代码 代码如下: <html> <head> <title>JQuery-Cookie插件</title> <script type="text/javascript" src="jquery-1.4.js"></script> <script type="text/javascript" src="jquery.cookie.js&quo

基于jQuery的表格操作插件_jquery

大多数前端er都把网页中的table标签替换为div,主要就是因为div要比table更容易添加CSS样式.但是我们在日常应用中仍然要用到table表格,其中最好的例子就是对照表.今天彬Go将向大家推荐15个jQuery表格插件让你对数据表格进行显示.排序.筛选和操控.如jQuery表格排序插件.jQuery表格拖拽插件.jQuery树形表格插件.设置颜色.点击.替换等效果. 1.DataTables-强大的jQuery表格插件 DataTables是提供了大量特性的强大jQuery表格插件.例

精心挑选的12款优秀的基于jQuery的手风琴效果插件和教程_jquery

当你想在有限的页面空间内展示多个内容片段的时候,手风琴(Accordion)效果就显得非常有用,它可以帮助你以对用户非常友好的方式实现多个内容片段之间的切换.借助流行的 jQuery 框架,只需很少的代码就可以实现精美的手风琴效果,帮助你的网站吸引更多用户的眼球.   Elegant Accordion with jQuery and CSS3 首先推荐的这款插件是基于 jQuery 和 CSS3 实现的优雅的鼠标悬停手风琴效果. 制作教程 在线演示   Vertical Sliding Acc

Notify - 基于jquery的消息通知插件_jquery

Sticky是一个简单的页面消息提醒jQuery插件.可以设置让消息在页面的四个角落出现,也可以设置在页面中央出现.可以手动关闭消息,也可以设置成自动关闭. http://thrivingkings.com/sticky/        2)JNotify是一个JQuery插件,基于JQuery UI实现,用于创建页面消息提醒和状态提示条.   http://jnotify.codeplex.com/  演示地址:http://www.fabiofranzini.com/jNotify/Demo

TimergliderJS 一个基于jQuery的时间轴插件_jquery

Timeglider JS是一个由javascript支持缩放,数据驱动的时间轴组件.非常适合显示项目历史,项目计划及其其它需要显示历史的项目. 时间轴可以通过右边拖放垂直滑动器来缩放界面:向上缩小,向下放大.同时也支持使用滚轮来控制缩放.通过鼠标拖东空白处可以左右拖动时间轴,点击事件可以弹出一个小窗口来描述时间内容及其数据. JS组件有以下几个目标: 支持iPads和其它支持触摸的设备 非常容易整合到基于HTML/JS应用和界面 支持复杂的布局,并且可以对任何指定自定义HTML元素添加事件 安