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 實現文本編輯器
回頂部
寫評論
相關閱讀
推薦文章


評論集


暫無評論。

稱謂：

内容：

驗證：


返回列表