15 個響應式的 jQuery UI 組件的代碼片段和模塊
隨著響應式網頁設計逐漸進化成每個網站必備的一部分，越來越多的用戶界面問題在設計面向手機、平板的網站時涌現。
在下面的展示中，我們展現了15款新生的響應式JQuery代碼片段，它們能增強用戶在手機、平板或是普通的瀏覽器上的用戶體驗，
用戶界面類
MultiScroll
Multiscroll 是一款強勁的JQuery插件，它能允許你創建分離的、有兩個豎直滾動條的頁面。它的強勁功效不僅體現在所有現代瀏覽器上(甚至IE8它也支持)，還適用于移動設備和平板。這款插件能讓你即使是在響應式網站上也能利用這個華麗的效果。
如何使用:
實現這個效果很簡單。所有你需要做的就是在標簽內引入腳本文件，然后把剩下的代碼放在標簽內。
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在中導入然后調用腳本就行了。
Media
ToneDen Player
ToneDen是一款純js定制的音頻播放器。它有一個完全可定制的界面，給你一連串的配置項來提升你的聽覺體驗。簡易簡潔的界面是賞心悅目的，并且也不會在頁面上帶來任何的混亂。
如何使用：
由于展示和播放音樂的方式有許多不同，所以定制播放器的方法也有很多。當談到播放器的配置項時候，開發者做了一個很棒的工作，使得可以容易的使用它，它確實是相當高級先進。使用腳本來滿足基本的需求，或對照文檔來使用更多高級的配置。
Pizza Pie Charts
這款代碼片段允許你在任何設備上呈現出一個pizza樣式的圖表。它是一款使用簡便的插件，既能和Zurb的響應式框架契合，也能作為單獨的腳本而 工作。關于這個插件沒有什么可以介紹的，因為它僅有的一個選項就是展示pie或者開發者所稱的pizza圖表。這款插件十分優秀、方便使用與自定義，以至 于在這篇文章中如果不把它包含進來就是個錯誤。
用法:
引用css和js文件，然后你就已經擁有了一個基本的pie圖表，但是別忘了HTML。
Navigation
Fly Side Menu
If you would like to create an Airbnb-inspired menu, then this script is exactly what you need. It’s totally free and is compatible with major browser as well as mobile devices.
How to use:
The script gives you a little bit of room for experimenting and customizing but keep in mind that basic options are somewhat limited but enough for simple usage.
Hashtabber
Hashtabber 是一款用于hashchange驅動的標簽式內容選擇器的JavaScript插件。考慮到它也適用于移動設備，你有多種方式來利用這款插件。它包括了一些預設定的主題以及一些自定義的方法。
用法:
在HTML中分別鏈接各個文件，然后建立一個HashTabber的section。
Headhesive.js
Headhesive.js creates an on-demand sticky header. Specify where you want your header to become fixed and the rest is magic. Use this simple, yet useful snippet to create animated and sticky navigation bars.
How to use:
Include the provided JavaScript file in your folder and call it in the footer.
Anchorific.js
Anchorific automatically generates anchored headings and nested navigation based on header tags. It’s easy to install and style structure allows you to use it with ease on any project. This kind of navigation would be appropriate on one-page documentation files, for example.
How to Use:
Create a list and style it. Give each