2012年最有用的50款 jQuery 插件集锦——《表单篇》

>>>  技術話題—商業文明的嶄新時代  >>> 簡體     傳統

　这篇文章继续向大家分享一批实用的 jQuery 插件，今天带来的是网站项目中最常用的表单插件。这是一个系列的文章，将向大家分享50款最具创新的，同时也是最有用的 jQuery 插件，这些插件分成以下类别：网页布局插件，导航插件，表格插件，滑块和转盘插件，图表插件，图片特效插件以及视频插件等等，欢迎大家关注。

您可能感兴趣的相关文章

 

jQuery Complexify

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 代码：

　　示例 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

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

Filtrify 是一款先进的的标签过滤插件，灵感来自 Chosen 的多选功能和欧曼克拉的垂直导航菜单功能。

你可以在标签和由多个不同类别的标签组成的过滤项目中搜索标签，获得包含相关标签项目的数量的实时反馈。

效果演示：

示例代码：

?
<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

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

jQuery Credit Card Validator 用于检测和校验信用卡号码，它会告诉你检测到的信用卡类型以及号码是否有效。

这款插件适合用于国外项目，不知道大家是否有类似的适合用于国内的插件推荐，欢迎留言：）

　　 插件下载     效果演示


梦想天空 2013-08-29 12:55:51

[新一篇] MiniUI - 快速開發WebUI

[舊一篇] 小伙伴們驚呆了！10行 JavaScript 實現文本編輯器
回頂部
寫評論
相關閱讀
推薦文章


評論集


暫無評論。

稱謂：

内容：

驗證：


返回列表