2012年最有用的50款 jQuery 插件集锦—

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

阅读量：6255 次

发布时间：2019-06-22

本文共 4883 字，大约阅读时间需要 16 分钟。

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

您可能感兴趣的相关文章

网站有责任告诉用户他们设置的密码的质量，这款插件可以显示密码的复杂程度，通过视觉反馈把风险降到最低。

使用非常简单，示例 HTML 代码：

　　示例 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 是最流行的文件上传插件之一，主要特色：

✓ 支持多个文件同时上传

✓ 支持拖放上次

✓ 显示上次进度

✓ 上传可以取消和恢复

✓ 可以在客户端缩放图像

✓ 支持图像预览

✓ 定制和扩展性强

✓ 不需要浏览器插件（例如 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 是一款先进的的标签过滤插件，灵感来自的多选功能和欧曼克拉的功能。

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

效果演示：

示例代码：


     
         
       The Beatles 
    
       The Rolling Stones 
    
       Björk 
    
       Foo Fighters 
    
       Bruce Springsteen 
    ...

Mailcheck 是一款非常棒的插件，当用户拼写错误的电子邮件地址时，会智能提示正确的邮箱域名。

示例 HTML 代码：

示例 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 用于检测和校验信用卡号码，它会告诉你检测到的信用卡类型以及号码是否有效。

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

如果您觉得这篇文章对您有用，记得轻轻点击一下右下角的【】哦：）

您可能感兴趣的相关文章

本文链接：

编译来源：

转载地址：http://qxjsa.baihongyu.com/

你可能感兴趣的文章