这篇文章继续向大家分享一批实用的 jQuery 插件，今天带来的是网站项目中最常用的表单插件。这是一个系列的文章，将向大家分享50款最具创新的，同时也是最有用的 jQuery 插件，这些插件分成以下类别：网页布局插件，导航插件，表格插件，滑块和转盘插件，图表插件，图片特效插件以及视频插件等等，欢迎大家关注。
您可能感兴趣的相关文章
jQuery Complexify
网站有责任告诉用户他们设置的密码的质量，这款插件可以显示密码的复杂程度，通过视觉反馈把风险降到最低。
使用非常简单，示例 HTML 代码：
|
1
2
3
4
5
6
7
8
9
|
<script src='../assets/s/jquery.complexify.js'></script> <div id="demo"> <input type="password" id="password" placeholder="Password"> <div id="progressbar"><div id="progress"></div></div> <div id="status"> <div id="complexity">0%</div> <div id="complexityLabel">Complexity</div> </div> </div> |
示例 CSS 代码：
|
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
|
#demo { width:380px; margin-right:auto; margin-left:auto; } #progressbar { width:388px; height:48px; display:block; border-left:1px solid #ccc; border-right:1px solid #ccc; border-top:1px solid #ccc; border-top-right-radius: 8px; border-top-left-radius: 8px; overflow:hidden; background-color: white; } #progress { display:block; height:100px; width:0%; } .progressbarValid { background-color:green; background-image: -o-linear-gradient(-90deg, #8AD702 0%, #389100 100%); background-image: -moz-linear-gradient(-90deg, #8AD702 0%, #389100 100%); background-image: -webkit-linear-gradient(-90deg, #8AD702 0%, #389100 100%); background-image: -ms-linear-gradient(-90deg, #8AD702 0%, #389100 100%); background-image: linear-gradient(-90deg, #8AD702 0%, #389100 100%); } .progressbarInvalid { background-color:red; background-image: -o-linear-gradient(-90deg, #F94046 0%, #92080B 100%); background-image: -moz-linear-gradient(-90deg, #F94046 0%, #92080B 100%); background-image: -webkit-linear-gradient(-90deg, #F94046 0%, #92080B 100%); background-image: -ms-linear-gradient(-90deg, #F94046 0%, #92080B 100%); background-image: linear-gradient(-90deg, #F94046 0%, #92080B 100%); } #status { height:150px; width:388px; border:1px solid #ccc; border-bottom-right-radius: 8px; border-bottom-left-radius: 8px; background-color: white; } #password { width:100%; height:40px; font-size:30px; line-height:40px; border-radius: 8px; padding: 4px; box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); margin-bottom: 9px; color: #555555; border: 1px solid #cccccc; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; -webkit-text-security: disc; -webkit-appearance: textfield; outline: none; } #complexityLabel { width:100%; text-align:center; margin-top:10px; font-size:20px; line-height:30px; } #complexity { width:100%; text-align:center; font-family:"Helvetica Neue", "Helvetica", Arial, sans-serif; font-weight:bold; font-size:70px; line-height:80px; margin-top:10px; } |
示例 JavaScript 代码：
|
1
2
3
4
5
6
7
8
9
10
|
$(function () { $("#password").complexify({}, function (valid, complexity) { if (!valid) { $('#progress').css({'width':complexity + '%'}).removeClass('progressbarValid').addClass('progressbarInvalid'); } else { $('#progress').css({'width':complexity + '%'}).removeClass('progressbarInvalid').addClass('progressbarValid'); } $('#complexity').html(Math.round(complexity) + '%'); }); }); |
jQuery File Upload
jQuery File Upload 是最流行的文件上传插件之一，主要特色：
- ✓ 支持多个文件同时上传
- ✓ 支持拖放上次
- ✓ 显示上次进度
- ✓ 上传可以取消和恢复
- ✓ 可以在客户端缩放图像
- ✓ 支持图像预览
- ✓ 定制和扩展性强
- ✓ 不需要浏览器插件（例如 Flash）
- ✓ 支持跨站点上传
- ✓ 同页面支持多个上传实例
使用方式多种多样，简单示例代码：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
$('#fileupload').fileupload('option', { url: '//jquery-file-upload.appspot.com/', maxFileSize: 5000000, acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i, process: [ { action: 'load', fileTypes: /^image\/(gif|jpeg|png)$/, maxFileSize: 20000000 // 20MB }, { action: 'resize', maxWidth: 1440, maxHeight: 900 }, { action: 'save' } ] }); |
Filtrify
Filtrify 是一款先进的的标签过滤插件，灵感来自 Chosen 的多选功能和欧曼克拉的垂直导航菜单功能。
你可以在标签和由多个不同类别的标签组成的过滤项目中搜索标签，获得包含相关标签项目的数量的实时反馈。
效果演示：
- Single category
- Multiple categories
- Isotope integration
- Highlight matched items with the callback function
- Add a legend with the callback function
- Instantiate with a custom query
- Trigger a custom query
- Reset all filters
- Close panel after adding a tag
- Block "data" attributes from being added as categories
- Load images with Lazy Load
- Add pagination with jPages
示例代码：
<div id="placeHolder"></div> <ul id="container"> <li data-genre="pop, rock, british, classic rock"> The Beatles </li> <li data-genre="rock, british, blues, classic rock"> The Rolling Stones </li> <li data-genre="alternative, electronic, female vocalists"> Björk </li> <li data-genre="rock, alternative, grunge"> Foo Fighters </li> <li data-genre="rock, classic rock"> Bruce Springsteen </li> ... </ul> <script> $(function() { $.filtrify("container", "placeHolder"); }); </script> |
mailcheck
Mailcheck 是一款非常棒的 jQuery 插件，当用户拼写错误的电子邮件地址时，会智能提示正确的邮箱域名。
示例 HTML 代码：
|
1
2
3
|
<script src="jquery.min.js"></script> <script src="mailcheck.min.js"></script> <input id="email" name="email" type="text" /> |
示例 JavaScript 代码：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
var domains = ['hotmail.com', 'gmail.com', 'aol.com']; var topLevelDomains = ["com", "net", "org"]; var superStringDistance = function(string1, string2) { // a string distance algorithm of your choosing } $('#email').on('blur', function() { $(this).mailcheck({ domains: domains, // optional topLevelDomains: topLevelDomains, // optional distanceFunction: superStringDistance, // optional suggested: function(element, suggestion) { // callback code }, empty: function(element) { // callback code } }); }); |
jQuery Credit Card Validator
jQuery Credit Card Validator 用于检测和校验信用卡号码，它会告诉你检测到的信用卡类型以及号码是否有效。
这款插件适合用于国外项目，不知道大家是否有类似的适合用于国内的插件推荐，欢迎留言：）
如果您觉得这篇文章对您有用，记得轻轻点击一下右下角的【推荐】哦：）