jQuery Mobile 頁面 · W3School jQuery Mobile 教程

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