jQuery Mobile 頁面

開始學習 jQuery Mobile

lamp 儘管jQuery Mobile相容所有的移動設備，但是並不能完全相容PC機（由於有限的CSS3支持）。

為了更好的閱讀本教程，建議您使用 Google Chrome 流覽器。

實例

<body>
<div data-role="page">

  <div data-role="header">
    <h1>歡迎來到我的主頁</h1>
  </div>

  <div data-role="main" class="ui-content">
    <p>我現在是一個移動端開發者!!</p>
  </div>

  <div data-role="footer">
    <h1>底部文本</h1>
  </div>

</div>
</body>

實例解析：

  • data-role="page" 是在流覽器中顯示的頁面。
  • data-role="header" 是在頁面頂部創建的工具條 (通常用於標題或者搜索按鈕)
  • data-role="main" 定義了頁面的內容，比如文本， 圖片，表單，按鈕等。
  • "ui-content" 類用於在頁面添加內邊距和外邊距。
  • data-role="footer" 用於創建頁面底部工具條。
  • 在這些容器中你可以添加任何 HTML 元素 - 段落, 圖片, 標題, 列表等。
lamp jQuery Mobile 依賴 HTML5 data-* 屬性來支持各種 UI 元素、過渡和頁面結構。不支持它們的流覽器將以靜默方式棄用它們。

在頁面中添加 jQuery Mobile

使用 jQuery Mobile, 你可以在單個 HTML 檔中創建多個不同的頁面。

你可以使用不同的href屬性來區分使用同一個唯一id的頁面：

實例

<div data-role="page" id="pageone">
  <div data-role="main" class="ui-content">
    <a href="#pagetwo">跳轉到第二個頁面</a>
  </div>
</div>

<div data-role="page" id="pagetwo">
  <div data-role="main" class="ui-content">
    <a href="#pageone">跳轉到第一個頁面</a>
  </div>
</div>

注意： 當web應用有大量的內容（文本，圖片，腳本等）將會嚴重影響加載時間。如果你不想使用內頁鏈接可以使用外部檔：

<a href="externalfile.html">訪問外部檔</a>

頁面作為對話框使用

對話框是用於顯示頁面資訊顯示或者表單資訊的輸入。

在鏈接中添加data-rel="dialog"讓用戶點擊鏈接時彈出對話框:

實例

<div data-role="page" id="pageone">
  <div data-role="main" class="ui-content">
    <a href="#pagetwo">跳轉到第二個頁面</a>
  </div>
</div>

<div data-role="page" data-dialog="true" id="pagetwo">
  <div data-role="main" class="ui-content">
    <a href="#pageone">跳轉到第一個頁面</a>
  </div>
</div>