隨著響應式網頁設計逐漸進化成每個網站必備的一部分，越來越多的使用者介面問題在設計面向手機、平板的網站時湧現。
在下面的展示中，我們展現了15款新生的響應式JQuery程式碼片段，它們能增強使用者在手機、平板或是普通的瀏覽器上的使用者體驗。
使用者介面類
MultiScroll
Multiscroll 是一款強勁的JQuery外掛，它能允許你建立分離的、有兩個豎直滾動條的頁面。它的強勁功效不僅體現在所有現代瀏覽器上(甚至IE8它也支援)，還適用於移動裝置和平板。這款外掛能讓你即使是在響應式網站上也能利用這個華麗的效果。
如何使用:
實現這個效果很簡單。所有你需要做的就是在<head>標籤內引入指令碼檔案，然後把剩下的程式碼放在<body>標籤內。
TourTip
TourTip 是一種網頁元素的互動式視覺化指南。TourTip可以替代靜態幫助資訊介面或者是解釋文字，通過新增一個頁面指引，讓使用者更容易瞭解產品的新特性和新功能。TourTip對於那些有關新產品或者介紹服務，又或者是幫助指南的一些介紹性網站或者登入頁面都是非常有用的。其直觀的介面使其解釋任何事情都易如反掌。
用法：
TourTip可以根據使用者的需求來定製構建，允許你“玩耍"多個變數，你僅僅只需要根據你的目的或者需求來調整它即可。
jQuery Tilted Page Scroll
這個高階的jQuery程式碼片段允許你使用一個頁面滾動外掛來建立一個三維傾斜的滾動效果。這個效果看起來很簡單但是它對於你的部落格或者是攝影集或者是組合網站來說，是一個非常好的體驗。相容性測試在現在的瀏覽器都測試通過了，當然不包含IE。
jQuery Tip Cards
該程式碼片段幫助你建立一個供使用者翻閱的卡片佈局集合。這個想法是非常有趣，它已經被Google的“Tips”專案實現。這個程式碼片段有許多不用的用途，你可以用它展示你最新的部落格帖子，portfolio items，網頁遊戲等。
用法：
根據翻轉卡的性質，你可以使用棧的方式儲存內容，效果非常的棒！在head中連線指令碼，同事把回撥函式放到footer裡。
Slinky.js
Slinky.js 是一個用於建立優雅的帶堆疊頭的滾動導航列表的jQuery外掛。當你在瀏覽器上體驗它的時候，它會建立了一個類似移動裝置的環境。因為它是輕量級的（大約1KB），它能帶給你一個平滑的令人舒適的體驗，並且它能與你最喜愛的瀏覽器的最新版本相容。
用法：
在jQuery之後，使用script標籤引入下載的檔案，然後在你想啟用Slinky的jQuery元素上呼叫.slinky()方法。
GoalProgress
GoalProgress是一個允許你使用jQuery建立一個動畫進度條的外掛。填入必填項後，該外掛會自動計算你當前的進度，並且用動畫效果展示進度條。你可以在顯示的數字前後指定顯示文字。在各種事件或者活動的捐贈活動上，用該外掛來顯示捐贈情況是非常棒的。
用法:
你所需要做的就是引用該指令碼的樣式檔案，在頁面上建立一個空的html div元素然後初始化該指令碼即可。
表單與輸入類
Card
如果你在開發一個電子商務專案，這款輕量級卻優美的程式碼片段就是你所需要的。Card 僅僅用一行的程式碼，你就能展現出使用者需要輸入的信用卡資訊。建立支援4種卡的動畫效果，給使用者提供直觀的體驗，所有這一切都是免費與開源的。
如何使用:
在你的HTML中包含並引用需要的檔案。初始化指令碼然後在你的當前表單中建立或者替換輸入的值，從而讓它們具有響應式的樣式。
Unibox
Unibox是一款jQuery外掛，它支援通用的搜尋框用來提供基於查詢的搜尋提示。它提供豐富多樣的內容展現方式-從連結到圖片或者任何其他後設資料-這些在使用者提交標籤後都會被展示。
如何使用：
Unibox的安裝有一點點複雜但沒那麼困難。在需要配置的頁面引入指令碼和CSS檔案，並且安裝服務端/客戶端外掛。由於該外掛的執行方式是提供搜尋提示，所以你除了在客戶端安裝指令碼，在服務端也需要有對應的資料格式來支援。
Vanillabox
Vanillabox是一款簡單又現代的lightbox式樣的JQuery外掛，能被用於輕鬆的建立起一個影象畫廊。它有著簡單、最小化的設計，適用於所有現代瀏覽器。它是許多相似功能的外掛中安裝簡單、輕量級的一款，可被用於替換之前已用的外掛。
如何使用:
安裝非常簡單。僅僅把script和css在<head>中匯入然後呼叫指令碼就行了。
Media
ToneDen Player
ToneDen是一款純js定製的音訊播放器。它有一個完全可定製的介面，給你一連串的配置項來提升你的聽覺體驗。簡易簡潔的介面是賞心悅目的，並且也不會在頁面上帶來任何的混亂。
如何使用：
由於展示和播放音樂的方式有許多不同，所以定製播放器的方法也有很多。當談到播放器的配置項時候，開發者做了一個很棒的工作，使得可以容易的使用它，它確實是相當高階先進。使用指令碼來滿足基本的需求，或對照文件來使用更多高階的配置。
Pizza Pie Charts
這款程式碼片段允許你在任何裝置上呈現出一個pizza樣式的圖表。它是一款使用簡便的外掛，既能和Zurb的響應式框架契合，也能作為單獨的指令碼而工作。關於這個外掛沒有什麼可以介紹的，因為它僅有的一個選項就是展示pie或者開發者所稱的pizza圖表。這款外掛十分優秀、方便使用與自定義，以至於在這篇文章中如果不把它包含進來就是個錯誤。
用法:
引用css和js檔案，然後你就已經擁有了一個基本的pie圖表，但是別忘了HTML。
Hashtabber
Hashtabber 是一款用於hashchange驅動的標籤式內容選擇器的JavaScript外掛。考慮到它也適用於移動裝置，你有多種方式來利用這款外掛。它包括了一些預設定的主題以及一些自定義的方法。
用法:
在HTML中分別連結各個檔案，然後建立一個HashTabber的section。
來自：開源中國社群
相關閱讀
評論(2)