jQuery Mobile 頁面
開始學(xué)習(xí) jQuery Mobile
 | 盡管jQuery Mobile兼容所有的移動設(shè)備，但是并不能完全兼容PC機(jī)（由于有限的CSS3支持）。
為了更好的閱讀本教程，建議您使用 Google Chrome 瀏覽器。 |
實(shí)例
<body>
<div
data-role="page">
? <div
data-role="header">
??? <h1>歡迎來到我的主頁</h1>
? </div>
? <div
data-role="content">
??? <p>我現(xiàn)在是一個移動端開發(fā)者!!</p>
? </div>
? <div
data-role="footer">
??? <h1>底部文本</h1>
? </div>
</div>
</body>
實(shí)例解析：
- data-role="page" 是在瀏覽器中顯示的頁面。
- data-role="header" 是在頁面頂部創(chuàng)建的工具條 (通常用于標(biāo)題或者搜索按鈕)
- data-role="content" 定義了頁面的內(nèi)容，比如文本， 圖片，表單，按鈕等。
- data-role="footer" 用于創(chuàng)建頁面底部工具條。
- 在這些容器中你可以添加任何 HTML 元素 - 段落, 圖片, 標(biāo)題, 列表等。
| jQuery Mobile 依賴 HTML5 data-* 屬性來支持各種 UI 元素、過渡和頁面結(jié)構(gòu)。不支持它們的瀏覽器將以靜默方式棄用它們。 |
在頁面中添加 jQuery Mobile
使用 jQuery Mobile, 你可以再單個 HTML 文件中創(chuàng)建多個不同的頁面。
你可以使用不同的href屬性來區(qū)分使用同一個唯一id的頁面：
實(shí)例
<div data-role="page"
id="pageone">
? <div data-role="content">
??? <a
href="#pagetwo">Go to Page Two</a>
? </div>
</div>
<div data-role="page"
id="pagetwo">
? <div data-role="content">
??? <a
href="#pageone">Go to Page One</a>
? </div>
</div>
注意： 當(dāng)web應(yīng)用有大量的內(nèi)容（文本，圖片，腳本等）將會嚴(yán)重影響加載時間。如果你不想使用內(nèi)頁鏈接可以使用外部文件：
<a href="externalfile.html">訪問外部文件</a>
頁面作為對話框使用
對話框是用于顯示頁面信息顯示或者表單信息的輸入。
在鏈接中添加data-rel="dialog"讓用戶點(diǎn)擊鏈接時彈出對話框:
實(shí)例
<div data-role="page" id="pageone">
? <div data-role="content">
??? <a href="#pagetwo"
data-rel="dialog">Go to Page Two</a>
? </div>
</div>
<div data-role="page" id="pagetwo">
? <div data-role="content">
??? <a href="#pageone">Go to Page One</a>
? </div>
</div>
