常用的jQuery插件

本文摘自锋利的jQuery

一:jquery.validate 表单验证插件

1:可以从官网下载该插件,目前为1.55版,使用是需要加载对应的js文件
<script type="text/javascript" src="jquery.validate.js"></script>

2:在ready后,需要使用$("form").validate() 选择需要进行验证的form表单

3:在对于的表单元素上,使用class指定不同的验证类型.
如class="email required",分别代表:email格式,不能为空,还可以使用其他的url,或者使用minlength="2"指定长度

只要用户在输入时,就会自动提示,而不需要等待点击按钮(似乎第一次需要)

常用的验证写在 class属性,与minlength属性中,也可以使用jquery.metadata.js 进行整合使用,将所有的约束,写在
class属性中

1: 使用<script>加载对于的jquery.metadata.js文件,
2: 变更验证方法为$("#form").validate({meta:"validate"});
3: 将所有的验证信息写入到class中 如:class="{validate:{required:true,minlength:2}}"

第三种提供验证的方法,使用name属性,而不使用html的class属性

1:在$("#form").validate()方法中,通过参数传入验证规则(json形式)
2:通过name属性,匹配不同的规则
3:定义具体的规则,根据name建立Json格式

如:<input name="email" />
$("#form").validate({rules:{
email:{ //复杂的结构
required:true,
email:true,
minlength:2
}
url:"url" //可以使用简单的方式
}})

验证信息的本地化
需要导入对于的语言信息验证库,如中文的message_cn.js

也可以在上述的方法中,添加messages属性的key,使用json的形式,设置不同验证条件下的错误提示
class="{validate:{required:true,minlength:2,messages:{required:'不能为空啊啊啊',minlength:'太短咯'}}}"

自定义错误信息验证类型,并美化
例子并不明确,只能看到也是JSON的形式,声明错误类型,并且使用样式和function关联,进行错误信息的管理..
包括errorElement,success等key

自定义验证规则

1:添加自定义的验证方法到$.validator对象中
如: $.validator.addMethod(
"formula", //验证方法名
function(value,element,param){ //验证规则
return value==eval(param)
})
2:按照上述的验证方法,添加对应的验证条件
valcode:{formula:"7+9"} //valcode为form元素名,formula为上述定义的验证方法名,"7+9"为传入的param

二: 表单插件--Form,用于为表单提供直接的Ajax能力,在validatior插件的下载包中也提供.

使用的简单方式为
$("#form").ajaxForm(function(){....}) 其中的function为成功提交后的回调函数

核心方法包括ajaxForm()与ajaxSubmit(),使用的方法类似

两个方法都接受一个参数,(function)作为提交后的回调函数或者(options)对象,提供更多的功能

定义options对象的例子(JSON对象)
var options = {target:"#output1", //将服务端返回的内容放入该ID的元素中
beforeSubmit:showRequest, //提交前的回调函数
success: showResponse, //提交后的回调函数
url:url, //默认为form的action,如果声明,则会覆盖
type:type, //默认是form的method,可覆盖
dataType:null, //'xml','script',or 'json' 服务端返回的数据类型
clearForm:true, //表示提交成功后清空form
resetForm:true, //提交成功后重置form
timeout:3000 //超时的毫秒数
}

提交前的回调函数,包含三个参数,表单数据(数组),jQuery类型的form对象,options参数(包含默认值)

提交后的回调函数,包括两个参数,返回的内容,返回的状态
其中,根据不同的数据类型,返回的结果需要进行不同的解析方式,包括HTML JSON 以及XML
HTML--直接使用,为XMLHttpRequest对象的responseText属性
XML--为XMLHttpRequest对象的responseXML属性,需要以XML进行解析
var name = $('name',responseXML).text();
JSON --直接使用对象.属性就可以进行访问

对于表单的提交前验证, 可以在options中的beforeSubmit中指定回调函数,如果return false来阻止提交


动态绑定事件插件---Livequery

在一般情况下,jQuery只会根据选择器,对已存在的符合条件HTML元素进行一次事件注册,而不会对后期动态变更的元素添加

事件绑定,而且重复添加事件,并不会覆盖,而是多次执行

livequery提供了动态绑定的能力,对符合选择器的元素,都会持久化进行绑定

进行添加事件的方式,和原来的有所区别

原格式: $('a').click(function(){...})
新格式: $('a').livequery('click',function(){...})


jQuery UI的使用,目前版本为1.7.2 需要jQuery1.3.X

包含了三个部分: 交互,组件(Widget),效果库
1: 交互: 拖动(drag),置放(drop),缩放(resizeable),选择(Selectable),排序(Sortable)
2: 组件...不少,当不如ExtJs丰富

简单的拖放使用: draggable(...) ...参数不同的设置,起到不同的效果
不带参数为:添加拖放能力
disable:暂时停止拖动能力
enable:重新开启拖动能力
destory:彻底移除拖动能力

这里只介绍了Sortable插件,提供了拖动排序能力的组件

添加sortable能力的方式
$("#myList").sortable({delay:1}), 在可以sortable里面添加JSON形式的参数

delay参数是为了防止拖拽与单击发生冲突,所以延时一毫秒
stop:fun.. 用于在排序后执行的回调函数

使用$(".myList").sortable("serialize")方法可以得到列表结果的参数化形式 myList[]=ss$my....


管理Cookie的插件--Cookie

写入Cookie的方式: $.cookie('key','value')
读取cookies的方法: $.cookie('key')
删除cookies的方法:$.cookie('key',null) //就是重新覆盖为null

也可以在添加值的时候,用第三个JSON参数,来设置保存的状态
$.cookie('key','value',{
expires:7, //有效的天数,不设置在session过期后自动删除,或浏览器关闭
path:'/', //cookies的路径属性,默认为页面路径
domain:'jquey.com', //域名属性,默认是创建该cookies的页面域名
secure:true //true表示此cookies需要https来传输
})

剩下对jQuery插件的扩展不做介绍,目前无兴趣..