## 日期插件 layDate 日期插件致力于成为全球最用心的 web 日期支撑，为国内外所有从事 web 应用开发的同仁提供力所能及的动力。 ```html 01_laydate插件的基本使用
``` ### layDate API选项: - elem: '#id', //需显示日期的元素选择器 - event: 'click', //触发事件 - format: 'YYYY-MM-DD hh:mm:ss', //日期格式 - istime: false, //是否开启时间选择 - isclear: true, //是否显示清空 - istoday: true, //是否显示今天 - issure: true, 是否显示确认 - festival: true //是否显示节日 - min: `1900-01-01 00:00:00`, //最小日期 - max: `2099-12-31 23:59:59`, //最大日期 - start: `2014-6-15 23:00:00`, //开始日期 - fixed: false, //是否固定在可视区域 - zIndex: 99999999, //css z-index - choose: function(dates){} //选择好日期的回调 ```html 02_laydate插件的高级使用 ``` ## 表单验证插件 表单验证插件主要是针对表单元素的值进行验证，并给出响应的图形以及文字提示。 **常用验证插件** - formValidator - jQuery.validator - easyForm - validate.js ### jQuery.validator 插件 该插件提供用户方便地实现表单验证，同时还提供大量的定制选项。 官方地址：[http://jqueryvalidation.org/](http://jqueryvalidation.org/) **validation基本使用** ```html

Take a look at the source to see how messages can be customized with metadata.

Please enter your email address

``` **validate()验证方法的选项** | 选项名称 | 描述说明 | | -------- | ---------- | | debug | 设置是否为调试模式，如果为调试模式表单不会被提交。 | | submitHandler | 表单提交时的回调函数，一般用于提交当前表单。| | rules | 设置表单元素的验证规则，格式为key:value。 | | messages | 设置表单元素验证不通过时的错误提示信息。 | | errorClass | 自定义错误提示信息的样式。 | | ignore | 设置哪些表单元素不进行验证。| **validation自定义验证** ```html
Please enter your email address

``` **自定义验证方法** jQuery.validator.addMethod( name, method [, message ] )方法 - name：设置验证方法的名称。 - method：回调函数，function(value,element,param){} - value：元素的值 - element：元素本身 - param：参数 - message：设置验证不通过的错误提示信息。 ```html

Example with custom methods and heavily customized error display

Your form contains tons of errors! Please try again.

``` ## 瀑布流插件 ### 什么是瀑布流 瀑布流，又称瀑布流式布局。是比较流行的一种网站页面布局，视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部。 **特点** - 琳琅满目: 整版以图片为主，大小不一的图片按照一定的规律排列。 - 唯美: 图片的风格以唯美的图片为主。 - 操作简单: 在浏览网站的时候，只需要轻轻滑动一下鼠标滚轮,一切的美妙的图片精彩便可呈现在你面前。 ### Masonry 插件 Masonry 是 jQuery 的布局插件，可以把 Masonry 看做是 CSS 的浮动布局。 无论排列的元素是水平浮动的还是垂直浮动的，Masonry 都是根据网格先垂直排列元素，再水平排列元素，就像修墙一样。 配置 Masonry 相当简单，只需在 jQuery 脚本简单的使用 `.masonry()` 方法来包装容器元素。由于布局，很可能需要制定一个选项。 #### masonry() 方法推荐选项 - itemSelector：指定使用项目中哪些子元素进行布局 - columnWidth：设置每列的宽度 ```html
``` #### masonry() 方法布局选项 - gutter：设置每列之间的宽度 - percentPosition：值为true，使用百分值，而不是像素值 - stamp：在布局中标记元素，Masonry将在这些标记的元素下进行布局 - isFitWidth：基于容器的父元素大小设置容器的宽度以适应可用的列数 - isOriginLeft：设置布局的水平对齐，默认为true时，从左到右 - isOriginTop：设置布局的垂直对齐，默认为true时，从上到下 **百分值效果** ```html
``` **固定元素** ```html
``` **自适应宽度** ```html
``` #### masonry() 方法设置选项 - containerStyle：对容器中的元素使用CSS样式 - transitionDuration：设置改变位置或外观的过度时间，默认为0.4s - isResizeBound：是否根据窗口大小调整大小和位置 - isInitLayout：是否初始化布局，为false时，可以在初始化布局前，使用方法或绑定事件 #### Masonry 插件的方法 **布局** - masonry( )：布局容器中所有的元素。当每个元素改变大小时，布局依旧有效并且每个元素要重新进行布局 - layoutItems( )：布局指定元素 **添加或删除元素** - appended( )：在布局的最后添加并布局新的元素 - remove( )：从Masonry对象中或DOM中删除指定元素 **事件** - on事件：添加一个Masonry事件的监听器 - off事件：删除一个Masonry事件的监听器 ```html
``` ## 开发插件 ### jQuery 插件种类 - 对象方法插件: 这种插件是将对象方法封装起来，用于对通过选择器获取的jQuery对象进行操作，是最常见的一种插件。 - 全局函数插件: 可以将独立的函数添加到jQuery命名空间下，例如 `$.each( )`方法等。 - 选择器插件: 个别情况下，会需要用到选择器插件。虽然jQuery的选择器已经很强大，但还是会需要扩展一些个性化的选择器用法。 ### 对象方法插件 - 第一种定义方式 ```javascript jQuery.fn.changeBgColor = function(color){ this.css("background",color); } ``` - 第二种定义方式 ```javascript jQuery.fn.swapClass=function(class1,class2){ return this.each(function(){ //this 表示的是 匹配到的一组
  • var $element = jQuery(this); //this表示的是每个
  • if($element.hasClass(class1)){ $element.removeClass(class1).addClass(class2); } else if ($element.hasClass(class2)){ $element.removeClass(class2).addClass(class1); } }); } ``` - 第三种定义方式 ```javascript jQuery.fn.extend({ changeBgColor = function(color){ this.css("background",color); } }); ``` ### 全局函数插件 - 第一种定义方式 ```javascript jQuery.globalFunction = function(){ alert("This is my plugins "); } ``` - 第二种定义方式 ```javascript jQuery.extend({ functionOne : function(){ alert("This is one function"); }, functionTwo : function(param){ alert("This is two function , param is "+param); } }); ``` - 第三种定义方式 ```javascript jQuery.sum = function(array){ var total = 0; jQuery.each(array,function(index,value){ total += value; }); return total; } ``` ### jQuery插件案例 ```javascript jQuery.fn.shadow = function(){ return this.each(function(){ var $originalElement = jQuery(this); for(var i=0; i < 5 ; i ++){ $originalElement.clone().css({ position:'absolute', left:$originalElement.offset().left + i, top:$originalElement.offset().top + i, margin:0, zIndex:-1, opacity:0.1 }).appendTo('body'); } }); } ```