民初思韻網

加入收藏   設為首頁
選擇語言   簡體中文
你好,請 登陸 或 注冊
首頁 人文思韻 傳奇人物 歷史思潮 時代作品 話題討論 國民思韻 民初捐助 賬戶管理
  搜索  
    人文精神 >>> 技術的天空 溫和的思緒
字體    

2012年最有用的50款 jQuery 插件集錦——《表單篇》
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

歡迎訂閱我們的微信公眾賬號!
春秋茶館訂閱號
微信號 season-tea(春秋茶館)
每天分享一篇科技/遊戲/人文類的資訊,點綴生活,啟迪思想,探討古典韻味。
  清末民初歷史人物  民初人物
傳統官僚翰林總統
徐世昌(1855年10月24日-1939年6月5日),字卜五,號菊人,又號水竹邨人、弢齋。祖籍浙江寧波鄞縣。清末民初,曾為北洋政府官僚。1918年,徐世昌獲段祺瑞控制的安....
高文費而隱 古德潔無華
楊霽園先生是民國時期寧波的一位大儒,一生致力于教育、述著,著作宏豐,在國學、文學等方面成就卓著,更兼他品行方端、至誠至孝,自1940年去世后,鄉人及門生一直追思不息。但楊....
資助民初精神網
        回頂部     寫評論

 
評論集
暫無評論!
發表評論歡迎你的評論
昵稱:     登陸  註冊
主頁:  
郵箱:  (僅管理員可見)

驗證:   验证码(不區分大小寫)  
© 2011   民初思韻網-清末民初傳奇時代的發現與復興   版權所有   加入收藏    設為首頁    聯繫我們    1616導航