jQuery Mobile 頁面

開始學習 jQuery Mobile

儘管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 元素 - 段落, 圖片, 標題, 列表等。
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=https://www.itread01.com/jquerymobile/"#pagetwo">跳轉到第二個頁面</a>
  </div>
</div>

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

嘗試一下 ?

注意： 當web應用有大量的內容（文字，圖片，指令碼等）將會嚴重影響載入時間。如果你不想使用內頁連結可以使用外部檔案：

<a href="https://www.itread01.com/jquerymobile/externalfile.html">訪問外部檔案</a>

頁面作為對話方塊使用

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

在連結中新增data-rel="dialog"讓使用者點選連結時彈出對話方塊:

例項

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

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

嘗試一下 ?