jQuery Mobile 頁面
使用 jQuery Mobile 入門
提示:盡管 jQuery Mobile 適用于所有移動(dòng)設(shè)備,它在臺(tái)式計(jì)算機(jī)上仍然可能存在兼容性問題(由于有限的 CSS3 支持)。
因此在本教程中,我們推薦您使用谷歌的 Chrome 瀏覽器,以獲得最好的閱讀體驗(yàn)。
實(shí)例
<body> <divdata-role="page"
> <divdata-role="header"
> <h1>歡迎訪問我的主頁</h1> </div> <divdata-role="content"
> <p>我是一名移動(dòng)開發(fā)者!</p> </div> <divdata-role="footer"
> <h1>頁腳文本</h1> </div> </div> </body>
例子解釋:
- data-role="page" 是顯示在瀏覽器中的頁面
- data-role="header" 創(chuàng)建頁面上方的工具欄(常用于標(biāo)題和搜索按鈕)
- data-role="content" 定義頁面的內(nèi)容,比如文本、圖像、表單和按鈕,等等
- data-role="footer" 創(chuàng)建頁面底部的工具欄
在這些容器中,您可以添加任意 HTML 元素 - 段落、圖像、標(biāo)題、列表等等。
提示:HTML5 data-* 屬性用于通過 jQuery Mobile 為移動(dòng)設(shè)備創(chuàng)建“對(duì)觸控友好的”交互外觀。
在 jQuery Mobile 中添加頁面
在 jQuery Mobile,您可以在單一 HTML 文件中創(chuàng)建多個(gè)頁面。
請(qǐng)通過唯一的 id 來分隔每張頁面,并使用 href 屬性來連接彼此:
實(shí)例
<div data-role="page"id="pageone"
> <div data-role="content"> <a href="#pagetwo">轉(zhuǎn)到頁面二</a> </div> </div> <div data-role="page"id="pagetwo"
> <div data-role="content"> <a href="#pageone">轉(zhuǎn)到頁面一</a> </div> </div>
注釋:包含大量?jī)?nèi)容的 web 應(yīng)用程序會(huì)影響加載時(shí)間(比如文本、鏈接、圖像和腳本等等)。如果您不希望在內(nèi)部鏈接頁面,請(qǐng)使用外部文件:
<a href="externalfile.html">轉(zhuǎn)到外部頁面</a>
將頁面用作對(duì)話框
對(duì)話框是用來顯示信息或請(qǐng)求輸入的視窗類型。
如需在用戶點(diǎn)擊(輕觸)鏈接時(shí)創(chuàng)建一個(gè)對(duì)話框,請(qǐng)向該鏈接添加 data-rel="dialog":
實(shí)例
<div data-role="page" id="pageone">
<div data-role="content">
<a href="#pagetwo" data-rel="dialog"
>轉(zhuǎn)到頁面二</a>
</div>
</div>
<div data-role="page" id="pagetwo">
<div data-role="content">
<a href="#pageone">轉(zhuǎn)到頁面一</a>
</div>
</div>