50个令人惊奇的jQuery插件

50个令人惊奇的jQuery插件

博客分类：

• html
• css
• jquery
• ui
• javascript
• 前端

 

 

jQuery拥有强大的有创造性的程序员群体。 然而，它很难通过在所有发布的东西里面挑出那些绝对必须要拥有的宝贝。在本文中，你将得到50个新jQuery插件和JavaScript库的一个集合，拥有好的工具，可以使您的网站更便于使用。这些插件分类展示，便于浏览。好好享受吧！

http://www.woiweb.net/50-amazing-jquery-plugins.html

其他篇

• 50个令人惊奇的jQuery插件（杂货篇）

 

• 50个令人惊奇的jQuery插件（画廊及图片特效篇）

 

• 50个令人惊奇的jQuery插件（表格布局、滚动条和背景图篇）

 

• 50个令人惊奇的jQuery插件（文字特效篇）

 

• 50个令人惊奇的jQuery插件（单页网站滚动插件篇）

 

对话框

浏览器内置窗口便于使用但很难看而且不能定制化。如果你想要你的应用看起来更高端和专业，肯定有讨厌默认外观的地方，本章节中的插件可以替代内置对话框而且很容易定制化。

1. Alertify.js

Alertify (github) 是一个小巧的呈现漂亮对话框和通知的库。它很容易用CSS定制，拥有一个简单的API，不依赖第三方包。要用它，只要引入js文件并且调用全局alertify对象的方法：

?

1 2 3 4 5 6 7 8 9 10 11

// alert dialog alertify.alert("Message");   // confirm dialog alertify.confirm("Message", function (e) {     if (e) {         // user clicked "ok"     } else {         // user clicked "cancel"     } });

2. jQuery Avgrund

jQuery Avgrund (github) 是另一个酷的对话框解决方案。它不如alertify特性丰富，事实上是你web应用所需要的，该对话框会以一个给人以深刻印象的动画效果出现，同时闪烁和变暗背景。

表单

表单繁琐枯燥，每个人讨厌填充它们。甚至更大的问题是如果当前没有进行客户端验证我们将强制其进行二次输入。本章节中的插件尝试用有用的功能来提高表单交互使事情变得更好些。

3. iCheck

iCheck (github) 是一个提高你的表单控制的jQuery插件。它完美定制化，可工作在移动端而且皮肤漂亮多样。要使用它，需要在你的页面引入js和css文件，用少许jQuery代码转换你所有的单选框和多选框。编者推荐使用。

?

1 2 3 4 5 6

$(document).ready(function(){     $('input').iCheck({         checkboxClass: 'icheckbox_minimal',         radioClass: 'iradio_minimal'     }); });

iCheck

4. Long Press

Long Press 是一个jQuery插件，简化强调或生僻字的拼写，当打字时一直按着一个键将会出现一个你可以用来选择字符的工具条，该插件同样在github 上。译者注：这个挺不错。

Long Press

5. jQuery File Upload

jQuery File Upload (github) 是一个集文件多选，拖拽，进度条和图片预览的组件。它支持跨域，分块且可恢复文件上传和客户端图片尺寸重置。可配合任何服务器端平台 (PHP, Python, Ruby on Rails, Java, Node.js等)而且其一系列的引用和回调使用其很容易嵌入到你的应用里面。

jQuery File Upload

6. Complexify

Complexify (github) 是一个以评估密码复杂程序为目的的jQuery插件。你可以在注册表单中使用它来向用户展现密码复杂度的百分比（就像我们在本教程中所做）。有了这个插 件，你可以强制密码包含大写/小写字母，数字，特殊符号和更多的组合。我要指出，这是一个纯粹的客户端解决方案，这意味着它可以规避。这就是为什么你要在 服务器端还应检查密码的复杂性。

Complexify

7. jQuery Knob

jQuery Knob (github) 是一个用于将输入元素转换为可触摸的jQuery转盘的插件。它使用canvas构建，并且通过设置输入框的属性值实现完全定制化。像这样：

<iframe id="aswift_3" style="left: 0px; top: 0px; position: absolute;" name="aswift_3" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" width="336" height="280"></iframe>

?

1	<input class="knob" data-width="150" data-cursor=true data-fgColor="#222222" data-thickness="0.3" value="29">

这转盘可以用鼠标（点击，拖拽，滚轮），键盘，或者在移动设备上使用触摸来控制。这个有点意思。

jQuery Knob

8. Pickadate.js

Pickadate.js (github) 是一个用于创建响应式并且移动端也很友好的日期选择jQuery插件，它使用非常简单并且能用CSS定制化，使用它，只需引入js文件和样式表，并在你的输入框上调用这个插件:

$('.datepicker').pickadate();

该插件有很多选项，请看 文档。译者注：月份及年份带下拉的好像没做事件阻止，选择某个月会直接关掉当前选择器。

Pickadate.js

9. Chosen

Chosen (github) 是一个强大的组件，能将一个选择输入框转换成一个可检索的下拉列表。它易于用CSS定制，并且你可以在自己的代码通过回调函数来使用。该插件同样更新原始元素（隐藏的那个），如此可以它做为表单的一部分提交或用JS读取它也可得到正确的结果。译者注：这个真心不错。

Chosen

10. Fancy Input

Fancy Input (github)是一个在超级酷的文本框中输入或删除文本的插件，它有5种动画效果，动画是用CSS3来实现效果。译者注：效果很棒，在输入中文时有不太好用。

$('div :input').fancyInput();

Fancy Input

11. Typeahead.js

Typeahead (github) 是twitter的一个快速自动完成库。它的灵感来源于twitter.com的搜索框并且拥有其全部特性。当用户输入时它产生联想，并且将最顶部的联想做为输入提示，该插件可使用硬编码数据同样也支持远程数据，以此来减轻网络请求。

Typeahead.js

12. Parsley.js

Parsley.js (github) 是一个不显眼的表单验证库。它可以让你而无需编写一行JavaScript代码来验证表单字段。相反，你必须把数据属性置于你需要验证的输入框中，剩下的交由插件处理，该插件可同jQuery和Zepto一起工作，并且不到800行。

Parsley.js