工具列與 ListView清單

• 5-1 巡覽工具列• 5-2 標準工具列• 5-3 基本ListView清單• 5-4 進階ListView清單

5

5-1 巡覽工具列

• 5-1-1 巡覽的基礎 • 5-1-2 建立巡覽工具列 • 5-1-3 在巡覽工具列按鈕加上圖示

5-1 巡覽工具列• jQuery Mobile 提供三種工具列，可以在頁面建立

最上和頁尾標題和註腳工具列，再加上巡覽工具列，其說明如下所示：– 巡覽工具列（ Navigation Bar ）：巡覽工具列可以提

供整個 Mobile 網站的主巡覽功能，在 iOS 或 Nokia 也稱為標籤列（ Tab bar ）。

– 標題工具列（ Header Bar ）：標題工具列是頁面標題，通常是每一個頁面的第 1 個元素，除了擁有標題文字外，還可以加上 2 個按鈕。

– 註腳工具列（ Footer Bar ）：註腳工具列通常是頁面的最後 1 個元素，可以提供頁面功能按鈕和版權文字等內容。

5-1-1 巡覽的基礎

• 網站巡覽（ Site Navigation ）是在建立網站瀏覽結構和其使用介面，以便使用者能夠快速在網站中找到所需的網頁內容。常用的使用介面有超連結、選單、工具列或樹狀結構，如下圖所示：

5-1-2 建立巡覽工具列 - 說明

• jQuery Mobile 提供至多 5 個按鈕的巡覽工具列，如果超過 5 個就會成為多列，每一列 2 個按鈕，其主要功能是提供整個網頁應用程式的主巡覽功能，在 iOS 或 Nokia 也稱為標籤列（ Tab bar ）。

5-1-2 建立巡覽工具列 - 範例• jQuery Mobile 只需在 div 元素指定 data-role="navbar" 屬

性，就可以將其中的 ul 和 li 元素轉變成巡覽工具列，如下所示：<div data-role="navbar">

<ul>

<li><a href="#"> 按鈕一 </a></li>

<li><a href="#"> 按鈕二 </a></li>

<li><a href="#"> 按鈕三 </a></li>

</ul>

</div>

5-1-2 建立巡覽工具列 -在標題區塊的巡覽工具列

• 在標題區塊的巡覽工具列是位在 <div data-role="header"> 標籤之中，其按鈕預設套用標題工具列的樣式，一樣可以擁有頁面的標題文字，其顯示效果類似標籤頁。

5-1-2 建立巡覽工具列 -在註腳區塊的巡覽工具列

• 在註腳區塊的巡覽工具列是位在 <div data-role="footer"> 標籤之中，其按鈕是套用註腳工具列的樣式，一般來說，我們會建立成固定工具列，其進一步說明請參閱第 5-2節。

5-1-2 建立巡覽工具列 - 預選按鈕

• 巡覽工具列可以使用 class="ui-btn-active" 屬性指定預選按鈕，如下所示：<li><a href="#" class="ui-btn-active"> 按鈕一 </

a></li>

• 上述【按鈕一】是預選按鈕，換句話說，活用預選按鈕，就可以將標題區塊的巡覽工具列建立成類似標籤頁。

5-1-3 在巡覽工具列按鈕加上圖示• 在 jQuery Mobile 巡覽工具列的按鈕可以加上預設圖示，

不過，不同於第 4-4 節的按鈕，圖示並不能指定顯示位置，因為它一定是位在標題文字的上方，如下所示：<div data-role="navbar"> <ul> <li><a href="#" data-icon="home" class="ui-btn-active"> 報名研討會 </a></li> <li><a href="#" data-icon="search"> 講師陣容 </a></li

> <li><a href="#" data-icon="info"> 課程內容 </a></li> </ul></div>

5-2 標準工具列

• 5-2-1 標題工具列 • 5-2-2 註腳工具列 • 5-2-3 標準固定模式 • 5-2-4 全螢幕固定模式• 5-2-5 固定不變的註腳工具列

5-2-1 標題工具列 - 標題結構

• 標題工具列是位在頁面的最上方，通常包含標題文字或左、右 2 個按鈕，可以用來作為巡覽用途。

• 標題工具列的標題文字正常是使用 <h1> 標籤，不過，我們可以視情況使用 <h1>~<h6> 標籤來表達所需語意。為了維持一致外觀， jQuery Mobile框架都是使用相同樣式來顯示，如下所示：<div data-role="header">

<h1> 頁面標題 </h1>

</div>

