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

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

 

jQuery Complexify

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

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

使用非常简单,示例 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

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

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

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

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

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

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

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

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

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

   插件下载     效果演示

 

如果您觉得这篇文章对您有用,记得轻轻点击一下右下角的推荐哦:)

您可能感兴趣的相关文章

   

本文链接:2012年最有用的50款 jQuery 插件集锦——表单篇

编译来源:前端里 ◆ 关注前端开发技术 ◆ 分享网页设计资源

赞 (0) 打赏

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