front-end-notes/jquery/jquery-plugin.md at master · fullstack-kingj/front-end-notes · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
## 日期插件

layDate 日期插件致力于成为全球最用心的 web 日期支撑，为国内外所有从事 web 应用开发的同仁提供力所能及的动力。

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>01_laydate插件的基本使用</title>
    <script src="laydate/laydate.js"></script>
</head>
<body>
    <input placeholder="请输入日期" class="laydate-icon" onclick="laydate()">
    <br>
    <input placeholder="请输入日期" id="hello1">
    <span class="laydate-icon" onclick="laydate({elem: '#hello1'});"></span>
</body>
</html>
```

### 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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>02_laydate插件的高级使用</title>
    <script src="jquery-1.11.3.js"></script>
    <script src="laydate/laydate.js"></script>
</head>
<body>
    <input id="mydate" placeholder="请输入日期" class="laydate-icon">
    <script>
        laydate({
            elem : "#mydate",
            event : "focus",
            istime : true,
            isclear : false,
            istoday : false,
            issure : false
        });
    </script>
</body>
</html>
```

## 表单验证插件

表单验证插件主要是针对表单元素的值进行验证，并给出响应的图形以及文字提示。

**常用验证插件**

- formValidator
- jQuery.validator
- easyForm
- validate.js

### jQuery.validator 插件

