VeryOK建站教程

jQuery Mobile 頁面

使用 jQuery Mobile 入門

提示:盡管 jQuery Mobile 適用于所有移動設備,它在臺式計算機上仍然可能存在兼容性問題(由于有限的 CSS3 支持)。

因此在本教程中,我們推薦您使用谷歌的 Chrome 瀏覽器,以獲得最好的閱讀體驗。

實例

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

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

  <div data-role="content">
    <p>我是一名移動開發者!</p>
  </div>

  <div data-role="footer">
    <h1>頁腳文本</h1>
  </div>

</div>
</body>

親自試一試

例子解釋:

  • data-role="page" 是顯示在瀏覽器中的頁面
  • data-role="header" 創建頁面上方的工具欄(常用于標題和搜索按鈕)
  • data-role="content" 定義頁面的內容,比如文本、圖像、表單和按鈕,等等
  • data-role="footer" 創建頁面底部的工具欄

在這些容器中,您可以添加任意 HTML 元素 - 段落、圖像、標題、列表等等。

提示:HTML5 data-* 屬性用于通過 jQuery Mobile 為移動設備創建“對觸控友好的”交互外觀。

在 jQuery Mobile 中添加頁面

在 jQuery Mobile,您可以在單一 HTML 文件中創建多個頁面。

請通過唯一的 id 來分隔每張頁面,并使用 href 屬性來連接彼此:

實例

<div data-role="page" id="pageone">
  <div data-role="content">
    <a href="#pagetwo">轉到頁面二</a>
  </div>
</div>

<div data-role="page" id="pagetwo">
  <div data-role="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="content">
    <a href="#pagetwo" data-rel="dialog">轉到頁面二</a>
  </div>
</div>

<div data-role="page" id="pagetwo">
  <div data-role="content">
    <a href="#pageone">轉到頁面一</a>
  </div>
</div>

親自試一試

江西时时彩交易时间