5-2-1 標題工具列 -在標題工具列加入按鈕 1

• 在標題工具列的標題文字兩邊可以加上 2 個按鈕，在第 4-2-2 節是在標題工具列的左邊加上巡覽用途的返回按鈕。

• jQuery Mobile 在標題工具列加入按鈕是使用超連結 <a> ，或表單的按鈕標籤，如果只有 1 個預設是位在左邊，如下所示：<div data-role="header"> <a href="#"> 登入 </a> <h1>Mobile 研討會 </h1></div>

5-2-1 標題工具列 -在標題工具列加入按鈕 2

• 在標題工具列右邊加入按鈕，只需再新增一個超連結 <a> ，或表單的按鈕標籤，如下所示：<div data-role="header">

<a href="#" data-theme="b"> 登入 </a>

<h1>Mobile 研討會 </h1>

<a href="#" data-icon="gear"> 設定 </a>

</div>

5-2-1 標題工具列 -在標題工具列加入商標圖片

• 在標題工具列的標題文字可以改為商標圖片，換句話說，就是在標題工具列顯示圖片，如下所示：<div data-role="header">

<a href="#" data-icon="star"> 登入 </a>

<h1><img src="logo.jpg"></h1>

<a href="#" data-icon="gear"> 設定 </a>

</div>

5-2-2 註腳工具列 - 註腳結構

• 註腳工具列的結構和標題工具列相同，只是 data-role 屬性值為 footer ，如下所示：<div data-role="footer">

<h4> 註腳內容 </h4>

</div>

• 註腳工具列預設使用佈景的色彩搭配 a ，當然我們也可以自行使用 data-theme 屬性來更改。

5-2-2 註腳工具列 -在註腳工具列加入按鈕

• 在註腳工具列加入任何 <a> 超連結都會自動轉換成按鈕，為了節省空間，其排列方式是同行按鈕。註腳工具列預設對於加入的巡覽工具列或元件沒有任何填充距離，如果需要我們可以使用 class="ui-bar" 屬性在註腳工具列加上填充，如下所示：<div data-role="footer" class="ui-bar">

<a href="#" data-icon="delete"> 刪除 </a>

<a href="#" data-icon="plus"> 新增 </a>

<a href="#" data-icon="gear"> 設定 </a>

</div>

5-2-3 標準固定模式 - 種類

• jQuery Mobile 工具列的定位方式主要有三種，如下所示：– 同行模式（ Inline Mode ）：工具列的預設模式，它如

同是頁面的第 1 行和最後 1 行，之前的工具列都是這種模式。

– 標準固定模式（ Standard Fixed Mode ）：不論頁面尺寸，標題工具列是位在螢幕的最上方；註腳工具列是位在最下方。

– 全螢幕固定模式（ Full-screen Fixed Mode ）：類似標準固定模式，當點選或觸摸螢幕時，工具列就會自動隱藏。

5-2-3 標準固定模式 - 標準固定模式 ( 說明 )

• 標準固定模式的工具列是固定顯示在螢幕可見區域的最上方和最下方，可以讓文件內容在之間自由的捲動，當捲動螢幕時，工具列會自動隱藏，結束捲動再顯示。

• 使用標準固定模式，只需加上 data-position=“fixed” 屬性至標題和註腳區塊的 <div> 標籤。

5-2-3 標準固定模式 - 標準固定模式 ( 範例 )

<div data-role="header" data-position="fixed"> <h1>Mobile 研討會 </h1></div><div data-role="content"> ......</div><div data-role="footer" data-position="fixed"> <h1>舉辦者 : 陳會安 </h1></div>

5-2-4 全螢幕固定模式 - 說明• 全螢幕固定模式類似標準固定模

式，當工具列是可見時，一定是固定顯示在螢幕可見區域的最上和最下方，而且是半透明的可以看到後面的文字內容。當點選或觸摸螢幕時，工具列就會自動隱藏，此種工具列特別適用在檢視圖片時，可以讓我們使用全螢幕來顯示圖片。

• 在 jQuery Mobile 使用全螢幕固定模式，只需在頁面的 <div> 標籤加上 data-fullscreen 屬性值 true 。

5-2-4 全螢幕固定模式 - 範例<div data-role="page" id="home" data-fullscreen="true"> <div data-role="header" data-position="fixed"> <h1>Mobile 研討會 </h1> </div> <div data-role="content"> ...... </div> <div data-role="footer" data-position="fixed"> <h1>舉辦者 : 陳會安 </h1> </div></div>

