移動開發必備！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、WP8、Windows 8、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等桌面瀏覽器，但某些功能項無法實現。

　　文章來源：CodeGeekz