創建專頁
儘管jQuery Mobile的適用於所有的移動設備，它可能（由於有限的CSS3支持）桌面計算機上的一些兼容性問題。
在本教程中，我們建議您使用谷歌Chrome瀏覽器更好的閱讀體驗。
下面，我們創建了一個簡單，標準的jQuery Mobile的頁面：
例
<body>
<div data-role="page" >
<div
data-role="header" >
<h1>Welcome To My Homepage</h1>
</div>
<div data-role="main" class="ui-content" >
<p>I Am Now A Mobile Developer!!</p>
</div>
<div data-role="footer" >
<h1>Footer
Text</h1>
</div>
</div>
</body> 試一試» 例子解釋：
- 該data-role="page"是在瀏覽器中顯示的網頁
- 該data-role="header"創建頁面頂部的工具欄（通常用於標題或搜索按鈕）
- 該data-role="main"定義了頁面的內容，如文本，圖像，按鈕，表格等
- 在"ui-content"類添加的頁面裡面的內容微胖和保證金
- 該data-role="footer"在頁面底部創建工具欄
- 這些容器裡面，你可以添加任何HTML元素 - 段落，圖片，標題，列表等。
在HTML5 data-*屬性在整個jQuery Mobile的用於創建一個"touch-friendly"為移動設備和有吸引力的外觀。
在jQuery Mobile的添加頁面
在jQuery Mobile的，你可以創建一個HTML文件中多個頁面。
分隔每個頁面有一個唯一的ID，使用href屬性，它們之間的鏈接：
例
<div data-role="page" id="pageone" >
<div data-role="main" class="ui-content">
<a href="#pagetwo" >Go to
Page Two</a>
</div>
</div>
<div data-role="page"
id="pagetwo" >
<div
data-role="main" class="ui-content">
<a href="#pageone" >Go to Page
One</a>
</div>
</div> 試一試» 提示：加載的時間會很多的內容Web應用程序的影響（如文字，鏈接，圖片，腳本等）。 使用外部文件，如果你不想在內部鏈接的網頁：
<a href="externalfile.html">Go To External Page</a>
使用網頁的對話框
對話框是用來顯示特殊的信息或請求輸入一個類型的窗口。
要創建一個當用戶點擊一個鏈接，打開一個對話框，添加data-dialog="true"您想顯示為一個對話框中的頁面：
例
<div data-role="page" id="pageone">
<div
data-role="main" class="ui-content">
<a href="#pagetwo">Go to Page Two</a>
</div>
</div>
<div data-role="page"
data-dialog="true" id="pagetwo">
<div
data-role="main" class="ui-content">
<a href="#pageone">Go to Page One</a>
</div>
</div> 試一試»