5-2-5 固定不變的註腳工具列 - 說明• 固定不變的註腳工具列通常

是在註腳工具列建立整個 Mobile 網頁應用程式的巡覽工具列，以便在切換頁面時，仍然可以固定顯示在最下方，而不會改變。

• 在 jQuery Mobile 建立固定不變的註腳工具列，請在每一頁面註腳區塊的 <div> 標籤加上相同的 data-id 屬性值，和 data-position="fixed" 屬性。

5-2-5 固定不變的註腳工具列 - 範例<div data-role="footer" data-id="main" data-position="fixe

d">

<div data-role="navbar">

<ul>

<li><a href="#home"

class="ui-btn-active ui-state-persist">首頁 </a></li>

<li><a href="#register"> 報名研討會 </a></li>

<li><a href="#speakers"> 講師陣容 </a></li>

</ul>

</div> </div>

5-3 基本 ListView 清單

• 5-3-1 建立 ListView 元件 • 5-3-2 在 ListView 新增標題列 • 5-3-3 巢狀 ListView

• 5-3-4 互動列的圖示

5-3-1 建立 ListView 元件 -靜態清單• jQuery Mobile 建立 ListView 是將 HTML 標籤的項目編號（ ol 和 li 元素）或項目符號（ ul 和 li 元素）轉換成 ListView 元件，即加上 data-role="listview" 屬性，例如：單純顯示項目資料的 ListView元件，這是一種靜態清單，如下所示：<ul data-role="listview"> <li>HTML5</li> <li>CSS3</li> <li>JavaScript</li></ul>

5-3-1 建立 ListView 元件 -互動列清單• 互動列清單的項目是可點選的項目，我們可以用來執行功

能，或進行巡覽， jQuery Mobile 框架會自動將項目的超連結 a 元素轉換成互動列（ Interactive Rows ）， data-inset=“true” 屬性讓清單不會佔用整個頁面，而是置中顯示且將四角改為圓角外框，如下所示：

<ul data-role="listview" data-inset="true">

<li><a href=http://jquery.com/download/ >jQuery</a></li>

<li><a href="http://jquerymobile.com/download/">

jQuery Mobile</a></li>

</ul>

5-3-2 在 ListView 新增標題列 - 說明

• 在 ListView 的 li 元素可以使用 data-role=“list-divider” 屬性，表示它是一個分隔項目，我們只需活用分隔項目，就可以建立清單的標題列項目，如右圖所示：

5-3-2 在 ListView 新增標題列 - 範例

<ul data-role="listview" data-inset="true"

data-theme="c" data-dividertheme="b">

<li data-role="list-divider"> 主選單 </li>

<li><a href="register.html"> 報名研討會 </a></li>

<li><a href="speakers.html"> 講師陣容 </a></li>

<li><a href="schedule.html"> 課程內容 </a></li>

<li><a href="information.html">聯絡資訊 </a></li>

</ul>

5-3-3 巢狀 ListView- 說明• jQuery Mobile 提供巢狀

清單（ Nested Lists ）使用介面來建立階層架構的巡覽，例如：手機智慧型手機 HTC手機。 jQuery Mobile 的巢狀清單就是 ListView 元件，其項目是另一個 ListView元件， jQuery Mobile 框架自動會建立新頁面來顯示下一層的巢狀 ListView 。

5-3-3 巢狀 ListView- 範例<ul data-role="listview"> <li>客戶端網頁技術 <ol data-role="listview"> <li>HTML5</li> <li>CSS3</li> <li>JavaScript</li> </ol> </li> <li>伺服端網頁技術 </li> ....</ul>

5-3-4 互動列的圖示 - 標籤• 對於互動列的圖示，我們可以在 <li> 標籤使用 data-icon

屬性來更改顯示的圖示，如下所示：<ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="b"> <li data-role="list-divider"> 主選單 </li> <li><a href="register.html"> 報名研討會 </a></li> <li data-icon="false"><a href="speakers.html"> 講師陣容

</a></li> <li data-icon="star"><a href="schedule.html"> 課程內容 </

a></li> <li data-icon="info"><a href="information.html">聯絡資訊

</a></li></ul>

5-3-4 互動列的圖示 - 圖例

5-4 進階 ListView 清單

• 5-4-1 分割列清單 • 5-4-2 項目的文字內容• 5-4-3 在清單項目顯示圖片 • 5-4-4 氣泡計數清單 • 5-4-5 篩選 ListView 清單的項目

5-4-1 分割列清單• 如果清單的同一個項目擁有兩種動作， jQuery Mobile 提

