1. 程式人生 > >50個你現在應該去使用的最新的出色的jQuery外掛

50個你現在應該去使用的最新的出色的jQuery外掛

Forms表單

填寫表單時枯燥和乏味的,每個人都討厭填寫表單。如果表單不具備客戶端驗證而是在提交表單之後才通知使用者哪些資料填寫錯誤,這無疑是非常糟糕的使用者體驗。本節jQuery外掛將幫助你把這些糟糕體驗從你的網站移除,同時增加一些實用的功能,從而提高使用者體驗。

iCheck (github)是一個增強表單控制元件中的單選和複選按鈕的jQuery外掛。它可以使你完美的個性化定製你的表單,同時很好地相容了移動裝置,並有一個很漂亮的樣式。在頁面中引入js和css檔案之後,你可以使用很簡單的程式碼使你表單中的radio和checkbox變得漂亮許多。

iCheck

4. Long Press

Long Press

可以方便的輸入重音或者生僻字的輸入。貌似對中文沒有太多作用~

Long Press

5.jQuery File Upload

jQuery File Upload (github) 是一個很強大的支援多檔案上傳的jQuery外掛。支援拖拽,顯示上傳進度和預覽圖片的功能。這個外掛支援跨域和斷點上傳,同時可以在客戶端調整圖片大小。外掛很好地支援各種後臺語言(PHP, Python, Ruby on Rails, Java, Node.js, Go etc.)。

jQuery File Upload

6. Complexify

Complexify (github) 外掛可以在客戶端驗證使用者輸入密碼的複雜度,複雜付會以百分比的方式顯示出來。你可以定義合適的密碼的複雜度,包括字母大小寫,數字,特殊字元等等。當然這只是客戶端的驗證,也就說是可以規避的,所以你在後臺也要做相應的密碼複雜度檢查。

Complexify

7. jQuery Knob

jQuery Knob (github) 可以轉化數字輸入框為類似撥號效果的介面,使用了html5 canvas,你可以使用滑鼠拖拽,或者鍵盤進行操作,同時外掛支援移動裝置顯示,你可以在移動裝置上滑動改變輸入的數字。

jQuery Knob

8. Pickadate.js

Pickadate.js (github) 是一個支援響應式和移動裝置的日期選擇的jQuery外掛。同時支援自定義css樣式,在頁面包含js和css之後,你可以使用下面的方法進行呼叫:

Pickadate.js

9. Chosen

Chosen (github) 是一個強大的增強下拉選擇框的外掛,支援自定義css樣式。同時你可以使用ajax增加一些回撥函式,外掛會給hidden input複製,這樣你可以在提交表單的時候獲得正確的值。

Chosen

10. Fancy Input

Fancy Input (github)是一個增強input輸入框的外掛,當你在輸入框中輸入活著刪除文字的時候會有非常酷的動畫效果,不過很不幸這個外掛不支援中文輸入,使用起來非常簡單:

Fancy Input

11. Typeahead.js

Typeahead (github)是一個反應非常快的自動補全外掛。同時很好地支援本地資料和遠端資料的建議,使用了很少的request,從而減少網路的負載。

Typeahead.js

12. Parsley.js

Parsley.js (github)外掛可以讓你不適用任何的js程式碼來控制輸入框的格式驗證。你只需要定義相應的data屬性,剩下的驗證Parsley.js會幫你完成。天屹曾經也寫過類似的外掛,用起來還是十分方便的。

Parsley.js

全屏類具有視差效果的外掛

現在全屏具有視差顯示的網頁是一個很流行的頁面設計趨勢,相信這種方式會繼續持續下去。這種型別的網頁很適合文字量比較低圖片展示比較多的網站,比如產品營銷類頁面。本小節下面的外掛將幫助你剛容易的實現這種效果。

Windows

14. Cool Kitten

Cook Kitten

15. Sticky

Sticky (github)是一個可以實現,當你滾動頁面時頁面中的某個元素總是顯示在頁面上。你可以用它來控制你的導航選單或者分享按鈕始終顯示在網頁中。

Sticky

16. Super Scrollorama

Super Scrollorama (github)是一個非常酷的外掛,它可以實現當你滾動頁面的時候頁面中的元素以動畫的方式顯示出來,同時具有多種很酷的效果。

Super Scrollorama

17. Stellar.js

