一、jQuery 使用插件
插件的查找与帮助
- jQuery 官方网站的插件库(http://plugins.jquery.com)
提供了大量的插件。并给出去了每个插件的用户评级、版本及bug等
- 库中列出了每个插件的ZIP文件下载、演示、示例代码及教程
使用插件
- step 1:将插件包导入到页面中,并确保它在jQuery源文件之后
<script src="jqeury-1.11.1.js"></script>
<script></script>
- step 2:在页面中编写或导入自定义的script文件,并在其中使用插件创建或扩展的方法
$("#myID").plugins();
二、日历插件
日历插件
- 日历控件是web页面中比较常用的控件之一,HTML5中也添加了日历控件的支持
- 除了 HTML5 之外好多jQuery插件也有与日历空间相关的,比如jQuery UI中的DatePicker、My97等。
- 这些年,日历控件层出穷,用户可以根据需求,样式在互联网上下载到需要的日历控件
My97日历插件
- My97日历是目前互联网比较常用的日历插件之一。
- My97具备更人性化、更全面的功能,并且具备非常强大的日期范围限制功能
- My97日历插件使用步骤
- step 1: 下载My97相关的压缩文件(css、js、图像文件),下载地址 http://www.my97.net/
- step 2: 引入WdatePicker.js文件(只需要这一个文件即可,css文件户自动引入)
- step 3: 根据需求完成功能
默认日历
- 下面代码能够在页面中显示默认的My97日历
属性
- 以下是My97的常用属性
内置函数
- $dp.$D(id,object):将id对应的日期框中的日期字符串,加上定义的日期差量,返回使用real格式化后的字符串。
- Id: 对象的ID
- object:日期差量,可设置成{y:值,M:值,d:值,H:值,m:值,s:值}
- {M:3,d:7}表示3个月零7天
事件
- $onpicking : 选择日期时,激发的事件
- $onpicked : 选择日期后,激发的事件
- $onclearing: 清楚已选日期时激发的事件
- $oncleared : 清除已选日期后激发的事件
- 事件对象 :dp
- dp.cal.getDateStr() : 返回选择前的日期对象格式化值
- dp.cal.getNewDateStr(): 返回选择后的日期对象格式化值
三、表单验证插件
表单验证插件
- 表单验证插件主要是针对表单元素的值进行验证,并给出相应的图形以及文字提示。
- 常用验证插件
- formValidator
- jQuery.validator
- earyForm
formValidator
- 下载formValidator所需要的文件
- images: 验证过程中要用到的图像文件夹
- style:f ormValidator验证过程中要用到的样式文件夹validator.css
- jqeury_last.js: jquery文件,可被替换成自己的
- formValidator.js: 验证的核心文件,大部分验证规则都存在与此
- formValidatorRegex.js: 有关自定义正则表达式的验证文件
- index.html: 说明、案例等起始页
验证方式
- formValidator 支持5种验证方式
公共函数
- $.formValidator.initConfig
formValidator函数
Invalidator
CompareValidator
RegexValidator
总结:本章内容主要介绍了 jQuery 使用插件(使用插件、日历插件、表单验证插件)