一、jQuery 使用插件

 

插件的查找与帮助

  - jQuery 官方网站的插件库(http://plugins.jquery.com)

提供了大量的插件。并给出去了每个插件的用户评级、版本及bug等

  - 库中列出了每个插件的ZIP文件下载、演示、示例代码及教程

wKiom1cAyTnSndGiAADBKW6jZSY282.png

wKioL1cAy2HBAH1UAAA7xF6vNEI150.png

使用插件

  - 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具备更人性化、更全面的功能,并且具备非常强大的日期范围限制功能

wKiom1cA0-TSgpoOAACFtvSQ85s382.png

  - My97日历插件使用步骤

      - step 1: 下载My97相关的压缩文件(css、js、图像文件),下载地址 http://www.my97.net/

      - step 2: 引入WdatePicker.js文件(只需要这一个文件即可,css文件户自动引入)

      - step 3: 根据需求完成功能


默认日历

  - 下面代码能够在页面中显示默认的My97日历

wKioL1cA1yTRtFfiAAAlt4yogIg638.pngwKiom1cA1pui3p8XAAA59QY0I4I436.pngwKioL1cA12ygTSW7AAAfqtSZdeE823.png


属性

  - 以下是My97的常用属性

wKiom1cA15HSvDT0AACcQ4J9yKA664.pngwKiom1cA2BywRSPmAABhtTG82Qo191.png

wKioL1cA2OzgEZj0AAA7qsjMDI4736.png


内置函数

  - $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所需要的文件

      - p_w_picpaths: 验证过程中要用到的图像文件夹

      - style:f ormValidator验证过程中要用到的样式文件夹validator.css

      - jqeury_last.js: jquery文件,可被替换成自己的

      - formValidator.js: 验证的核心文件,大部分验证规则都存在与此

      - formValidatorRegex.js: 有关自定义正则表达式的验证文件

      - index.html: 说明、案例等起始页


验证方式

  - formValidator 支持5种验证方式

wKiom1cA28GiaK8TAAEI32gnLzE251.png


公共函数

  - $.formValidator.initConfig

wKioL1cA3WixyOxfAABiZ-FTYZU667.pngwKiom1cA3OHgU3LSAAAaMnemjyM216.png


formValidator函数

wKioL1cA3gfgADlGAAB7oyW-gZg913.pngwKiom1cA3YnzPWyZAAAU6hPHEc4902.png


Invalidator

wKiom1cA3a6Cq4_LAABJR_gcyf8305.pngwKioL1cA3pXTbep0AABPjl12MH8724.png


CompareValidator

wKiom1cA3hjBitkXAABam5901e4935.pngwKiom1cA3jzhJAaXAABs19wubE4326.png


RegexValidator

wKiom1cA3mGhObLwAABpzxDUsCU544.pngwKiom1cA3ojRHBaRAABVyXz-OMY685.png


总结:本章内容主要介绍了 jQuery 使用插件(使用插件、日历插件、表单验证插件)