Transcript Web Page, Dialog, Navigator

第6章 頁面、交談窗與巡覽
 6-1 建立多頁面jQuery Mobile程式
 6-2 連接jQuery Mobile頁面
 6-3 交談窗
 6-4 巡覽工具列
 6-5 頁面轉換特效與預設佈景
6-1 建立多頁面jQuery Mobile程式
 6-1-1 多頁面結構
 6-1-2 多頁面的標題
6-1-1 多頁面結構-標籤1
 jQuery Mobile程式可以建立多頁面，例如：id屬性
值為home和about的2個頁面，如下所示：
<div data-role="page" id="home">
<div data-role="header">…</div>
<div data-role="content">
…
<p><a href="#about">關於本書</a></p>
</div>
<div data-role="footer">…</div>
</div>
6-1-1 多頁面結構-標籤2
<div data-role="page" id="about">
<div data-role="header">…</div>
<div data-role="content">…</div>
<div data-role="footer">…</div>
</div>
6-1-1 多頁面結構-開啟頁面
 在home頁面的content內容擁有a元素的超連結，
可以開啟about頁面，如下所示：
<a href="#about">關於本書</a>
6-1-2 多頁面的標題
 對於多頁面jQuery Mobile程式來說，預設所有頁
面都是使用同一個<title>標籤的標題文字，即顯示
在瀏覽器視窗的標題列或標籤頁的標題文字，我
們可以使用data-title屬性指定其他頁面顯示的標
題文字（不含第一個頁面），如下所示：
<div data-role="page" id="second"
data-title="第二頁">
<div data-role="header">… </div>
<div data-role="content">…</div>
</div>
6-2 連接jQuery Mobile頁面
 6-2-1 jQuery Mobile框架如何處理多頁面巡覽
 6-2-2 頁面的返回鈕
 6-2-3 連接外部jQuery Mobile檔案
 6-2-4 預先載入頁面
 6-2-5 連接非jQuery Mobile的網頁
6-2-1 jQuery Mobile框架如何處理多頁面巡覽說明
 多頁面巡覽是由jQuery Mobile框架負責處理，它
是使用巡覽堆疊記錄連接頁面，以便可以正確返
回上一頁。
 如果是連接其他檔案的jQuery Mobile頁面，jQuery
Mobile框架自動使用Ajax技術載入連接頁面的
DOM，以便建立最佳化的頁面切換效果。
6-2-1 jQuery Mobile框架如何處理多頁面巡覽超連結連接頁面的種類
 jQuery Mobile是使用標準HTML超連結a元素在頁
面之間進行切換，基本上，我們可以連接的目的
地種類，如下所示：
• 連接同一個jQuery Mobile程式的其他頁面。
• 連接其他jQuery Mobile程式的頁面（只擁有單
一頁面）。
• 連接非jQuery Mobile的網頁，或其他網站的網
頁。
6-2-1 jQuery Mobile框架如何處理多頁面巡覽巡覽堆疊
 jQuery Mobile框架在處
理多頁面巡覽時，因為
jQuery Mobile框架會將
巡覽過程的頁面儲存在
巡覽堆疊，如同餐廳廚
房的工人清洗餐盤，將
洗好的餐盤疊在一起，
每一個洗好的餐盤放在
這疊餐盤的頂端，如右
圖所示：
6-2-1 jQuery Mobile框架如何處理多頁面巡覽巡覽過程
 例如：第6-1-1節
home和about頁
面的巡覽過程，
如右圖所示：
6-2-2 頁面的返回鈕-說明
 在jQuery Mobile頁面的標題列擁有返回上一頁面
的返回鈕，因為預設隱藏，所以不會看到此按鈕
。
 對於哪些準備建立成原生應用程式的Mobile網頁
應用程式來說，我們可能就需要顯示返回鈕來幫
助使用者進行頁面之間的切換（因為瀏覽器本身
擁有回到上一頁的按鈕，所以jQuery Mobile網頁
應用程式並不一定需要使用此按鈕）。
6-2-2 頁面的返回鈕-在頁面顯示返回鈕
 jQuery Mobile框架自動替頁面標題新增返回鈕，我們可以
使用data-add-back-btn屬性切換顯示返回鈕，如下所示：
<div data-role="page" id="about"
data-add-back-btn="true">
…
</div>
 頁面的<div>標籤指定data-add-back-btn屬性值為true，即
顯示返回鈕，預設值false為不顯示，可以看到位在標題列
前的返回鈕【Back】。
6-2-2 頁面的返回鈕-指定返回鈕的標題文字
 因為返回鈕的預設標題文字是【Back】，如果需
要，我們可以使用data-back-btn-text屬性更改顯示
的標題文字，如下所示：
<div data-role="page" id="about"
data-add-back-btn="true"
data-back-btn-text="上一頁">
…
</div>
6-2-3 連接外部jQuery Mobile檔案-說明
 在本節前的多頁面都是位在同一個檔案，如果需
