jQuery Mobile 的尋覽工具列

JQuery Mobile提供三種工具列：



可以在頁面建立最上標題、頁尾標題、註腳工具列中，加入巡覽工具列 !!

1. 巡覽工具列（Navigation Bar）：巡覽工具列可以提供整個Mobile網站的主巡覽功能，在iOS或Nokia也稱為標籤列（Tab bar）。
    
2. 標題工具列（Header Bar）：標題工具列是頁面標題，通常是每一個頁面的第1個元素，除了擁有標題文字外，還可以加上2個按鈕。
    
3. 註腳工具列（Footer Bar）：註腳工具列通常是頁面的最後1個元素，可以提供頁面功能按鈕和版權文字等內容。
    

一、建立巡覽工具列：
 

 Jquery Mobile提供最多5個按鈕的巡覽工具列，超過5個就會變成多列。

5個(含)產生的巡覽工具列

6個以上產生的巡覽工具列

範例一：在內容區塊中，加入巡覽工具列



說明：在<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>



結果：

範例三：把按鈕加入預設圖示

說明：

1. JQuery Mobile有提供系統預設圖形，不須額外加入圖片檔，即可有下圖所示的效果。
    
2. 只要在 <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）：是在建立網站瀏覽結構和其使用介面，以便使用者能夠快速在網站中找到所需的網頁內容。常用的使用介面有超連結、選單、工具列或樹狀結構，簡易架構如下圖所示：