jQuery有一个非常好的网络社区环境,贡献了很多创造性的jQuery插件,但是正因为插件太多了,所以使得很多插件都很难被查找。本篇文章正是因为这个原因,作者在这里收集了不同类型的50个不同的jQuery和javascript库供你使用。正确的使用它们一定有效的提高你网站的用户体验,从而留住客户。下面列出经过分类的插件,Enjoy it!
对话框Dialogs
浏览器内置对话框使用起来确实很方便,但是你会发现它们非常的丑陋,并且不可配置。如果你想你的网站显得更加专业更加优美,你一定很讨厌浏览器默认的对话框。本节的jQuery插件将会带给你漂亮的外观同时便于定制的对话框。
1.Alertify.js
Alertify (github)是一个非常小的js库,提供漂亮的对话框,并且再点击对话框中的按钮之后,页面上会出现相应的点击通知。使用css可以非常方便的实现个性化定制,而且Alertify不依赖第三方js库(并且能很好的与第三方插件兼容)。要使用它仅仅需要在进入js文件后,使用全局的alertify对象:
2. jQuery Avgrund
jQuery Avgrund (github)是另一个非常酷的对话框插件。它虽然不像Alertify有非常丰富的功能,但是它具有非常炫的效果,相信你网站的用户看到后一定会十分的惊讶的。对话框一个令人印象深刻的动画方式出现,同时会模糊并变暗背景。
Forms表单
填写表单时枯燥和乏味的,每个人都讨厌填写表单。如果表单不具备客户端验证而是在提交表单之后才通知用户哪些数据填写错误,这无疑是非常糟糕的用户体验。本节jQuery插件将帮助你把这些糟糕体验从你的网站移除,同时增加一些实用的功能,从而提高用户体验。
3. iCheck
iCheck (github)是一个增强表单控件中的单选和复选按钮的jQuery插件。它可以使你完美的个性化定制你的表单,同时很好地兼容了移动设备,并有一个很漂亮的样式。在页面中引入js和css文件之后,你可以使用很简单的代码使你表单中的radio和checkbox变得漂亮许多。
4. Long Press
Long Press可以方便的输入重音或者生僻字的输入。貌似对中文没有太多作用~
5.jQuery File Upload
jQuery File Upload (github) 是一个很强大的支持多文件上传的jQuery插件。支持拖拽,显示上传进度和预览图片的功能。这个插件支持跨域和断点上传,同时可以在客户端调整图片大小。插件很好地支持各种后台语言(PHP, Python, Ruby on Rails, Java, Node.js, Go etc.)。
6. Complexify
Complexify (github) 插件可以在客户端验证用户输入密码的复杂度,复杂付会以百分比的方式显示出来。你可以定义合适的密码的复杂度,包括字母大小写,数字,特殊字符等等。当然这只是客户端的验证,也就说是可以规避的,所以你在后台也要做相应的密码复杂度检查。
7. Pickadate.js
Pickadate.js (github) 是一个支持响应式和移动设备的日期选择的jQuery插件。同时支持自定义css样式,在页面包含js和css之后,你可以使用下面的方法进行调用:
8. jQuery Knob
jQuery Knob (github)插件提供了可以可以用键盘鼠标活着移动设备上用手滑动的方式输入的数字的方法。
9. Chosen
Chosen (github) 是一个强大的增强下拉选择框的插件,支持自定义css样式。同时你可以使用ajax增加一些回调函数,插件会给hidden input复制,这样你可以在提交表单的时候获得正确的值。
10. Fancy Input
Fancy Input (github)是一个增强input输入框的插件,当你在输入框中输入活着删除文本的时候会有非常酷的动画效果,不过很不幸这个插件不支持中文输入,使用起来非常简单:
11. Typeahead.js
Typeahead (github)是一个反应非常快的自动补全插件。同时很好地支持本地数据和远程数据的建议,使用了很少的request,从而减少网络的负载。
12. Parsley.js
Parsley.js (github)插件可以让你不适用任何的js代码来控制输入框的格式验证。你只需要定义相应的data属性,剩下的验证Parsley.js会帮你完成。天屹曾经也写过类似的插件,用起来还是十分方便的。
全屏类具有视差效果的插件
现在全屏具有视差显示的网页是一个很流行的页面设计趋势,相信这种方式会继续持续下去。这种类型的网页很适合文字量比较低图片展示比较多的网站,比如产品营销类页面。本小节下面的插件将帮助你刚容易的实现这种效果。
13.Windows (github)
14. Cool Kitten
Cook Kitten (github)支持响应式的视差滚动效果的插件。
15. Sticky
Sticky (github)是一个可以实现,当你滚动页面时页面中的某个元素总是显示在页面上。你可以用它来控制你的导航菜单或者分享按钮始终显示在网页中。
16. Super Scrollorama
Super Scrollorama (github)是一个非常酷的插件,它可以实现当你滚动页面的时候页面中的元素以动画的方式显示出来,同时具有多种很酷的效果。
17. Stellar.js
Stellar.js (github)可以为页面中的任何滚动的元素提供视差滚动效果。点击这里看一下很酷的效果吧。
18. Scrollpath
Scrollpath (github) 也是一个页面滚动类的插件,不多说,看效果吧~很帅的。
文字效果类
在过去几年里网页排版有了巨大的改善,从最开始只是使用对网页排版很友好的字体,到现在我们可以内嵌自己的字体并且使用css3加强他们。本节的将带给你一些非常强大的字体控制jQuery插件。
19. Textillate.js
Textillate.js (github) 插件结合animate.css 和lettering.js提供了高级的带有动画效果的文字。由于动画都是基于css3的,所以可以在移动设备上很好的显示,另外插件提供了大量的动画效果供你选择使用。
20. Arctext.js
Arctext.js (demo)插件提供了弧度文字效果的实现,可以让你安排每个沿着弧度的字母。当然也是基于css3的。
21. Bacon
Bacon (githug) jQuery插件可以让文字围绕着贝塞尔曲线或者直线显示,或许在特定的情况下你可以使用它~
22. Lettering.js
Lettering.js (github) 是一个使文字适应更好的页面排版简单而有效的jQuery插件。他所做的就是把一段文字有序的分成多个span来显示,这样你就可以定义每个字母的样式了。
23. jQuery Shuffle Letters
jQuery Shuffle Letters (demo)提供了一个很有趣的文字显示效果,在演示页面输入文字,然后点击回车键就可以看到动画效果了。
24. FitText.js
FitText.js (github)是一个文字填充类的jQuery插件。它可以是你的页面文字总是自动缩放大小来填满整个页面的宽度,这使得他在多种终端设备上的显示尤为锋利。
Grids网格类显示插件
这个小节介绍一些网格类的插件,使用这些插件可以很好排版并对其每个网格中的内容。
25. Gridster.js
Gridster.js (github)是一个允许用户在多列网格中直观的拖动和放置每个网格的jQuery插件。甚至可以动态的添加和删除网格,拖动放置一个网格元素会导致其他网格自动排列。对于控制面板类的页面,一定是一个很好地可以提高用户体验的功能。
26. Freetile
Freetile (github) 可以帮你实现一个高效动态响应式布局。它可以应用到一个容器元素,然后动态的分配容器中的子元素以达到最好的显示效果。
27. Stalactite
Stalactite (github) 是一个实现随着页面滚动延迟加载网格中内容的jQuery插件,加载时带有很不错的动画效果。
自定义滚动条类的jQuery插件
有些时候我们会想要自定义浏览器滚动条的显示样式,有的浏览器支持同时也有些不支持,本小节的插件将让自定义滚动条样式在不同浏览器中变得可能。
28. nanoScroller.js
nanoScroller.js (github)插件提供一种非常简单的方式去实现在网页中显示类似Mac操作系统中的滚动条效果。该插件很好地兼容Iphone和一些安卓的移动设备。
29. jQuery Custom Content Scroller
jQuery Custom Content Scroller (github) 插件是一款很强大的自定义滚动条插件,支持自定义滚动条css样式。同时支持定制垂直和水平滚动条,定义滚动按钮,内嵌滚动条等效果。点击这里查看演示。
背景类jQuery插件
网页具有使用全屏背景是另一个流行的网站设计趋势。这里列出的插件可以帮你实现用一个单一的图片或者一个画廊甚至视频作为网页的背景。
30. Tubular.js
Tubular.js是一个可以使YouTube视频作为网页背景的插件。同时还提供了播放和暂停按钮等功能控制视频背景。
31. Backstretch
Backstretch (github) 是一个支持随着窗口的改变动态改变背景图片大小的jQuery插件。
32. Supersized
Supersized (github)是一个可以让用自己更换网页背景图片的jQuery插件。页面上可以以幻灯片的方式提供一组背景图片供用户选择切换背景图片,这种方式特别适合在相册和展示类的网站使用。查看演示
画廊和图像效果类插件
本节下面的插件主要用与增强图片显示和为图片一些显示效果。
33. jQuery TouchTouch
jQuery TouchTouch (demo)一个简单插件目的在能够在移动设备上使用和工作。
34. iPicture
iPicture是交互式的图片显示插件,你可以在图片中添加文本,图像等一些提示显示。用在产品信息展示类的页面中应该是个不错的选择。
35. Adipoli jQuery Image Hover Plugin
Adipoli (demo)插件可以帮你实现鼠标悬停图片上显示各种效果。
36. Swipebox
Swipebox (github)可以帮你实现lightbox显示预览图片的原始大图尺寸的图片。支持移动设备上使用。
37. TiltShift.js
TiltShift.js (github)插件可以帮你实现了默认显示模糊的图像鼠标hover之后渐变显示清晰的图像。当前只支持 Chrome 和 Safari 6两个浏览器。
38. Threesixty.js
Threesixty.js (github) 提供了一种可以360°查看图片方式,但是你必须提供不同角度的图片。
39. Swipe.js
Swipe.js (github) 是另一个响应式的滑动幻灯片显示图片的插件。同时它支持移动设备,可以使用手势滑动显示图片,并且支持ie7.
40. CamanJS
CamanJS (github) 是一个功能强大的图像处理库,建立canvas元素之上。有了它,你可以操纵图像的像素,并实现几乎与Photoshop类似的控制。
41. SpectragramJS
Spectragram (github)目的在于能够更加容易的与Instagram API工作。它能获得用户的feeds,流行的图片,带特殊标签的图片等更多功能。
杂项
下面的一些插件不属于其他类,但是也是非常有价值的插件。
42. jQuery Countdown
jQuery Countdown (demo)是一个非常简单的倒计时类的插件,会移动化效果显示距离规定的事件的倒计时事件,挺不错的动画效果。
43. List.js
List.js (github) 是一个很强大的对html列表加强的插件,提供了很强大的列表处理功能,你可以对列表中的内容进行搜索,排序和过滤等功能,设置可以动态的添加或删除列表中的内容。并且此插件是独立的,不依赖于第三方jQuery插件。
44. jQuery PointPoint
jQuery PointPoint (demo)是一个很有意思的插件,它可以帮你吸引用户的注意力到页面中特定的部分,这个插件的效果是在鼠标附近加上一个指示器,并且这个指示器始终指向你需要用户注意的那个元素,是不是很有意思。
45. Social Feed
Social Feed (github) 这个插件的目的使你能够在你的社交账号展示公共的一些内容,这些内容使用一个模板设计,很好的是插件提供了定制化自己的模板。
46. Hook.js
Hook.js (github)插件能够帮你在桌面网页中实现在移动设备上非常常见的“下拉刷新”操作。
47. jQuery PercentageLoader
PercentageLoader (bitbucket)插件改进了传统的和水平进度条提供了一个漂亮的进度条效果。该插件使用html5 canvas元素。
48. Chart.js
Chart.js (github)插件是一个新的使用HTML5 canvas实现的报表显示类插件,同时他们还接收一些ie7/8反馈。它支持动画显示6种报表类型。Chart.js非常小还不到5kb,让我们对flash说byebye吧。
49. Tooltipster
Tooltipster (github)是一个强大的显示提示信息的插件。当你hover到元素上它提供了各种方式的显示提示信息效果。查看演示
50. Toolbar.js
Toolbar.js (github) 插件提供了一种显示整洁的弹出菜单的方式。同时支持在在弹出菜单中绑定相应的事件。非常适合使用在空间不是很大的移动设备网页上,当然如果你用在桌面网页也是不错的。
英文连接:50 Amazing jQuery Plugins That You Should Start Using Right Now