要動態產生jQuery Mobile頁面，例如：使用PHP伺
服端網頁技術建立jQuery Mobile頁面，此時<a>標
籤就是連接外部jQuery Mobile檔案或PHP程式，如
下所示：
<a href="Ch6_2_3a.htm">關於本書</a>
 超連結目的地連接的Ch6_2_3a.htm是另一個
jQuery Mobile檔案。
6-2-3 連接外部jQuery Mobile檔案-條件
 jQuery Mobile框架可以使用如同連接同一檔案其
他頁面一般的切換頁面，只需滿足下列條件，如
下所示：
• 連接的目的地是同一網域的jQuery Mobile檔案
。
• 連接的jQuery Mobile檔案只有單一頁面。
• 如果超連結連接的URL網址是目錄，href屬性值
的最後需加上斜線，例如：連接「/sales」目錄
的href屬性值為：href="/sales/"。
• 在超連結不可使用target屬性。
6-2-3 連接外部jQuery Mobile檔案-巡覽方式
 其巡覽方式和內部
頁面並沒有什麼不
同，如右圖所示：
6-2-4 預先載入頁面
 為了減少DOM樹尺寸，我們可以將jQuery Mobile網頁應用
程式分割成多個單一頁面的檔案，而不是一個大尺寸的多
頁面檔案。但是，當使用單一頁面檔案時，為了能夠更快
顯示下一個頁面檔案，減少Ajax的處理時間，以便使用者
可以馬上看到下一個頁面，我們可以預先載入頁面。
 在超連接的<a>標籤只需加上data-prefetch屬性，就可以讓
jQuery Mobile框架在載入主要頁面後，預先在背景載入超
連結連接的目的地頁面，如下所示：
<a href="Ch6_2_4a.htm" data-prefetch>關於本書</a>
6-2-5 連接非jQuery Mobile的網頁-方法1
 jQuery Mobile的頁面也可能連接非jQuery Mobile
網頁，或其他網站的網頁，此時我們需要使用
data-rel屬性值external，明確表明是連接非jQuery
Mobile網頁，如下所示：
<a href="http://www.google.com.tw" datarel="external">Google</a>
 超連結是連接Google網站的首頁。
6-2-5 連接非jQuery Mobile的網頁-方法2
 另一種方式是使用data-ajax屬性，值false表示不使
用Ajax方式來載入，如此，也可以強迫<a>標籤的
超連結來連接非jQuery Mobile網頁，通常是使用
在同一網域的網頁，如下所示：
<a href="Ch6_2_5a.htm" dataajax="false">Ch6_2_5a.htm</a>
6-2-5 連接非jQuery Mobile的網頁-方法3
 當有些情況發生時，jQuery Mobile框架也會將它
視為連接非jQuery Mobile網頁，例如：連接其他
網域的網頁，或指定target屬性，如下所示：
<a href="http://www.yahoo.com.tw"
target="_blank">Yahoo</a>
6-3 交談窗
 6-3-1 建立交談窗
 6-3-2 在交談窗新增超連結
6-3-1 建立交談窗-方法1
 jQuery Mobile頁面除了可以填滿整個行動裝置的
螢幕外，也可以建立成交談窗，此時，我們只需
在開啟頁面的超連結加上data-rel屬性值dialog，
data-rel屬性是用來定義目前頁面和連接頁面之間
的關係，如下所示：
<a href="#book1" data-rel="dialog">圖書一</a>
6-3-1 建立交談窗-方法2
 另一種方式是建立data-role屬性值為dialog的交談
窗頁面，如下所示：
<div data-role="dialog" id="book2">
<div data-role="header"> </div>
<div data-role="content"> </div>
</div>
6-3-2 在交談窗新增超連結-取消
 因為jQuery Mobile交談窗就是開啟一頁交談窗外
觀的頁面，所以，當交談窗中有任何超連結，按
一下超連結，jQuery Mobile框架會自動關閉目前
交談窗，然後轉移至目的地頁面。
 換句話說，在交談窗頁面可以建立取消超連結，
我們只需在<a>標籤加上data-rel="back"屬性，其
href屬性值為"#"，如下所示：
<a href="#" data-rel="back">取消</a>
 超連結可以返回開啟交談窗的頁面。
6-3-2 在交談窗新增超連結-連接其他頁面
 同樣的，我們也可以建立連接其他頁面的超連結
，如下所示：
<a href="#delete">確定</a>
 <a>標籤是在交談窗中建立連接delete頁面的超連
結。
6-4 巡覽工具列
 6-4-1 巡覽的基礎
 6-4-2 建立巡覽工具列
 6-4-3 在巡覽工具列按鈕加上圖示
 6-4-4 在巡覽工具列按鈕使用自訂圖示
6-4-1 巡覽的基礎
 網站巡覽（Site Navigation）是在建立網站瀏覽結
