15 個響應(yīng)式的 jQuery UI 組件的代碼片段和模塊
隨著響應(yīng)式網(wǎng)頁設(shè)計逐漸進(jìn)化成每個網(wǎng)站必備的一部分，越來越多的用戶界面問題在設(shè)計面向手機、平板的網(wǎng)站時涌現(xiàn)。
在下面的展示中，我們展現(xiàn)了15款新生的響應(yīng)式JQuery代碼片段，它們能增強用戶在手機、平板或是普通的瀏覽器上的用戶體驗，
用戶界面類
MultiScroll
Multiscroll 是一款強勁的JQuery插件，它能允許你創(chuàng)建分離的、有兩個豎直滾動條的頁面。它的強勁功效不僅體現(xiàn)在所有現(xiàn)代瀏覽器上(甚至IE8它也支持)，還適用于移動設(shè)備和平板。這款插件能讓你即使是在響應(yīng)式網(wǎng)站上也能利用這個華麗的效果。
如何使用:
實現(xiàn)這個效果很簡單。所有你需要做的就是在<head>標(biāo)簽內(nèi)引入腳本文件，然后把剩下的代碼放在<body>標(biāo)簽內(nèi)。
TourTip
TourTip 是一種網(wǎng)頁元素的交互式可視化指南。TourTip可以替代靜態(tài)幫助信息接口或者是解釋文本，通過添加一個頁面指引，讓用戶更容易了解產(chǎn)品的新特性和新功能。TourTip對于那些有關(guān)新產(chǎn)品或者介紹服務(wù)，又或者是幫助指南的一些介紹性網(wǎng)站或者登錄頁面都是非常有用的。其直觀的界面使其解釋任何事情都易如反掌。
用法：
TourTip可以根據(jù)用戶的需求來定制構(gòu)建，允許你“玩耍"多個變量，你僅僅只需要根據(jù)你的目的或者需求來調(diào)整它即可。
jQuery Tilted Page Scroll
這個高級的jQuery代碼片段允許你使用一個頁面滾動插件來創(chuàng)建一個三維傾斜的滾動效果。這個效果看起來很簡單但是它對于你的博客或者是攝影集或者是組合網(wǎng)站來說，是一個非常好的體驗。兼容性測試在現(xiàn)在的瀏覽器都測試通過了，當(dāng)然不包含IE。
jQuery Tip Cards
該代碼片段幫助你創(chuàng)建一個供用戶翻閱的卡片布局集合。這個想法是非常有趣，它已經(jīng)被Google的“Tips”項目實現(xiàn)。這個代碼片段有許多不用的用途，你可以用它展示你最新的博客帖子，portfolio items，網(wǎng)頁游戲等。
用法：
根據(jù)翻轉(zhuǎn)卡的性質(zhì)，你可以使用棧的方式存儲內(nèi)容，效果非常的棒！在head中連接腳本，同事把回調(diào)函數(shù)放到footer里。
Slinky.js
Slinky.js 是一個用于創(chuàng)建優(yōu)雅的帶堆疊頭的滾動導(dǎo)航列表的jQuery插件。當(dāng)你在瀏覽器上體驗它的時候，它會創(chuàng)建了一個類似移動設(shè)備的環(huán)境。因為它是輕量級的（大約1KB），它能帶給你一個平滑的令人舒適的體驗，并且它能與你最喜愛的瀏覽器的最新版本兼容。
用法：
在jQuery之后，使用script標(biāo)簽引入下載的文件，然后在你想激活Slinky的jQuery元素上調(diào)用.slinky()方法。
GoalProgress
GoalProgress是一個允許你使用jQuery創(chuàng)建一個動畫進(jìn)度條的插件。填入必填項后，該插件會自動計算你當(dāng)前的進(jìn)度，并且用動畫效果展示進(jìn)度條。你可以在顯示的數(shù)字前后指定顯示文字。在各種事件或者活動的捐贈活動上，用該插件來顯示捐贈情況是非常棒的。
用法:
你所需要做的就是引用該腳本的樣式文件，在頁面上創(chuàng)建一個空的html div元素然后初始化該腳本即可。
#p#
表單與輸入類
Card
如果你在開發(fā)一個電子商務(wù)項目，這款輕量級卻優(yōu)美的代碼片段就是你所需要的。Card 僅僅用一行的代碼，你就能展現(xiàn)出用戶需要輸入的信用卡信息。創(chuàng)建支持4種卡的動畫效果，給用戶提供直觀的體驗，所有這一切都是免費與開源的。
如何使用:
在你的HTML中包含并引用需要的文件。初始化腳本然后在你的當(dāng)前表單中創(chuàng)建或者替換輸入的值，從而讓它們具有響應(yīng)式的樣式。
Unibox
Unibox是一款jQuery插件，它支持通用的搜索框用來提供基于查詢的搜索提示。它提供豐富多樣的內(nèi)容展現(xiàn)方式-從鏈接到圖片或者任何其他元數(shù)據(jù)-這些在用戶提交標(biāo)簽后都會被展示。
如何使用：
Unibox的安裝有一點點復(fù)雜但沒那么困難。在需要配置的頁面引入腳本和CSS文件，并且安裝服務(wù)端/客戶端插件。由于該插件的運行方式是提供搜索提示，所以你除了在客戶端安裝腳本，在服務(wù)端也需要有對應(yīng)的數(shù)據(jù)格式來支持。
Vanillabox
Vanillabox是一款簡單又現(xiàn)代的lightbox式樣的JQuery插件，能被用于輕松的建立起一個圖像畫廊。它有著簡單、最小化的設(shè)計，適用于所有現(xiàn)代瀏覽器。它是許多相似功能的插件中安裝簡單、輕量級的一款，可被用于替換之前已用的插件。
如何使用:
安裝非常簡單。僅僅把script和css在<head>中導(dǎo)入然后調(diào)用腳本就行了。
Media
ToneDen Player
ToneDen是一款純js定制的音頻播放器。它有一個完全可定制的界面，給你一連串的配置項來提升你的聽覺體驗。簡易簡潔的界面是賞心悅目的，并且也不會在頁面上帶來任何的混亂。
如何使用：
由于展示和播放音樂的方式有許多不同，所以定制播放器的方法也有很多。當(dāng)談到播放器的配置項時候，開發(fā)者做了一個很棒的工作，使得可以容易的使用它，它確實是相當(dāng)高級先進(jìn)。使用腳本來滿足基本的需求，或?qū)φ瘴臋n來使用更多高級的配置。
Pizza Pie Charts
這款代碼片段允許你在任何設(shè)備上呈現(xiàn)出一個pizza樣式的圖表。它是一款使用簡便的插件，既能和Zurb的響應(yīng)式框架契合，也能作為單獨的腳本而工作。關(guān)于這個插件沒有什么可以介紹的，因為它僅有的一個選項就是展示pie或者開發(fā)者所稱的pizza圖表。這款插件十分優(yōu)秀、方便使用與自定義，以至于在這篇文章中如果不把它包含進(jìn)來就是個錯誤。
用法:
引用css和js文件，然后你就已經(jīng)擁有了一個基本的pie圖表，但是別忘了HTML。
Hashtabber
Hashtabber 是一款用于hashchange驅(qū)動的標(biāo)簽式內(nèi)容選擇器的JavaScript插件?？紤]到它也適用于移動設(shè)備，你有多種方式來利用這款插件。它包括了一些預(yù)設(shè)定的主題以及一些自定義的方法。
用法:
在HTML中分別鏈接各個文件，然后建立一個HashTabber的section。