该插件提供用户方便地实现表单验证，同时还提供大量的定制选项。
官方地址：[http://jqueryvalidation.org/](http://jqueryvalidation.org/)

**validation基本使用**

```html
<div id="main">
    <p>Take a look at the source to see how messages can be customized with metadata.</p>
    <!-- Custom rules and messages via data- attributes -->
    <form class="cmxform" id="commentForm" method="post" action="">
        <fieldset>
            <legend>Please enter your email address</legend>
            <p>
                <label for="cemail">E-Mail *</label>
                <input id="cemail" name="email" data-rule-required="true" data-rule-email="true" data-msg-required="Please enter your email address" data-msg-email="Please enter a valid email address">
            </p>
            <p>
                <input class="submit" type="submit" value="Submit">
            </p>
        </fieldset>
    </form>
</div>
<script>
    $(document).ready(function() {
        $("#commentForm").validate();
    });
</script>
```

**validate()验证方法的选项**

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

**validation自定义验证**

```html
<div id="main">
    <form class="cmxform" id="commentForm" method="post" action="">
        <fieldset>
            <legend>Please enter your email address</legend>
            <p>
                <label for="cemail">E-Mail *</label>
                <input id="cemail" name="email" data-rule-required="true" data-rule-email="true" data-msg-email="Please enter a valid email address">
            </p>
            <p>
                <input class="submit" type="submit" value="Submit">
            </p>
        </fieldset>
    </form>
</div>
<script>
    $(document).ready(function() {
        $("#commentForm").validate({
            messages: {
                email: {
                    required: 'Enter this!'
                }
            }
        });
    });
</script>
```

**自定义验证方法**

jQuery.validator.addMethod( name, method [, message ] )方法

- name：设置验证方法的名称。
- method：回调函数，function(value,element,param){}
	- value：元素的值
	- element：元素本身
	- param：参数
- message：设置验证不通过的错误提示信息。

```html
<div id="main">
    <form class="cmxform" id="texttests" method="get" action="foo.html">
        <h2 id="summary"></h2>
        <fieldset>
            <legend>Example with custom methods and heavily customized error display</legend>
            <table>
                <tr>
                    <td>
                        <label for="number">textarea</label>
                    </td>
                    <td>
                        <input id="number" name="number" title="Please enter a number with at least 3 and max 15 characters!">
                    </td>
                    <td></td>
                </tr>
                <tr>
                    <td>
                        <label for="secret">Secret</label>
                    </td>
                    <td>
                        <input name="secret" id="secret">
                    </td>
                    <td></td>
                </tr>
                <tr>
                    <td>
                        <label for="math">7 + 4 =</label>
                    </td>
                    <td>
                        <input id="math" name="math" title="Please enter the correct result!">
                    </td>
                    <td></td>
                </tr>
            </table>
            <input class="submit" type="submit" value="Submit">
        </fieldset>
    </form>
    <h3 id="warning">Your form contains tons of errors! Please try again.</h3>
</div>
<script>
    // this one requires the text "buga", we define a default message, too
    $.validator.addMethod("buga", function(value) {
        return value == "buga";
    }, 'Please enter "buga"!');

    // this one requires the value to be the same as the first parameter
    $.validator.methods.equal = function(value, element, param) {
        return value == param;
    };

    $().ready(function() {
        var validator = $("#texttests").bind("invalid-form.validate", function() {
            $("#summary").html("Your form contains " + validator.numberOfInvalids() + " errors, see details below.");
        }).validate({
            debug: true,
            errorElement: "em",
            errorContainer: $("#warning, #summary"),
            errorPlacement: function(error, element) {
                error.appendTo(element.parent("td").next("td"));
            },
            success: function(label) {
                label.text("ok!").addClass("success");
            },
            rules: {
                number: {
                    required: true,
                    minlength: 3,
                    maxlength: 15,
                    number: true
                },
                secret: "buga",
                math: {
                    equal: 11
                }
            }
        });

    });
</script>
```

## 瀑布流插件

### 什么是瀑布流

瀑布流，又称瀑布流式布局。是比较流行的一种网站页面布局，视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部。

**特点**

- 琳琅满目: 整版以图片为主，大小不一的图片按照一定的规律排列。
- 唯美: 图片的风格以唯美的图片为主。
- 操作简单: 在浏览网站的时候，只需要轻轻滑动一下鼠标滚轮,一切的美妙的图片精彩便可呈现在你面前。

### Masonry 插件

Masonry 是 jQuery 的布局插件，可以把 Masonry 看做是 CSS 的浮动布局。

无论排列的元素是水平浮动的还是垂直浮动的，Masonry 都是根据网格先垂直排列元素，再水平排列元素，就像修墙一样。

配置 Masonry 相当简单，只需在 jQuery 脚本简单的使用 `.masonry()` 方法来包装容器元素。由于布局，很可能需要制定一个选项。

#### masonry() 方法推荐选项

- itemSelector：指定使用项目中哪些子元素进行布局
- columnWidth：设置每列的宽度

```html
<div id="basic" class="container">
    <div class="item"></div>
    <div class="item h2"></div>
    <div class="item"></div>
    <div class="item h3"></div>
    <div class="item h5"></div>
    <div class="item h2"></div>
    <div class="item"></div>
    <div class="item h4"></div>
    <div class="item"></div>
    <div class="item h3"></div>
    <div class="item"></div>
    <div class="item h5"></div>
    <div class="item"></div>
    <div class="item h3"></div>
    <div class="item h4"></div>
    <div class="item h4"></div>
    <div class="item"></div>
    <div class="item h3"></div>
    <div class="item h4"></div>
    <div class="item h4"></div>
    <div class="item h5"></div>
</div>
<script>
    $("#basic").masonry({
        itemSelector: '.item',
        columnWidth: 100
    });
</script>
```

#### masonry() 方法布局选项

- gutter：设置每列之间的宽度
- percentPosition：值为true，使用百分值，而不是像素值
- stamp：在布局中标记元素，Masonry将在这些标记的元素下进行布局
- isFitWidth：基于容器的父元素大小设置容器的宽度以适应可用的列数
- isOriginLeft：设置布局的水平对齐，默认为true时，从左到右
- isOriginTop：设置布局的垂直对齐，默认为true时，从上到下

**百分值效果**

```html
<div id="basic" class="container">
    <div class="item item-sizer"></div>
    <div class="item item-sizer h2"></div>
    <div class="item item-sizer"></div>
    <div class="item item-sizer h3"></div>
    <div class="item item-sizer h5"></div>
    <div class="item item-sizer h2"></div>
    <div class="item item-sizer"></div>
    <div class="item item-sizer h4"></div>
    <div class="item item-sizer"></div>
    <div class="item item-sizer h3"></div>
    <div class="item item-sizer"></div>
    <div class="item item-sizer h5"></div>
    <div class="item item-sizer"></div>
    <div class="item item-sizer h3"></div>
    <div class="item item-sizer h4"></div>
    <div class="item item-sizer h4"></div>
    <div class="item item-sizer"></div>
    <div class="item item-sizer h3"></div>
    <div class="item item-sizer h4"></div>
    <div class="item item-sizer h4"></div>
    <div class="item item-sizer h5"></div>
</div>
<script>
    $("#basic").masonry({
        columnWidth: ".item-sizer",
        percentPosition : true
    });
</script>
```

**固定元素**

```html
<div id="basic" class="container">
    <div class="stamp stamp1"></div>
    <div class="stamp stamp2"></div>
    <div class="item"></div>
    <div class="item h2"></div>
    <div class="item"></div>
    <div class="item h3"></div>
    <div class="item h5"></div>
    <div class="item h2"></div>
    <div class="item"></div>
    <div class="item h4"></div>
    <div class="item"></div>
    <div class="item h3"></div>
    <div class="item"></div>
    <div class="item h5"></div>
    <div class="item"></div>
    <div class="item h3"></div>
    <div class="item h4"></div>
    <div class="item h4"></div>
    <div class="item"></div>
    <div class="item h3"></div>
    <div class="item h4"></div>
    <div class="item h4"></div>
    <div class="item h5"></div>
</div>
<script>
    $("#basic").masonry({
        itemSelector: '.item',
        columnWidth: 100,
        stamp: '.stamp'
    });
</script>
```

**自适应宽度**

```html
<div id="basic" class="container">
    <div class="item"></div>
    <div class="item h2"></div>
    <div class="item"></div>
    <div class="item h3"></div>
    <div class="item h5"></div>
    <div class="item h2"></div>
    <div class="item"></div>
    <div class="item h4"></div>
    <div class="item"></div>
    <div class="item h3"></div>
    <div class="item"></div>
    <div class="item h5"></div>
    <div class="item"></div>
    <div class="item h3"></div>
    <div class="item h4"></div>
    <div class="item h4"></div>
    <div class="item"></div>
    <div class="item h3"></div>
    <div class="item h4"></div>
    <div class="item h4"></div>
    <div class="item h5"></div>
</div>
<script>
    $("#basic").masonry({
        itemSelector: '.item',
        columnWidth: 100,
        isFitWidth: true
    });
</script>
```

#### masonry() 方法设置选项

- containerStyle：对容器中的元素使用CSS样式
- transitionDuration：设置改变位置或外观的过度时间，默认为0.4s
- isResizeBound：是否根据窗口大小调整大小和位置
- isInitLayout：是否初始化布局，为false时，可以在初始化布局前，使用方法或绑定事件

#### Masonry 插件的方法

**布局**

- masonry( )：布局容器中所有的元素。当每个元素改变大小时，布局依旧有效并且每个元素要重新进行布局
- layoutItems( )：布局指定元素

**添加或删除元素**

- appended( )：在布局的最后添加并布局新的元素
- remove( )：从Masonry对象中或DOM中删除指定元素

**事件**

- on事件：添加一个Masonry事件的监听器
- off事件：删除一个Masonry事件的监听器

```html
<div id="basic" class="container">
    <div class="item"></div>
    <div class="item h2"></div>
    <div class="item"></div>
    <div class="item h3"></div>
    <div class="item h5"></div>
    <div class="item"></div>
    <div class="item h2"></div>
    <div class="item"></div>
    <div class="item h3"></div>
    <div class="item h5"></div>
    <div class="item h2"></div>
    <div class="item"></div>
    <div class="item h4"></div>
    <div class="item"></div>
    <div class="item h3"></div>
    <div class="item"></div>
    <div class="item h5"></div>
</div>
<script>
    var $grid = $("#basic").masonry({
        itemSelector: '.item',
        columnWidth: 100,
        isFitWidth: true
    });

    $grid.on( 'click', '.item', function() {
        // change size of item via class
        $( this ).toggleClass('grid-item--gigante');
        // trigger layout
        $grid.masonry();
    });

    $grid.on("layoutComplete",function( event, laidOutItems ) {
        console.log( 'Masonry layout complete with ' + laidOutItems.length + ' items' );
    });
</script>
```

## 开发插件

### 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 表示的是 匹配到的一组 <li>
		var $element = jQuery(this); //this表示的是每个<li>
		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');
		}
	});
}
```