供分割列清單（ Split Row Lists ），可以在項目新增第 2個超連結動作，如下所示：

<ol data-role="listview" data-inset="true" data-split-icon="arrow-d"> <li> <a href="http://docs.jquery.com/Main_Page">jQuery</a> <a href="http://jquery.com/download/"></a> </li> <li> <a href="http://jquerymobile.com/demos/1.1.1/">jQuery Mobile</a> <a href="http://jquerymobile.com/download/"></a> </li></ol>

5-4-2 項目的文字內容 -調整項目的重要性

• 在 ListView 清單的項目如果有些比較重要需要強調，我們可以使用 <h2> 或 <h3> 等標題文字標籤增加項目高度來強調這些項目；使用 <p> 標籤減少項目高度，表示是比較不重要的項目，如下所示：

<ul data-role="listview" data-inset="true"> <li><h3>HTML5</h3></li> <li><p>CSS3</p></li> <li><h2>JavaScript</h2></li></ul>

5-4-2 項目的文字內容 -輔助說明文字• ListView 清單的項目可以在右邊加上輔助說明文字，同樣

的，只需在任何 HTML 元素加上 class="ui-li-aside" 屬性，即可建立輔助說明文字，如下所示：

<ul data-role="listview" data-inset="true"> <li data-role="list-divider">早餐店 </li> <li><h3>漢堡 </h3> <span class="ui-li-aside">$75</span> <li><h3>奶茶 </h3> <div class="ui-li-aside">$25</div> </li> <li><h3>蛋餅 </h3> <p class="ui-li-aside">$30</p> </li></ul>

5-4-2 項目的文字內容 - 標題與描述• ListView 清單的項目除了標題文字外，我們還可

以在下方新增一列簡單的描述文字，標題文字使用 <h3> 等 HTML 標題標籤；描述文字是 <p> 標籤，如下所示：

<ul data-role="listview" data-inset="true"> <li> <a href="#"><h3>jQuery</h3> <p> 一種 JavaScript函數庫 </p></a> </li> <li> <h3>jQuery Mobile</h3> <p> 基於 jQuery 建立的手機平台框架 </p> </li></ul>

5-4-3 在清單項目顯示圖片 - 圖示列• 圖示列（ Row Icons ）是在 ListView 清單的項目

左邊顯示一張 16 X 16 尺寸的圖示，就是在 <li>標籤中加上 <img> 標籤的圖片，如下所示：

<ul data-role="listview"> <li> <img src="icon.jpg" class="ui-li-icon"> <h3>jQuery函數庫 </h3> <p>9:00 AM - 9:30 AM( 講師 B)</p> <p>jQuery函數庫的實戰技巧 .</p> </li> ....</ul>

5-4-3 在清單項目顯示圖片 -縮圖列• 縮圖列（ Thumbnails ）是在 ListView 清單的項目左邊顯

示一張 80 X 80 尺寸的縮圖，這是在 <li> 標籤中加上 <img> 標籤的圖片，但沒有指定 class 屬性，如下所示：

<ul data-role="listview"> <li> <img src="speakerA.jpg"> <h3> 講師 A</h3> <p> 講師 A 的經歷與專長 </p> </li> ...</ul>

5-4-4 氣泡計數清單 - 說明• jQuery Mobile 的氣泡計數（ Co

unt Bubbles ）是使用一個小圓圈包圍著一個數字，其位置是在項目右邊，可以用來顯示有多少互動列項目、未讀取項目、未完成工作或任何可以使用計數方式表示的資訊。

• 在 ListView 元件的 <li> 標籤中可以使用任何 HTML 元素，只需加上 class=“ui-li-count” 屬性，就可以建立氣泡計數，例如： <div> 或 <span> 標籤，在 <ul>或 <ol> 標籤可以使用 data-count-theme 屬性指定套用的佈景。

5-4-4 氣泡計數清單 - 範例

<ul data-role="listview" data-inset="true">

<li data-role="list-divider">電子郵件信箱 </li>

<li>

<a href="#">收件匣 </a>

<span class="ui-li-count">24</span>

</li>

...

</ul>

5-4-5 篩選 ListView 清單的項目

• 如果 ListView 清單的項目很多，我們可以在 ListView 清單上方加上搜尋篩選列（ Search Filter Bar ），只需在欄位輸入關鍵字，就可以篩選項目，顯示符合條件的項目清單，如下所示：

<ul data-role="listview" data-inset="true"

data-filter="true"

data-filter-placeholder="搜尋郵件 ">

…

</ul>