15款優秀的jQuery-Mobile插件

移動互聯網迅速發展，PC端的網頁並不能徹底適應移動端頁面需求，響應式設計體驗產生併成爲潮流。由此也促成了jQuery Mobile的流行。jQuery Mobile這樣一款基於jQuery和jQuery UI的框架，繼承了jQuery的「write less,do more」精髓，具備良好的擴展性和可定製性，全面兼容各類平臺設備，對於不支持的手機類型，也會降級到基礎樣式。

下面介紹15款很是優秀而又實用的jQuery Mobile插件，包括日期/時間選擇、即時聲音通知、抽屜式導航菜單、iOS style、手風琴導航、隱藏/顯示密碼、燈箱特效，到頗爲酷炫的交互式地圖、頁面震動、Native、相冊/畫廊展現等，相信總有一款你會喜歡。

1. Mobiscroll

對於許多開發者而言，Mobiscroll並不陌生，甚至能夠說是至關熟悉。Mobiscroll是一款很不錯的jQuery Mobile插件，主要用於觸屏設備的旋轉滾動/日期和時間選擇。經過它，用戶只需滑動數字便可進行日期和時間選擇。

Mobiscroll不只支持徹底自定義主題，還可用於下拉列表本地選擇控制。此外，用起來也是很是方便，它不只爲開發者提供了至關全面的配色方案，並且能夠經過CSS進行樣式修改。支持包括iOS、Android、WP八、Windows 八、BlackBerry等在內的全部主流移動及桌面瀏覽器。

Demo

2. Ion.Sound

不管是Web仍是移動網站，各類事件紛至沓來，例如新郵件、新聊天信息、內容更新等。經常存在這樣的問題，即時通知沒法當即引發用戶注意。而Ion.Sound插件，則能夠很好地實現這一任務。

Ion.Sound是一款用於播放事件聲音的jQuery插件，採用MIT許可證，包含有25種免費聲音。截至目前，Ion.Sound已成功運用於Google Chrome、Mozilla Firefox、Opera、Safari、IE(9.0+)等桌面瀏覽器，並支持全部主流移動瀏覽器。

3. jQuery.mmenu

jQuery.mmenu是一款用於建立平滑的抽屜式導航菜單的jQuery插件，只需短短一行JavaScript代碼，便可在移動網站中實現相似於移動App的很是酷炫的滑動菜單。

經過jQuery.mmenu，開發者能夠將無序列表轉換成菜單項，並自定義設置。jQuery.mmenu不只爲開發者提供了諸如打開、關閉、切換等經常使用菜單的定製，還提供了菜單位置（居左/居右）、是否顯示菜單項計數器等選項的設置。

4. Naver

Naver是一款專門用於建立響應式導航的jQuery插件。經過它，開發者能夠輕易地製做出對移動端很是友好的導航效果，還可製做動態導航。Naver兼容Firefox、Chrome、Safari、IE(7+)，基於MIT許可證發佈，不管是我的或商業項目中，都可自由無償使用。

5. iosOverlay.js

iosOverlay.js是一款用於建立iOS風格的提示/通知效果的jQuery插件，支持IE7+、Google Chrome、Firefox、Opera、Safari（桌面版及移動版）。 值得注意的是，若是想要防止圖標在加載時閃爍，開發者須要預加載圖像資源。

此外，iosOverlay.js還存在兩個可選的依賴，即Spin.js和jQuery。若是開發者想使用其下拉列表對象，就必需要用到Spin.js。對於不兼容CSS動畫的瀏覽器，則需jQuery提供支持。

6. Easy Responsive Tabs

Easy Responsive Tabs是一款輕量級的響應式選項卡/手風琴式導航jQuery插件，支持同一頁面使用多個範例，跨平臺支持Web、平板電腦及移動設備。該插件可以自適應屏幕大小，默認樣式爲水平/垂直Tab選項卡，隨着窗口變小，會自動切換爲手風琴樣式。

7. Hide/Show Password

