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]