jQuery Mobile的布局外掛程式和樣本

標籤：

【轉自網路】

現在已經進入了移動互連網時代，因此將你的網站遷移到行動裝置上就顯得比較重要的。問題是，如何在行動裝置的小螢幕中呈現你的網站中的所有內容呢？ 

本文介紹13款基於jQuery Mobile的布局外掛程式和樣本，可以協助你建立多視圖或者分割視圖布局的移動web頁面，並會根據行動裝置的方向和螢幕大小來動態調整所顯示的內容。 

1.  Three Column iPad Layout 

三列分割視圖布局效果，為手機和平板電腦上的移動網頁布局提供了一個良好的平台。 

源碼 / 示範 

2.  JQM Multiview Plugin 

JQM Multiview Plugin是一個基於jQuery mobile開發的多視圖頁面導航外掛程式，協助你建立各種類型的整頁模式，並且提供菜單。 

源碼 / 示範 

3.   jQuery Mobile SplitView 

SplitView會根據平板電腦的方向以及螢幕尺寸動態調整頁面。調整瀏覽器大小、旋轉平板電腦來體驗瀏覽效果！

源碼 / 示範 

4.  Multiview Plugin 

此頁面是一個多視圖頁面，包含4個面板和16個頁面，當載入頁面時，這些全部會被載入到DOM中。 

源碼+示範 

5.  Multi-page (boiler) Template 

這是一個多頁面的樣板頁面，你可以複製並建立自己的jQuery Mobile頁面。此樣板包含多個頁面容器。 

源碼+示範 

6.  Multi-Page Template 

這個外掛程式用來在載入子頁面時預讀取前面的多個頁面，實現更快的回應時間。 

源碼+示範 

7.  jQuery Mobile Multiple Pages 

在這個樣本中，介紹如何用多個頁面建立一個簡單的移動網站。多個頁面可以嵌入一個文檔或單獨的檔案中。 

源碼+示範 

8.  960 Grid on jQuery-Mobile 

960 Gird是一個用於移動Web開發的網格架構，綜合了960.gs的靈活性和jQuery Mobile的方便性。它的目的是讓jQuery Mobile布局更加的靈活。 

源碼 / 示範 

9.  Creating A Tablet Split View For jQuery Mobile 

在此樣本中，可以看到jQuery Mobile的文檔使用了CSS建立的分割視圖。 

源碼+示範 

10.  jQuery Mobile and Dynamic Page Generation 

該外掛程式可以在伺服器端產生HTML頁面/片段，也可以根據JSON或其他格式內容在用戶端中動態產生頁面內容。 

源碼 / 示範 

11.  Fixed toolbars 

使用“fixedtoolbar”外掛程式，工具列會固定顯示在頁面頂部或底部，頁面內容可以在中間自由的滾動。在不支援固定定位的瀏覽器中，當頁面滾動時，工具列會在頁面的頂部或底部隱藏或顯示。 

源碼+示範 

12.  App-UI 

App-UI是一個UI組件集合，可以協助Web或移動開發人員使用HTML和JavaScript來建立互動式應用程式，尤其是針對行動裝置建立應用程式。 

源碼 / 示範 

13.  jQuery-Mobile – Plugin: Multiview 

特點： 

• 分屏模式
• 全螢幕模式
• popover形式：主面板全屏，其餘為快顯視窗
• 允許網站有分屏顯示和正常顯示兩種模式

源碼 / 示範 

jQuery Mobile的布局外掛程式和樣本