這篇文章繼續向大家分享一批實用的 jQuery 插件，今天帶來的是網站項目中最常用的表單插件。這是一個系列的文章，將向大家分享50款最具創新的，同時也是最有用的 jQuery 插件，這些插件分成以下類別：網頁布局插件，導航插件，表格插件，滑塊和轉盤插件，圖表插件，圖片特效插件以及視頻插件等等，歡迎大家關注。
您可能感興趣的相關文章
jQuery Complexify
網站有責任告訴用戶他們設置的密碼的質量，這款插件可以顯示密碼的復雜程度，通過視覺反饋把風險降到最低。
使用非常簡單，示例 HTML 代碼：
<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 代碼：
#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 代碼：
$(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）
- ✓ 支持跨站點上傳
- ✓ 同頁面支持多個上傳實例
使用方式多種多樣，簡單示例代碼：
$('#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 代碼：
<script src="jquery.min.js"></script> <script src="mailcheck.min.js"></script> <input id="email" name="email" type="text" />
示例 JavaScript 代碼：
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 用於檢測和校驗信用卡號碼，它會告訴你檢測到的信用卡類型以及號碼是否有效。
這款插件適合用於國外項目，不知道大家是否有類似的適合用於國內的插件推薦，歡迎留言：）
如果您覺得這篇文章對您有用，記得輕輕點擊一下右下角的【推薦】哦：）
您可能感興趣的相關文章