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

Presentation on theme: "5 工具列與ListView清單 5-1 巡覽工具列 5-2 標準工具列 5-3 基本ListView清單 5-4 進階ListView清單."— Presentation transcript:

1

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

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

4 5-1 巡覽工具列 jQuery Mobile提供三種工具列，可以在頁面建立最上和頁尾標題和註腳工具列，再加上巡覽工具列，其說明如下所示：
巡覽工具列（Navigation Bar）：巡覽工具列可以提供整個Mobile網站的主巡覽功能，在iOS或Nokia也稱為標籤列（Tab bar）。 標題工具列（Header Bar）：標題工具列是頁面標題，通常是每一個頁面的第1個元素，除了擁有標題文字外，還可以加上2個按鈕。 註腳工具列（Footer Bar）：註腳工具列通常是頁面的最後1個元素，可以提供頁面功能按鈕和版權文字等內容。

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

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

7 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>

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

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

10 巡覽工具列可以使用class="ui-btn-active"屬性指定預選按鈕，如下所示：
5-1-2 建立巡覽工具列-預選按鈕 巡覽工具列可以使用class="ui-btn-active"屬性指定預選按鈕，如下所示： <li><a href="#" class="ui-btn-active">按鈕一</a></li> 上述【按鈕一】是預選按鈕，換句話說，活用預選按鈕，就可以將標題區塊的巡覽工具列建立成類似標籤頁。

11 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>

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

13 5-2-1 標題工具列-標題結構 標題工具列是位在頁面的最上方，通常包含標題文字或左、右2個按鈕，可以用來作為巡覽用途。
標題工具列的標題文字正常是使用<h1>標籤，不過，我們可以視情況使用<h1>~<h6>標籤來表達所需語意。為了維持一致外觀，jQuery Mobile框架都是使用相同樣式來顯示，如下所示： <div data-role="header"> <h1>頁面標題</h1> </div>

14 5-2-1 標題工具列- 在標題工具列加入按鈕1 在標題工具列的標題文字兩邊可以加上2個按鈕，在第4-2-2節是在標題工具列的左邊加上巡覽用途的返回按鈕。 jQuery Mobile在標題工具列加入按鈕是使用超連結<a>，或表單的按鈕標籤，如果只有1個預設是位在左邊，如下所示： <div data-role="header"> <a href="#">登入</a> <h1>Mobile研討會</h1> </div>

15 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>

16 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>

17 5-2-2 註腳工具列-註腳結構 註腳工具列的結構和標題工具列相同，只是data-role屬性值為footer，如下所示： <div data-role="footer"> <h4>註腳內容</h4> </div> 註腳工具列預設使用佈景的色彩搭配a，當然我們也可以自行使用data-theme屬性來更改。

18 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>

19 5-2-3 標準固定模式-種類 jQuery Mobile工具列的定位方式主要有三種，如下所示：
同行模式（Inline Mode）：工具列的預設模式，它如同是頁面的第1行和最後1行，之前的工具列都是這種模式。 標準固定模式（Standard Fixed Mode）：不論頁面尺寸，標題工具列是位在螢幕的最上方；註腳工具列是位在最下方。 全螢幕固定模式（Full-screen Fixed Mode）：類似標準固定模式，當點選或觸摸螢幕時，工具列就會自動隱藏。

20 5-2-3 標準固定模式-標準固定模式(說明) 標準固定模式的工具列是固定顯示在螢幕可見區域的最上方和最下方，可以讓文件內容在之間自由的捲動，當捲動螢幕時，工具列會自動隱藏，結束捲動再顯示。 使用標準固定模式，只需加上data-position=“fixed”屬性至標題和註腳區塊的<div>標籤。

21 5-2-3 標準固定模式-標準固定模式(範例) <div data-role="header" data-position="fixed"> <h1>Mobile研討會</h1> </div> <div data-role="content"> ...... <div data-role="footer" data-position="fixed"> <h1>舉辦者: 陳會安</h1>

22 5-2-4 全螢幕固定模式-說明 全螢幕固定模式類似標準固定模式，當工具列是可見時，一定是固定顯示在螢幕可見區域的最上和最下方，而且是半透明的可以看到後面的文字內容。當點選或觸摸螢幕時，工具列就會自動隱藏，此種工具列特別適用在檢視圖片時，可以讓我們使用全螢幕來顯示圖片。 在jQuery Mobile使用全螢幕固定模式，只需在頁面的<div>標籤加上data-fullscreen屬性值true。

23 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 data-role="footer" data-position="fixed"> <h1>舉辦者: 陳會安</h1>

24 5-2-5 固定不變的註腳工具列-說明 固定不變的註腳工具列通常是在註腳工具列建立整個Mobile網頁應用程式的巡覽工具列，以便在切換頁面時，仍然可以固定顯示在最下方，而不會改變。 在jQuery Mobile建立固定不變的註腳工具列，請在每一頁面註腳區塊的<div>標籤加上相同的data-id屬性值，和data-position="fixed"屬性。

25 5-2-5 固定不變的註腳工具列-範例 <div data-role="footer" data-id="main" data-position="fixed"> <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>

26 5-3 基本ListView清單 5-3-1 建立ListView元件 5-3-2 在ListView新增標題列 5-3-3 巢狀ListView 5-3-4 互動列的圖示

27 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>

28 5-3-1 建立ListView元件-互動列清單
互動列清單的項目是可點選的項目，我們可以用來執行功能，或進行巡覽，jQuery Mobile框架會自動將項目的超連結a元素轉換成互動列（Interactive Rows），data-inset=“true”屬性讓清單不會佔用整個頁面，而是置中顯示且將四角改為圓角外框，如下所示： <ul data-role="listview" data-inset="true"> <li><a href= >jQuery</a></li> <li><a href=" jQuery Mobile</a></li> </ul>

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

30 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>

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

32 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>

33 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>

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

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

36 5-4-1 分割列清單 如果清單的同一個項目擁有兩種動作，jQuery Mobile提供分割列清單（Split Row Lists），可以在項目新增第2個超連結動作，如下所示： <ol data-role="listview" data-inset="true" data-split-icon="arrow-d"> <li> <a href=" <a href=" </li> <a href=" Mobile</a> <a href=" </ol>

37 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>

38 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> </ul>

39 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> <h3>jQuery Mobile</h3> <p>基於jQuery建立的手機平台框架</p> </ul>

40 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>

41 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>

42 5-4-4 氣泡計數清單-說明 jQuery Mobile的氣泡計數（Count Bubbles）是使用一個小圓圈包圍著一個數字，其位置是在項目右邊，可以用來顯示有多少互動列項目、未讀取項目、未完成工作或任何可以使用計數方式表示的資訊。 在ListView元件的<li>標籤中可以使用任何HTML元素，只需加上class=“ui-li-count”屬性，就可以建立氣泡計數，例如：<div>或<span>標籤，在<ul>或<ol>標籤可以使用data-count-theme屬性指定套用的佈景。

43 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>

44 5-4-5 篩選ListView清單的項目 如果ListView清單的項目很多，我們可以在ListView清單上方加上搜尋篩選列（Search Filter Bar），只需在欄位輸入關鍵字，就可以篩選項目，顯示符合條件的項目清單，如下所示： <ul data-role="listview" data-inset="true" data-filter="true" data-filter-placeholder="搜尋郵件"> … </ul>