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