锋利的jQuery笔记（七） 插件

几个常用的jQuery插件

表单验证插件——validation

几个步骤

（1）引入：<script src="lib/jquery.validate.js" type="text/javascript"></script>

（2）确定哪个表单需要此插件来验证：$("#commentForm").validate();

（3）对不同字段进行验证规则编码

不同验证写法

1.将所有与验证有关的信息写到class属性中方便管理

（1）引入一个新的插件：<script src="lib/jquery.metadata.js" type="text/javascript"></script>

（2）调用：$("#commentForm").validate({meta: "validate"});

（3）在class属性中编写验证规则，例如：class="{validate:{required:true, minlength:2}}"

2.通过name属性来关联字段和验证规则的验证写法

（1）$("#commentForm").validate( )方法中增加rules属性

（2）定义每个字段的那么属性来匹配验证规则

（3）定义验证规则

例子如下

$("#commentForm").validate({
		rules: {
			username: {
				required: true,
				minlength: 2
			},
			email: {
				required: true,
				email: true
			},
			url:"url",
			comment: "required"
		}
	  });

验证信息

1.可以引入中文的语言库<script src="lib/jquery.validate.messages_cn.js" type="text/javascript"></script>

2.可以自定义验证信息 例：class="{validate:{required:true, minlength:2, messages:{required:'请输入姓名', minlength:'请至少输入两个字符'}}}"

3.美化  通过控制css样式来显示

自定义验证规则

（1）定义：

$.validator.addMethod(
	"formula", //验证方法名称
	function(value, element, param) {//验证规则
		return value == eval(param);
	}, 
	'请正确输入数学公式计算后的结果'//验证提示信息
	);

（2）调用

验证规则里面添加valcode: {formula: "7+9"}

表单插件——Form

核心方法

ajaxForm（）和ajaxSubmit（）都可以讲表单提交变为Ajax提交方式

参数

可以没有参数，当有一个参数时，这个参数可以是一个回调函数也可以是一个options对象

提交之前验证表单

beforeSubmit会在表单提交之前被调用，返回FALSE的话就阻止表单提交

模态窗口插件——SimpleModel

引用

<script type='text/javascript' src='js/jquery.simplemodal.js'></script>

调用

在获取的元素上调用 例：$('#basic-dialog-ok').modal();

作为一个单独函数使用 例：$.modal(<p>test</p>');

Cookoie插件

引用

<script src="js/jquery.cookie.js" type="text/javascript"></script>

写入

$.cookie('the_cookie','the_value')前一个参数为待写入的cookie名，后一个参数为待写入的值

读取

$.cookie('the_cookie')

删除

$.cookie('the_cookie',null)

UI插件

引用

<script type="text/javascript" src="js/jquery-ui-1.8.18.custom.js"></script>

基本API

draggable(options):让一个DOM对象变成可拖动的对象的方法

draggable(" disable "):暂时禁用拖动

draggable("enable "):重新用拖动启

draggable("destroy"):彻底移除拖动功能

与单击冲突

设置参数delay延迟1毫秒$("#myList").sortable({delay:1});