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