jQuery常用插件.ppt

博创华宇科技有限公司 ---------Query常用插件 内容简介 jQuery插件的使用 一 表单验证插件 二 二 手风琴菜单插件 三 弹出窗插件 四 jQuery UI插件 二 五 jQuery插件的使用 一、jQuery插件的使用 jQuery拥有丰富的插件，使用时只需要引入jquery.js以及相应的插件包，然后在页面中设置属性以及完成相关的调用即可。具体的调用方法，一般的jquery插件的官方文档中都会有实例demo，可参考。 表单验证插件 一、表单验证Validation jQuery Validation是一个很好的表单校验插件。可以到下边这个网址下载：http://bassistance.de/jquery-plugins/jquery-plugin-validation/ 下面我们用如下三个例子来说明如何使用该插件： 实例校验用户评论表单 将默认的英文验证信息变成中文 添加自定义验证规则 表单验证插件 一、表单验证Validation 实例校验用户评论表单 引入jQuery库和Validation插件 script type=text/javascript src=jquery-1.6.1.min.js/script script type=text/javascript src=jquery.validate.js/script 确定是哪一个表单需要被验 script type=text/javascript $(function() { $(#commentForm).validate(); }); /script 针对不同的字段,进行验证规则的编码,设置字段相应的属性 input id=cusername name=username size=25 class=required minlength=2/ input id=cemail name=email size=25 class=required email/ …… 表单验证插件 一、表单验证Validation 将默认的英文验证信息变成中文 validation插件默认的验证信息是英文的,要想将validation验证插件给出的验证信 息变成中文就可以到jquery-validate\localization文件夹下面找到messages_cn.js 文件,这个就是中文的验证信息库,我们只需要在代码中将这个文件导入就可以实 现中文验证信息的输出了.在jquery-validate\localization这个文件夹下面,还有很 多种语言,我们可以选择适当的语言引入到我们的项目当中,实现提示信息的本地 化。 表单验证插件 一、表单验证Validation 添加自定义验证规则 调用validator的addMethod方法，这里用到“正则表达式”进行校验。 1）增加IP地址验证规则。 $.validator.addMethod(ip, function(value, element) { return this.optional(element) || (/^(\d+)\.(\d+)\.(\d+)\.(\d+)$/.test(value) (RegExp.$1 256 RegExp.$2 256 RegExp.$3 256 RegExp.$4 256));}, Please enter a valid ip address.); 2）增加只能是字母和数字的验证 $.validator.addMethod(chrnum, function(value, element) { return this.optional(element) || (/^([a-zA-Z0-9]+)$/.test(value) value.length = 6 value.length = 20); }, Please enter a valid format(6 - 20 charactors, A-Z, a-z, 0-9 only).); 手风琴菜单插件 一、手风琴菜单Accordion Menu Accordion Menu是一个可折叠菜单插件。可以到下边这个网址下载：/dynamicindex17/ddaccordionmenu.htm 这个插件使用比较简单。 1、引入jquery类库和手风琴插件（包含js和css以及一些图片资源）。 2、实例化插件，设置插件的属性信息。 弹出窗插件 一、弹出窗Colorbox Colorbox弹出窗插件。可以到下边这个网址下载：/colorbox/ 1、引入jquery类库和弹出窗插件（包含js和css以及一些图片资源）。 2、实例化插件，设置