Hide/show Password插件可讓你輕易隱藏和顯示密碼輸入框中的內容。該插件最酷的地方就是「innerToggle」選項。當設置爲開時，開發者能夠自定義建立很是漂亮的隱藏/顯示控件。並且在觸屏瀏覽器中進行滑動時還可保持輸入焦點。

8. Swipebox

Swipebox是一款精美的jQuery燈箱特效插件，可用於桌面、移動和平板設備。在移動設備上，支持滑動手勢導航，而在桌面上則可以使用鍵盤導航。不支持CSS3過渡特性的瀏覽器可以使用jQuery降級處理，支持視網膜顯示，可以經過CSS輕鬆定製。

當用戶點擊目標圖片時，照片將會以全尺寸的方式展現，此外，用戶還可對同組的圖片進行左右切換來進行查看，很是適合用於作照片畫廊以及查看大尺寸圖片。

9. App Folder

Folders是一款可以實現iOS文件夾效果的jQuery插件。該插件可同時在桌面及移動瀏覽器上工做。

App Folders的文件夾元素可包含任何HTML元素，好比圖像、文本、視頻等，而且每一個文件夾都有專屬於本身的URL，能夠直接點擊。此外，經過App Folders，開發者能夠自定義出更富有創意的佈局和特效。

10. jQuery Flip

jQuery Flip是一款可以讓任意HTML、文本或jQuery元素產生很是漂亮的相似於Flipboard的翻轉效果的jQuery插件，基於MIT許可發佈。使用CSS 3D轉換，能夠設置翻轉速度，支持Chrome、Safari、Firefox等瀏覽器。

11. jQuery UI Map

jQuery UI Map是地圖應用開發的必備利器。這是一款輕量級jQuery插件。不一樣於Google Map API，經過jQuery UI Map，開發者不只能在針對諸如點擊等簡單事件時使用Google事件監聽器，並且還可在地圖和標記上使用jQuery點擊事件。

jQuery UI Map很靈活，並且高度可定製。集成Google地圖，建立交互式地圖垂手可得。jQuery UI Map最大的特色就是，當客戶端不支持JavaScript時，開發者能夠在備用站點上使用微格式、RDFa或微數據等HTML數據格式實現同步。

Demo

12. gShake

gShake是一款實現震動效果的jQuery插件，只需短短几行代碼，便可讓導航、圖片，甚至是頁面自己抖動起來，從而讓頁面富有動感，支持iOS 4.2+。

13. jQTouch

相比本文所介紹的其餘jQuery插件，jQTouch顯然要更有知名度。經過jQTouch，開發者僅僅使用HTML、CSS以及jQuery便可建立出很是強大的移動App。甚至，只需使用核心CSS文件，便可構建一個徹底自定義的UI。

jQTouch能夠在移動設備的WebKit瀏覽器上實現諸如動畫、列表導航、默認樣式等常見UI效果，但要想實現更多原生效果，則需額外添加CSS文件。iOS開發者無需擔憂這點，由於jQTouch爲iOS開發提供了至關豐富的CSS文件。

14. PhotoSwipe

PhotoSwipe是一個開源且免費的專爲移動觸屏設備設計的相冊/畫廊展現包，兼容iOS、Android、Blackberry等主流平臺及桌面瀏覽器。其底層實現基於HTML、CSS及JavaScript，不依賴任何框架，很是適合想要讓移動站點的相冊體驗和原生App保持一致的開發者。

PhotoSwipe是一個獨立的JavaScript庫，很容易集成到移動網站中，並對移動瀏覽器進行了大量的優化。此外，PhotoSwipe還提供了對桌面瀏覽器及jQuery Mobile的支持。

15. Touch Gallery

和PhotoSwipe同樣，Touch Gallery也是一款圖片展現插件，開發者能夠利用它在移動瀏覽器上實現相似於原生相冊應用的圖像展現效果。支持手勢瀏覽操做，也可運用於桌面版Safari、Firefox、Opera及Chrome等桌面瀏覽器，但在桌面版上某些功能項沒法實現。

via CodeGeekz