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形式：主面板全屏，其他爲彈出窗口
• 容許網站有分屏顯示和正常顯示兩種模式

源碼 / 演示