Stellar.js (github)可以為頁面中的任何滾動的元素提供視差滾動效果。點選這裡看一下很酷的效果吧。

Stellar.js

18. Scrollpath

Scrollpath (github) 也是一個頁面滾動類的外掛,不多說,看效果吧~很帥的。

Scrollpath

文字效果類

在過去幾年裡網頁排版有了巨大的改善,從最開始只是使用對網頁排版很友好的字型,到現在我們可以內嵌自己的字型並且使用css3加強他們。本節的將帶給你一些非常強大的字型控制jQuery外掛。

19. Textillate.js

Textillate.js (github) 外掛結合animate.css 和lettering.js提供了高階的帶有動畫效果的文字。由於動畫都是基於css3的,所以可以在移動裝置上很好的顯示,另外外掛提供了大量的動畫效果供你選擇使用。

Textillate.js

20. Arctext.js

Arctext.js (demo)外掛提供了弧度文字效果的實現,可以讓你安排每個沿著弧度的字母。當然也是基於css3的。

Artctext.js

21. Bacon

Bacon (githug) jQuery外掛可以讓文字圍繞著貝塞爾曲線或者直線顯示,或許在特定的情況下你可以使用它~

Bacon.js

22. Lettering.js

Lettering.js (github) 是一個使文字適應更好的頁面排版簡單而有效的jQuery外掛。他所做的就是把一段文字有序的分成多個span來顯示,這樣你就可以定義每個字母的樣式了。

Lettering.js

23. jQuery Shuffle Letters

jQuery Shuffle Letters (demo)提供了一個很有趣的文字顯示效果,在演示頁面輸入文字,然後點選回車鍵就可以看到動畫效果了。

jQuery Shuffle Letters

24. FitText.js

FitText.js (github)是一個文字填充類的jQuery外掛。它可以是你的頁面文字總是自動縮放大小來填滿整個頁面的寬度,這使得他在多種終端裝置上的顯示尤為鋒利。

FitText.js

Grids網格類顯示外掛

這個小節介紹一些網格類的外掛,使用這些外掛可以很好排版並對其每個網格中的內容。

25. Gridster.js

Gridster.js (github)是一個允許使用者在多列網格中直觀的拖動和放置每個網格的jQuery外掛。甚至可以動態的新增和刪除網格,拖動放置一個網格元素會導致其他網格自動排列。對於控制面板類的頁面,一定是一個很好地可以提高使用者體驗的功能。

Gridster.js

26. Freetile

Freetile (github) 可以幫你實現一個高效動態響應式佈局。它可以應用到一個容器元素,然後動態的分配容器中的子元素以達到最好的顯示效果。

Freetile

27. Stalactite

Stalactite (github) 是一個實現隨著頁面滾動延遲載入網格中內容的jQuery外掛,載入時帶有很不錯的動畫效果。

Stalactite

自定義滾動條類的jQuery外掛

有些時候我們會想要自定義瀏覽器滾動條的顯示樣式,有的瀏覽器支援同時也有些不支援,本小節的外掛將讓自定義滾動條樣式在不同瀏覽器中變得可能。

28. nanoScroller.js

nanoScroller.js (github)外掛提供一種非常簡單的方式去實現在網頁中顯示類似Mac作業系統中的滾動條效果。該外掛很好地相容Iphone和一些安卓的移動裝置。

nanoScroller.js

29. jQuery Custom Content Scroller

jQuery Custom Content Scroller (github) 外掛是一款很強大的自定義滾動條外掛,支援自定義滾動條css樣式。同時支援定製垂直和水平滾動條,定義滾動按鈕,內嵌滾動條等效果。點選這裡檢視演示。

jQuery Custom Content Scroller

背景類jQuery外掛

網頁具有使用全屏背景是另一個流行的網站設計趨勢。這裡列出的外掛可以幫你實現用一個單一的圖片或者一個畫廊甚至視訊作為網頁的背景。

30. Tubular.js

Tubular.js是一個可以使YouTube視訊作為網頁背景的外掛。同時還提供了播放和暫停按鈕等功能控制視訊背景。

Tubular.js

31. Backstretch

Backstretch (github) 是一個支援隨著視窗的改變動態改變背景圖片大小的jQuery外掛。

Backstretch

32. Supersized

Supersized (github)是一個可以讓用自己更換網頁背景圖片的jQuery外掛。頁面上可以以幻燈片的方式提供一組背景圖片供使用者選擇切換背景圖片,這種方式特別適合在相簿和展示類的網站使用。檢視演示

