jQuery开发者必备的16个组件

提供各种各样的组件是为了提供更好的交互性，并提供形式各异的数据。换句话说，组件是可视化最基础的一部分。在这篇文章中，我会分享一些我们找到的一些非常实用的jQuery组件。它们健壮、轻量级前且很稳定，相信很多人已经了解过其中的内容。如果有什么问题请及时在评论中反馈给我们。

[url=http://candrews.net/blog/2010/10/introducing-sprymap/]1. SpryMap[/url]

[img]http://devbbs-discuzx.stor.sinaapp.com/uc_server/forum/201411/09/230548yz3wmk333bql44lj.jpg[/img]
SpryMap是一个超轻量级的组件，只有2.8KB，是一个不需要三方依赖的Javascript组件，能够让 HTML 元素实现类似 Google Maps 中的点击和拖拽效果。

[url=http://wicky.nillia.ms/headroom.js/]2. Headroom.js[/url]

[img]http://devbbs-discuzx.stor.sinaapp.com/uc_server/forum/201411/09/230621zxhxmyx1xrsrgb1r.jpg[/img]

Headroom.js是一个可以让你设置下拉滚动页面后，自动隐藏顶部导航的插件，目前固定顶部导航栏开始变得流行起来，即访客向下滚动页面时，顶部的导航栏永远在一个相对的顶部位置，这样做可以让访客们轻松的点击网页中的其它栏目，而不必重新再返回顶部寻找其它栏目。
但我们都知道众口难调，并不是所有访客都喜欢你这么设计，有些人会觉得碍眼，当他浏览文章内容的时候，他们不想看到导航栏总是呆在固定的位置，甚至会觉得影响到他阅读网页内容，因此Headroom.js这款插件给了我们解决方案，它可以让前端开发者们设定顶部导航栏自动隐藏的位置，即当用户向下滚动页面至某一个高度时隐藏固定导航栏，当鼠标向上滚动时才会再次出现。

[url=https://github.com/filamentgroup/SocialCount]3. Social Count[/url]

[img]http://devbbs-discuzx.stor.sinaapp.com/uc_server/forum/201411/09/230641m9fcwwyreyz7wfev.jpg[/img]

SocialCount是一个响应式的社交分享组件，定制非常简单，支持鼠标、触控和键盘监听。

[url=http://widgets.better2web.com/loader/]4. jQuery Percentage Loader[/url]

[img]http://devbbs-discuzx.stor.sinaapp.com/uc_server/forum/201411/09/230700adz06kpdb2rkkkw7.jpg[/img]
jQuery Percentage Loader 是一个很小的 jQuery 插件，压缩后只有10k，用来显示非常炫的进度条信息。
它是通过HTML5 Canvas实现的，仅仅依赖JavaScript，这种方法显然会比使用图片更优，你可以查看它的源码。

[url=http://www.dimin.net/software/panojs/]5. PonoJS3[/url]

[img]http://devbbs-discuzx.stor.sinaapp.com/uc_server/forum/201411/09/2307181h2vvvv6ddb21v1q.jpeg[/img]
PanoJS3是一个交互性很强的JavaScript组件，这个组件让图片缩放变得非常简单，非常适合用来查看很大的。比如像地图这样高精度的文档，PanoJS3运行多种平台：PC，Mac和手机，它运行Chrome3+, Safari 3+, FireFox 2+, Internet Explorer 8+, Opera 9+。

[url=http://blueimp.github.com/jQuery-File-Upload/]6. jQuery File Upload Widget[/url]

[img]http://devbbs-discuzx.stor.sinaapp.com/uc_server/forum/201411/09/230737sx6wewxpk7jxdjzp.png[/img]
jQuery File Upload是一个支持多选的文件上传组件。它运行各种后台技术 (PHP, Python, Ruby on Rails, Java, Node.js, Go etc.)。

[url=http://mobipick.sustainablepace.net/]7. Mobi Pick[/url]

[img]http://devbbs-discuzx.stor.sinaapp.com/uc_server/forum/201411/09/230754zrdb6udn1snrl2no.jpeg[/img]
Mobi Pick是一款Android风格的日期选择组件，主要利用了jQuery Mobile脚本库。Mobi Pick提供了3种不同的日期选择功能，最简单的日期选择功能是选择年月日，另外一种是可以自定义修改年月日，还有一种是可以下拉选择日期。由于Mobi Pick有着Android的风格样式，因此外观相当漂亮。

[url=http://christophercliff.com/sausage/]8. Sausage[/url]

[img]http://devbbs-discuzx.stor.sinaapp.com/uc_server/forum/201411/09/230815shb1eehahehh85ai.jpeg[/img]
Sausage.js是一个页面文本展示的jQuery UI组件，是一个集展示和审查于一体的完全解决方案。 源码托管在Github上，需要jQuery和jQuery UI库支持。

[url=http://www.erichynds.com/blog/a-jquery-ui-growl-ubuntu-notification-widget]9. jQuery UI Notify Widge[/url]

[img]http://devbbs-discuzx.stor.sinaapp.com/uc_server/forum/201411/09/23092661xaxd16r0gah8dm.jpeg[/img]
jQuery UI Notify Widget是一个类似于Growl的消息提醒控件。只有100行的CSS代码。

[url=http://www.codehandling.com/2013/02/yunero-jquery-plugin-displays-video.html]10. Yunero[/url]

[img]http://devbbs-discuzx.stor.sinaapp.com/uc_server/forum/201411/09/2309457odiqcquje5z5cd5.png[/img]

Yunero是一个很新的jQuery组件，为视频展示提供解决方案，可以选择YouTube或是其实自定义的视频源。

[url=http://minitwitter.webdevdesigner.com/]11. MiniTwitter[/url]

[img]http://devbbs-discuzx.stor.sinaapp.com/uc_server/forum/201411/09/231002l00dql41q0887414.jpeg[/img]

MiniTwitter 是一个把Twitter展示在你的网站或是WordPress中的jQuery组件。

[url=http://zinoui.com/]12. Zino UI[/url]

[img]http://devbbs-discuzx.stor.sinaapp.com/uc_server/forum/201411/09/231024zv2cp15ap5i2eivl.jpeg[/img]

Zino UI 是一款基于jquery的UI插件，用户界面框架包含23种不同的组件。为你的web程序和企业应用提供跨平台的用户接口框架，让你的CMS、后台和前端变得更加强大。

[url=https://github.com/sjwilliams/scrollstory]13. Scrollstory[/url]

[img]http://devbbs-discuzx.stor.sinaapp.com/uc_server/forum/201411/09/2310408mkh6jhs4l8kyme5.jpeg[/img]
ScrollStory 是个 jQuery UI 部件，用来创建简单的，基于滚动的页面和交互方式。用户滚动到哪个部分就高亮页面的哪个部分。

[url=http://mbraak.github.io/jqTree/]14. jqTree[/url]

[img]http://devbbs-discuzx.stor.sinaapp.com/uc_server/forum/201411/09/2310562sj9mmtdfddf601t.jpeg[/img]
jqTree是具有扩展和可折叠的树视图。它是轻量级的，灵活的jQuery插件，它将一个无序列表转换为可展开和折叠的树。

[url=http://sharrre.com/]15. Sharrre[/url]

[img]http://devbbs-discuzx.stor.sinaapp.com/uc_server/forum/201411/09/231113cabzs2h1hs03cvr0.jpeg[/img]
Sharrre是一个 专注于分享的jQuery组件。运行Facebook, Twitter, Google Plus, Digg 和 Delicious 等等。

[url=http://modeln.github.io/sDashboard/]16. SDashboard[/url]

[img]http://devbbs-discuzx.stor.sinaapp.com/uc_server/forum/201411/09/231133g78f8080e0z0ugzn.jpg[/img]

sDashboard 是一个jQuery插件可以将关联对象转成各种面板，每个对象转成部件后可以进行拖拉操作。


转自：[url]http://www.gbtags.com/gb/share/4129.htm[/url]