JQuery Mobile提供三種工具列：
可以在頁面建立最上標題、頁尾標題、註腳工具列中，加入巡覽工具列 !!
- 巡覽工具列（Navigation Bar）：巡覽工具列可以提供整個Mobile網站的主巡覽功能，在iOS或Nokia也稱為標籤列（Tab bar）。
- 標題工具列（Header Bar）：標題工具列是頁面標題，通常是每一個頁面的第1個元素，除了擁有標題文字外，還可以加上2個按鈕。
- 註腳工具列（Footer Bar）：註腳工具列通常是頁面的最後1個元素，可以提供頁面功能按鈕和版權文字等內容。
一、建立巡覽工具列：
Jquery Mobile提供
最多5個按鈕的巡覽工具列，超過5個就會變成
多列。
5個(含)產生的巡覽工具列
範例一：在內容區塊中，加入巡覽工具列
說明：在<div data-role="content">中加入 以下藍色範圍的程式片段。
<下載範例>
<div data-role="content">
<h1> 我是內容1</h1>
<div data-role="navbar">
<ul>
<li><a href="#">巡覽1</a></li>
<li><a href="#">巡覽2</a></li>
<li><a href="#">巡覽3</a></li>
</ul>
</div>
<div data-role="navbar" >
<ul>
<li><a href="#">巡覽4</a></li>
<li><a href="#">巡覽5</a></li>
</ul>
</div>
</div>
結果：
範例二：讓巡覽工具，有預選按鈕!!
說明： 在超鏈結<a href="#"> 中，加入
class="ui-btn-active"
<下載範例>
<div data-role="content">
<h1> 我是內容1</h1>
<div data-role="navbar">
<ul>
<li><a href="#"
class="ui-btn-active">巡覽1</a></li>
<li><a href="#">巡覽2</a></li>
<li><a href="#">巡覽3</a></li>
</ul>
</div>
<div data-role="navbar" >
<ul>
<li><a href="#">巡覽4</a></li>
<li><a href="#">巡覽5</a></li>
</ul>
</div>
</div>
結果：
範例三：把按鈕加入預設圖示
說明：
- JQuery Mobile有提供系統預設圖形，不須額外加入圖片檔，即可有下圖所示的效果。
- 只要在 <a href="#" class="ui-btn-active" /> 加入 data-icon="home"屬性即可，data-icon可以使用的參數非常多，請參考 此鏈結。
<div data-role="navbar">
<ul>
<li><a href="#" class="ui-btn-active"
data-icon="home" />巡覽1</a></li>
<li><a href="#" data-icon="search">巡覽2</a></li>
<li><a href="#" data-icon="info">巡覽3</a></li>
</ul>
</div>
結果：
二、巡覽的設計：
- 網站巡覽（Site Navigation）：是在建立網站瀏覽結構和其使用介面，以便使用者能夠快速在網站中找到所需的網頁內容。常用的使用介面有超連結、選單、工具列或樹狀結構，簡易架構如下圖所示：