Supersized

畫廊和影象效果類外掛

本節下面的外掛主要用與增強圖片顯示和為圖片一些顯示效果。

33. jQuery TouchTouch

jQuery TouchTouch (demo)一個簡單外掛目的在能夠在移動裝置上使用和工作。

jQuery TouchTouch

34. iPicture

iPicture是互動式的圖片顯示外掛,你可以在圖片中新增文字,影象等一些提示顯示。用在產品資訊展示類的頁面中應該是個不錯的選擇。

iPicture

35. Adipoli jQuery Image Hover Plugin

Adipoli (demo)外掛可以幫你實現滑鼠懸停圖片上顯示各種效果。

Adipoli jQuery Image Hover Plugin

36. Swipebox

Swipebox (github)可以幫你實現lightbox顯示預覽圖片的原始大圖尺寸的圖片。支援移動裝置上使用。

Swipebox

37. TiltShift.js

TiltShift.js (github)外掛可以幫你實現了預設顯示模糊的影象滑鼠hover之後漸變顯示清晰的影象。當前只支援Chrome 和 Safari 6兩個瀏覽器。

TiltShift.js

38. Threesixty.js

Threesixty.js (github) 提供了一種可以360°檢視圖片方式,但是你必須提供不同角度的圖片。

Threesixty.js

39. Swipe.js

Swipe.js (github) 是另一個響應式的滑動幻燈片顯示圖片的外掛。同時它支援移動裝置,可以使用手勢滑動顯示圖片,並且支援ie7.

Swipe.js

40. CamanJS

CamanJS (github) 是一個功能強大的影象處理庫,建立canvas元素之上。有了它,你可以操縱影象的畫素,並實現幾乎與Photoshop類似的控制。

CamanJS

41. SpectragramJS

Spectragram (github)目的在於能夠更加容易的與Instagram API工作。它能獲得使用者的feeds,流行的圖片,帶特殊標籤的圖片等更多功能。

SpectragramJS

雜項

下面的一些外掛不屬於其他類,但是也是非常有價值的外掛。

42. jQuery Countdown

jQuery Countdown (demo)是一個非常簡單的倒計時類的外掛,會移動化效果顯示距離規定的事件的倒計時事件,挺不錯的動畫效果。

jQuery Countdown

43. List.js

List.js (github) 是一個很強大的對html列表加強的外掛,提供了很強大的列表處理功能,你可以對列表中的內容進行搜尋,排序和過濾等功能,設定可以動態的新增或刪除列表中的內容。並且此外掛是獨立的,不依賴於第三方jQuery外掛。

List.js

44. jQuery PointPoint

jQuery PointPoint (demo)是一個很有意思的外掛,它可以幫你吸引使用者的注意力到頁面中特定的部分,這個外掛的效果是在滑鼠附近加上一個指示器,並且這個指示器始終指向你需要使用者注意的那個元素,是不是很有意思。

jQuery PointPoint

45. Social Feed

Social Feed (github) 這個外掛的目的使你能夠在你的社交賬號展示公共的一些內容,這些內容使用一個模板設計,很好的是外掛提供了定製化自己的模板。

Social Feed

46. Hook.js

Hook.js (github)外掛能夠幫你在桌面網頁中實現在移動裝置上非常常見的“下拉重新整理”操作。

Hook.js

47. jQuery PercentageLoader

PercentageLoader (bitbucket)外掛改進了傳統的和水平進度條提供了一個漂亮的進度條效果。該外掛使用html5 canvas元素。Loader.js

48. Chart.js

Chart.js (github)外掛是一個新的使用HTML5 canvas實現的報表顯示類外掛,同時他們還接收一些ie7/8反饋。它支援動畫顯示6種報表型別。Chart.js非常小還不到5kb,讓我們對flash說byebye吧。

Chart.js

49. Tooltipster

Tooltipster (github)是一個強大的顯示提示資訊的外掛。當你hover到元素上它提供了各種方式的顯示提示資訊效果。檢視演示

Tooltipster

50. Toolbar.js

Toolbar.js (github) 外掛提供了一種顯示整潔的彈出選單的方式。同時支援在在彈出選單中繫結相應的事件。非常適合使用在空間不是很大的移動裝置網頁上,當然如果你用在桌面網頁也是不錯的。

Toolbar.js