码迷,mamicode.com
首页 > 编程语言 > 详细

JavaScript之jQuery-7 jQuery 使用插件(使用插件、日历插件、表单验证插件)

时间:2016-04-03 20:32:52      阅读:232      评论:0      收藏:0      [点我收藏+]

标签:文件下载   互联网   官方网站   html5   源文件   

一、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 使用插件(使用插件、日历插件、表单验证插件)


本文出自 “会飞的蚂蚁” 博客,谢绝转载!

JavaScript之jQuery-7 jQuery 使用插件(使用插件、日历插件、表单验证插件)

标签:文件下载   互联网   官方网站   html5   源文件   

原文地址:http://jasonteach.blog.51cto.com/5192112/1759898

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!