移動開發必備！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插件，主要用於觸屏設備的旋轉滾動/日期和時間選擇。經過它，用戶只需滑動數字便可進行日期和時間選擇（點擊連接查看Demo）。

       Mobiscroll不只支持任意自定義值，讓用戶徹底自定義主題，還可用於下拉列表本地選擇控制。此外，使用起來也是很是方便，不只爲開發者提供了至關高大上的配色方案，並且可徹底經過CSS文件進行樣式修改。支持包括iOS、Android、WP八、Windows 八、BlackBerry等在內的全部主流移動及桌面瀏覽器。
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是一款輕量級的響應式Tab選項卡/手風琴導航jQuery插件，支持同一頁面使用多個範例，跨平臺支持Web、平板電腦及移動設備。該插件可以自適應屏幕大小，默認樣式爲水平/垂直Tab選項卡，隨着窗口變小，會自動切換爲手風琴樣式。

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

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

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

9. App Folder

     若是你是一名iOS狂熱分子，那麼對於iOS風格的文件夾必定很是熟悉。「點擊文件夾，經過加深透明度將周圍的元素虛化，而後顯示文件夾中的內容。」App Folders正是這樣一款可以實現iOS文件夾效果的jQuery插件。該插件可同時在桌面及移動瀏覽器上工做，適配性很是好。

       App Folders的文件夾元素可包含任何HTML元素，好比圖像、文本、視頻等，而且每一個文件夾都有專屬於本身的URL實現直接點擊。固然，開發者也無需拘泥於和iOS文件夾同樣的效果，經過App Folders，開發者能夠自定義出更富有創意的佈局和特效。
10. jQuery Flip
       jQuery Flip是一款可以讓任意HTML、文本或jQuery元素產生很是漂亮的相似於Flipboard的翻轉效果的jQuery插件，基於MIT許可發佈。使用CSS 3D轉換，翻轉速度也可進行設置，徹底支持Chrome、Safari等WebKit瀏覽器以及Firefox 11。

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

 

圖：Demo

      jQuery UI Map不只很是靈活，並且高度可定製。要在地圖上顯示計劃事件，jQuery UI Map會集成Google地圖，從而讓開發者垂手可得地建立交互式地圖。jQuery UI Map最大的特色就是，當客戶端不支持JavaScript時，開發者能夠在備用站點上使用微格式、RDFa或微數據等HTML數據格式實現同步。
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等桌面瀏覽器，但某些功能項沒法實現。