?
Ce document utilise Manuel du site Web PHP chinois Libérer
盡管jQuery Mobile兼容所有的移動設(shè)備,但是并不能完全兼容PC機(jī)(由于有限的CSS3支持)。 為了更好的閱讀本教程,建議您使用 Google Chrome 瀏覽器。 |
效果預(yù)覽 ?<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>
實例解析:
jQuery Mobile 依賴 HTML5 data-* 屬性來支持各種 UI 元素、過渡和頁面結(jié)構(gòu)。不支持它們的瀏覽器將以靜默方式棄用它們。 |
使用 jQuery Mobile, 你可以再單個 HTML 文件中創(chuàng)建多個不同的頁面。
你可以使用不同的href屬性來區(qū)分使用同一個唯一id的頁面:
效果預(yù)覽 ?<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)擊鏈接時彈出對話框:
效果預(yù)覽 ?<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>