免費(fèi)AI編程助手
jQuery Mobile 頁面
2018-07-23 14:22 更新
jQuery Mobile 頁面
開始學(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>歡迎來到我的主頁</h1>
</div>
<div data-role="content">
<p>我現(xiàn)在是一個(gè)移動(dòng)端開發(fā)者!!</p>
</div>
<div data-role="footer">
<h1>底部文本</h1>
</div>
</div>
</body>
<div data-role="page">
<div data-role="header">
<h1>歡迎來到我的主頁</h1>
</div>
<div data-role="content">
<p>我現(xiàn)在是一個(gè)移動(dòng)端開發(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, 你可以在單個(gè) HTML 文件中創(chuàng)建多個(gè)不同的頁面。
你可以使用不同的href屬性來區(qū)分使用同一個(gè)唯一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>
<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)頁鏈接可以使用外部文件：
<a href="externalfile.html">訪問外部文件</a>
頁面作為對(duì)話框使用
對(duì)話框是用于顯示頁面信息顯示或者表單信息的輸入。
在鏈接中添加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ì)您有幫助：
更多建議：