2012年最有用的50款 jQuery 插件集锦——《表单篇》
这篇文章继续向大家分享一批实用的 jQuery 插件,今天带来的是网站项目中最常用的表单插件。这是一个系列的文章,将向大家分享50款最具创新的,同时也是最有用的 jQuery 插件,这些插件分成以下类别:网页布局插件,导航插件,表格插件,滑块和转盘插件,图表插件,图片特效插件以及视频插件等等,欢迎大家关注。
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 代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 | #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( -90 deg, #8AD702 0% , #389100 100% ); background-image : -moz-linear-gradient( -90 deg, #8AD702 0% , #389100 100% ); background-image : -webkit-linear-gradient( -90 deg, #8AD702 0% , #389100 100% ); background-image : -ms-linear-gradient( -90 deg, #8AD702 0% , #389100 100% ); background-image : linear-gradient( -90 deg, #8AD702 0% , #389100 100% ); } .progressbarInvalid { background-color : red ; background-image : -o-linear-gradient( -90 deg, #F94046 0% , #92080B 100% ); background-image : -moz-linear-gradient( -90 deg, #F94046 0% , #92080B 100% ); background-image : -webkit-linear-gradient( -90 deg, #F94046 0% , #92080B 100% ); background-image : -ms-linear-gradient( -90 deg, #F94046 0% , #92080B 100% ); background-image : linear-gradient( -90 deg, #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 代码:
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 是最流行的文件上传插件之一,主要特色:
- ✓ 支持多个文件同时上传
- ✓ 支持拖放上次
- ✓ 显示上次进度
- ✓ 上传可以取消和恢复
- ✓ 可以在客户端缩放图像
- ✓ 支持图像预览
- ✓ 定制和扩展性强
- ✓ 不需要浏览器插件(例如 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 是一款先进的的标签过滤插件,灵感来自 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 代码:
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 用于检测和校验信用卡号码,它会告诉你检测到的信用卡类型以及号码是否有效。
这款插件适合用于国外项目,不知道大家是否有类似的适合用于国内的插件推荐,欢迎留言:)
如果您觉得这篇文章对您有用,记得轻轻点击一下右下角的【推荐】哦:)
您可能感兴趣的相关文章
作者:山边小溪
主站:yyyweb.com 记住啦:)
欢迎任何形式的转载,但请务必注明出处。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 没有源码,如何修改代码逻辑?
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· NetPad:一个.NET开源、跨平台的C#编辑器
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
2011-03-20 分享20款漂亮的Windows 7主题