構和其使用介面，以便使用者能夠快速在網站中
找到所需的網頁內容。常用的使用介面有超連結
、選單、工具列或樹狀結構，如下圖所示：
6-4-2 建立巡覽工具列-說明
 jQuery Mobile提供至多5個按鈕的巡覽工具列，如
果超過5個就會成為多列，每一列2個按鈕，其主
要功能是提供整個網頁應用程式的主巡覽功能，
在iOS或Nokia也稱為標籤列（Tab bar）。
6-4-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>
6-4-3 在巡覽工具列按鈕加上圖示-標籤
 jQuery Mobile只需在div元素指定data-role="navbar"屬性，
就可以將其中ul和li元素轉變成巡覽工具列，不只如此，我
們還可以在按鈕上方加上預設圖示，如下所示：
<div data-role="navbar">
<ul>
<li><a href="#" data-icon="home">首頁</a></li>
<li><a href="#" data-icon="search">搜尋</a></li>
<li><a href="#" data-icon="info">關於</a></li>
</ul>
</div>
6-4-3 在巡覽工具列按鈕加上圖示-預設圖示
 jQuery Mobile預設圖示的說明，如下表所示：
圖示說明
屬性值
圖示說明
屬性值
左箭頭圖示
arrow-l
右箭頭圖示
arrow-r
上箭頭圖示
arrow-u
下箭頭圖示
arrow-d
刪除圖示
delete
加號圖示
plus
減號圖示
minus
勾選圖示
check
設定圖示
gear
重新載入圖示
refresh
向前操作圖示
forward
返回操作圖示
back
格子圖示
grid
星號圖示
star
警告圖示
alert
資訊圖示
info
首頁圖示
home
搜尋圖示
search
6-4-4 在巡覽工具列按鈕使用自訂圖示-CSS
 除了使用預設圖示外，我們也可以在巡覽工具列按鈕使用
自訂圖示，圖示尺寸是18 x 18，格式可以是GIF、JPG或
PNG（建議使用PNG），然後，就可以建立CSS樣式來指定
自訂圖示的屬性值，如下所示：
.ui-icon-phone-silent {
background-image : url(phone_silent.png);
}
 「ui-icon」字首可以定義data-icon屬性值為「phone-silent
」的自訂圖示，圖示檔名稱為phone_silent.png。
6-4-4 在巡覽工具列按鈕使用自訂圖示-屬性值
 在<a>標籤可以指定使用自訂圖示，如下所示：
<li><a href="#" data-icon="phone-silent">靜音
</a></li>
 data-icon屬性值就是自訂的phone-silent屬性值。
6-5 頁面轉換特效與預設佈景-轉換特效1
 頁面轉換特效（Page Transitions）可以讓我們套用
不同轉換特效至新開啟的頁面或交談窗，使用的
是data-transition屬性，如下所示：
<a href="#about" data-transition="slideup">關於本
書</a>
 a元素使用data-transition屬性指定開啟about頁面
的轉換特效。
6-5 頁面轉換特效與預設佈景-轉換特效2
 常用屬性值的說明，如下表所示：
屬性值
說明
slide
從右向左滑動顯示新頁面（預設值），如果是按上
一頁鈕，就是從左向右滑動顯示頁面
slideup
從下向上滑動顯示新頁面，如果是按上一頁鈕，就
是從上向下滑動顯示頁面
slidedown
從上向下滑動顯示新頁面，如果是按上一頁鈕，就
是從下向上滑動顯示頁面
pop
新頁面會從1個點逐漸擴展成整個頁面，特別適用在
交談窗
fade
淡入顯示新頁面，新頁面會逐漸從不清楚顯示至清
楚顯示，如果是按上一頁鈕，就是淡出顯示頁面
flip
使用2D或3D效果翻轉舊頁面來顯示新頁面，目前3D
效果只有部分平台支援，例如：iOS
6-5 頁面轉換特效與預設佈景-預設佈景(說明)
 jQuery Mobile允許我們建立自訂佈景（Themes）
來套用在頁面或頁面元件，佈景是一組指定版面
配置、樣式和色彩的CSS樣式，一般來說，每一個
自訂佈景可以包含26種色彩搭配（詳見第9章的說
明），包含：前景色彩、背景色彩和漸層，以字
母a~z來標示。
6-5 頁面轉換特效與預設佈景-預設佈景(5種)
 jQuery Mobile預設佈景只提供5種色彩搭配，即字
母a~e，如下表所示：
字母
預設佈景的色彩
說明
a
黑色
工具列的預設樣式，最高等級的佈景
b
藍色
次高等級的佈景
c
銀色
大部分情況使用的佈景
d
灰色
替代的次高等級佈景
e
黃色
強調的佈景色彩
6-5 頁面轉換特效與預設佈景-預設佈景(使用)
 我們可以使用data-theme屬
性指定使用哪一種色彩搭配
的佈景，如下所示：
<div data-role="header"
data-theme="b">…</div>
 header區段的data-theme屬
性值是b，就是使用預設佈
景b的色彩搭配來顯示標題
列。