Microsoft Word - AEL CH13New

Size: px

Start display at page:

Download "Microsoft Word - AEL CH13New"

桃薛
5 years ago
Views:

1 Chapter 13 建立 jquery Mobile 程式 13-1 jquery Mobile 的基礎 13-2 行動瀏覽器與 Viewport 13-3 下載安裝與使用 jquery Mobile 13-4 建立第一個 jquery Mobile 程式 13-5 jquery Mobile 頁面結構 13-6 巡覽 jquery Mobile 頁面

2 PART 5 jquery Mobile 行動網頁設計 13-1 jquery Mobile 的基礎 jquery Mobile 是基於 jquery 函數庫建立的框架 (Framework), 在 2010 年 10 月推出 1.0a1 的初期版本, 可以幫助我們建立跨行動裝置的網站或 Mobile Web 應用程式 Memo 框架 (Framework) 是一組類別物件的集合, 可以提供特定類型軟體的一組服務, 支援可重複使用的詳細設計和程式碼簡單的說, 它就是一個應用程式的準軟體, 提供特定類型軟體的功能, 我們只需繼承和使用框架的元件, 就可以快速建立特定類型的軟體程式 jquery Mobile 是由 jquery 專案小組開發, 在 2011 年 11 月推出 1.0 正式版, 一套建立在 jquery 函數庫之上的使用介面系統 (User Interface System,UI); 一個觸控最佳化的 Web 框架, 提供眾多最佳化觸控操作的使用介面元素, 可以讓我們不用撰寫任何一列 JavaScript 程式碼, 就可以輕鬆使用 HTML 標籤建立跨行動裝置網站或 Mobile Web 應用程式的使用介面一般來說, 跨行動裝置網站或 Mobile Web 應用程式最重要的部分就是使用介面,jQuery Mobile 是一套用來建立跨行動裝置網站或 Mobile Web 應用程式的使用介面框架 (Framework), 因為是使用宣告方式建立使用介面, 單純使用 HTML 標籤就可以建立一致佈景外觀的使用介面在實務上, 雖然我們可以使用 HTML JavaScript 和 CSS 自行建立跨行動裝置網站或 Mobile Web 應用程式的使用介面, 但是, 如此作會產生一些問題, 如下所示 : 跨瀏覽器相容 : 因為不是每一個行動瀏覽器都一樣, 雖然目前行動裝置使用的瀏覽器大都採用 Webkit 引擎為基礎, 但是, 仍然有些微差異, 所以, 採用使用介面框架是一種最佳選擇, 因為我們可以將跨瀏覽器相容的問題丟給框架來處理 13-2

3 建立 jquery Mobile 程式 chapter 13 撰寫大量的程式或標籤碼 : 如果自行建立跨行動裝置網站或 Mobile Web 應用程式的使用介面, 我們需要建立 HTML 標籤的介面元素撰寫 JavaScript 程式碼處理 DOM 和執行 Ajax 呼叫, 使用大量程式或標籤碼才能建立使用介面, 不但耗時, 在維護上也十分複雜, 透過 jquery Mobile 框架, 這些都是框架的內建工作, 我們只需專注於建立使用者所需的介面本身即可, 因為不用撰寫一行程式碼, 就可以建立漂亮的使用介面一致外觀的專業佈景 : 漂亮的使用介面是應用程式之所以吸引人目光的重要因素之一, 但是, 大部分開發者不見的擁有設計專才, 透過 jquery Mobile 框架可以讓我們輕鬆建立專業的使用介面外觀, 開發者可以將大部分心力專注於商業邏輯, 而不是使用介面設計 13-2 行動瀏覽器與 Viewport 行動網路瀏覽器主要是用來瀏覽 Mobile 網頁, 如同桌上型電腦瀏覽器的 Web 網頁, 我們一樣是使用 HTML 來建立 Mobile 網頁行動瀏覽器與模擬器目前桌上型電腦的瀏覽器主要有 :Internet Explorer Firefox Safari Opera 和 Chrome 等, 在 Mobile 平台的行動瀏覽器也一樣有多種, 除了各平台內建的行動瀏覽器外, 還有一些桌上型瀏覽器的 Mobile 版, 例如 :Opera 和 Firefox 行動裝置平台有 Apple 的 iphone ios Google 的 Android 和 Windows Phone 等平台, 其內建行動瀏覽器都支援最新 HTML5 CSS3 和 JavaScript 在 WebMatrix 可以免費安裝 iphone 行動瀏覽器的模擬器, 讓我們在 Windows 電腦預覽行動裝置的 Mobile 網頁, 其安裝步驟如下所示 : 請啟動 WebMatrix 開啟或新增名為 Ch13 的 HTML 站台 13-3

4 PART 5 jquery Mobile 行動網頁設計在工具列執行首頁 > 執行 > 新增... 指令開啟瀏覽器擴充組件庫在瀏覽器擴充組件庫右邊選第 1 個 iphone Simulator 後, 按安裝鈕 13-4

建立 jquery Mobile 程式 chapter 13 可以看到組件的安裝資訊, 按是鈕確認安裝在閱讀使用者授權合約後, 按我接受鈕同意授權稍等一下, 等到安裝完成, 按關閉鈕返回 WebMatrix 在 WebMatrix 的 Ribbon 工具列執行首頁 > 執行 >iphone 指令, 可以開啟 iphone Simulator 瀏覽站台的首頁, 因為 index.

5 建立 jquery Mobile 程式 chapter 13 可以看到組件的安裝資訊, 按是鈕確認安裝在閱讀使用者授權合約後, 按我接受鈕同意授權稍等一下, 等到安裝完成, 按關閉鈕返回 WebMatrix 在 WebMatrix 的 Ribbon 工具列執行首頁 > 執行 >iphone 指令, 可以開啟 iphone Simulator 瀏覽站台的首頁, 因為 index.html 沒有內容, 所以瀏覽器顯示空白頁, 如右圖所示 : 請在 iphone Simulator 上, 執行滑鼠右鍵快顯功能表的 File>Exit 指令結束 iphone Simulator Meta 標籤 Viewport 行動裝置的行動瀏覽器和桌上型瀏覽器之間的最大差異是在行動裝置的螢幕尺寸比較小, 我們同樣使用 HTML5 建立 Mobile 網頁和桌上型 Web 網頁, 只是, 我們需要額外使用 Meta 標籤 Viewport 來告訴行動瀏覽器看到的網頁尺寸 Meta 標籤 Viewport Meta 標籤 Viewport 最早是出現在 Apple 公司 iphone 手機的 Safari 瀏覽器, 可以正確告訴行動瀏覽器看到的網頁尺寸, 如果沒有此 Meta 標籤 Viewport, 行動瀏覽器會認為它是在瀏覽一頁桌上型電腦看到的網頁, 如下所示 : <meta name="viewport" content="width=device-width, initial-scale=1"> 13-5

6 PART 5 jquery Mobile 行動網頁設計上述 <meta> 標籤的 name 屬性值是 viewport, 可以告訴使用 WebKit 瀏覽器引擎的行動瀏覽器, 和需要顯示的頁面尺寸為何? 在 content 屬性提供一些參數來定義進一步尺寸和縮放資訊, 相關參數說明如下表所示 : 參數說明 width 指定瀏覽器顯示的寬度, 屬性值 device-width 是行動裝置的螢幕寬度, 也可以指定數值的絕對寬度 height 指定瀏覽器顯示的高度, 屬性值 device-height 是行動裝置的螢幕高度, 也可以指定數值的絕對高度 initial-scale user-scalable 指定畫面是使用多少倍 viewport 來顯示,1 就是指 1 個 viewport 顯示螢幕的像素 ( 即 1 個點 ) 等於 1 個螢幕像素是否允許使用者調整螢幕縮放, 值 1 yes 或 true 表示允許 ;0 no 或 false 表示不允許在 Android 作業系統的內建行動瀏覽器支援額外參數, 其說明如下表所示 : 參數 target-densitydpi 說明參數可以告訴行動裝置此 Mobile 網頁設計的 dpi(dots per Inch, 每英吋的像數 ), 值 device-dpi 是符合行動裝置螢幕的 dpi, 值 high-dpi medium-dpi 和 low-dpi 分別是高中和低 dpi, 也可以指定 70~400 之間的值現在, 我們就可以建立 Ch13_2_2.html, 在 <head> 區塊加上 Meta 標籤 Viewport 來建立 Mobile 網頁, 如下所示 : <head> <meta charset="utf-8"/> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>ch13_2_2.html</title> </head> 上述 content 屬性的參數指定使用行動裝置的螢幕寬度,1 個 viewport 顯示螢幕的像素等於 1 個螢幕像素現在, 我們就可以使用 iphone Simulator 來瀏覽 Mobile 網頁 :Ch13_2_2.html, 其步驟如下所示 : 13-6

html, 按 Enter 鍵, 就可以顯示 Mobile 網頁內容, 如右圖所示 : 當在 WebMatrix 執行過 iphone Simulator,

7 建立 jquery Mobile 程式 chapter 13 請在 WebMatrix 的工具列執行首頁 > 執行 >iphone 指令, 可以開啟 iphone Simulator 瀏覽站台的首頁移至上方標題列, 可以看到網址欄, 請在最後輸入 Ch13_2_2.html, 按 Enter 鍵, 就可以顯示 Mobile 網頁內容, 如右圖所示 : 當在 WebMatrix 執行過 iphone Simulator, 它就會成為預設瀏覽器, 此後只需在站台檔案清單的欲瀏覽檔案上, 執行滑鼠右鍵快顯功能表的在瀏覽器中啟動指令, 就可以啟動 iphone Simulator 瀏覽執行指定的 HTML 網頁 13-7

PART 5 jquery Mobile 行動網頁設計 13-3 下載安裝與使用 jquery Mobile 在安裝 iphone Simulator 後, 我們就可以在 WebMatrix 建立 jquery Mobile 執行環境 13-3-1 下載 jquery Mobile jquery Mobile 可以免費下載和使用, 我們只需下載 jquery Mobile 框架的檔案和

8 PART 5 jquery Mobile 行動網頁設計 13-3 下載安裝與使用 jquery Mobile 在安裝 iphone Simulator 後, 我們就可以在 WebMatrix 建立 jquery Mobile 執行環境下載 jquery Mobile jquery Mobile 可以免費下載和使用, 我們只需下載 jquery Mobile 框架的檔案和 jquery 函數庫, 在解壓縮後就可以使用 jquery Mobile 下載 jquery Mobile jquery Mobile 可以在官方網站免費下載, 其下載網址如下所示 : jquery Mobile: 請捲動視窗找到 ZIP File, 點選 Zip File: jquery.mobile zip 超連結下載完整 JavaScript CSS 和 image 檔案, 其下載檔名為 :jquery.mobile zip jquery Mobile 的檔案結構在 jquery Mobile 下載檔案包含所需的.js 和.css 檔案, 其檔案結構如下圖所示 : 13-8

建立 jquery Mobile 程式 chapter 13 上述 demos 目錄是說明與範例程式在網站建立 jquery Mobile 程式所需的檔案和目錄, 如下所示 : images 目錄 :jquery Mobile 使用的圖示檔 jquery.mobile-1.4.3.min.

9 建立 jquery Mobile 程式 chapter 13 上述 demos 目錄是說明與範例程式在網站建立 jquery Mobile 程式所需的檔案和目錄, 如下所示 : images 目錄 :jquery Mobile 使用的圖示檔 jquery.mobile min.css:jquery Mobile 的 CSS 樣式檔案 jquery.mobile min.js:jquery Mobile 的外部 JavaScript 程式檔案上述檔案名稱的字尾 min, 表示是壓縮過的檔案 ( 刪除空白字元和換行後的最小尺寸 ), 通常是使用在實際執行的網頁應用程式, 如果需要在 jquery Mobile 中進行除錯, 請使用沒有字尾的版本為了方便升級 jquery Mobile, 筆者已經將 jquery Mobile 版號刪除,CSS 和 JavaScript 檔案請分別更名為 jquery.mobile.min.css 和 jquery.mobile.min.js 安裝 jquery Mobile 至 WebMatrix 站台請將 jquery.mobile.min.css jquery.mobile.min.js 檔案 images 目錄和 jquery 函數庫 jquery.min.js( 已經更改檔案名稱, 使用的是版 ), 都加入 WebMatrix 站台 Ch13 的根目錄, 就完成 jquery Mobile 的安裝, 如右圖所示 : 在 HTML 網頁使用 jquery Mobile 在 HTML 網頁使用 jquery Mobile 有兩種方式, 一是下載至同一目錄, 或直接使用 CDN(Content Delivery Network) 使用下載的 jquery Mobile 程式碼檔案當我們將 jquery Mobile 相關檔案和目錄置於 HTML 網頁的同一目錄後, 就可以在 HTML 網頁 <head> 標籤的 <script> 子標籤含括外部 JavaScript 程式碼檔案的 jquery 函數庫和 jquery Mobile, 如下所示 : 13-9

10 PART 5 jquery Mobile 行動網頁設計 <link rel="stylesheet" href="jquery.mobile.min.css"> <script src="jquery.min.js"></script> <script src="jquery.mobile.min.js"></script> <script> </script> 上述標籤碼的 <link> 是連接外部 CSS 樣式檔案 ( 已更名 ), 第 2 個 <script> 標籤含括 jquery 函數庫 ( 已更名 ), 第 3 個是 jquery Mobile 的 JavaScript 檔案 ( 已更名 ), 我們可以在最後 1 個 <script> 標籤撰寫 jquery 或 JavaScript 程式碼來建立 jquery Mobile 網頁應用程式使用 CDN 如同 jquery 函數庫, 我們並不用下載 jquery Mobile 程式碼檔案, 可以直接使用儲存在 CDN 的程式碼檔案, 如下所示 : <link rel="stylesheet" href=" /> <script src=" <script src=" 上述標籤碼可以在 JavaScript 程式的 <head> 標籤含括 CDN 的 jquery 函數庫和 jquery Mobile 相關檔案 13-4 建立第一個 jquery Mobile 程式在這一節我們準備建立第一個 jquery Mobile 程式的行動網頁, 並且使用 WebMatrix 和 iphone Simulator 在 Windows 作業系統預覽 jquery Mobile 程式的執行結果 jquery Mobile 程式 :Ch13_4.html 在 jquery Mobile 程式建立一頁 Mobile Web 開發的說明網頁, 其建立步驟如下所示 : 13-10

11 建立 jquery Mobile 程式 chapter 13 步驟一 :HTML5 的 DOCTYPE jquery Mobile 程式是一頁 HTML5 網頁, 所以在第 1 行需要加上 HTML5 的 DOCTYPE, 如下所示 : <!DOCTYPE html> 步驟二 :<meta> 標籤指定編碼和縮放比例在 HTML 的 <head> 區塊需要加上 <meta> 標籤指定編碼和行動裝置的尺寸與縮放比例, 如下所示 : <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> 上述第 1 個 <meta> 標籤指定編碼為 utf-8, 可以正確顯示中文內容, 第 2 個 <meta> 標籤指定行動裝置的寬度和縮放比例, 請參閱第節 meta 標籤 Viewport 的進一步說明步驟三 : 含括 jquery 和 jquery Mobile 程式碼檔案和樣式表當我們將相關.js 和.css 檔案和 images 目錄都複製至 Ch3_4.html 的同一目錄後, 就可以在 <head> 區塊使用 <link> 和 <script> 標籤含括 jquery 和 jquery Mobile 程式碼檔案和樣式表, 如下所示 : <link rel="stylesheet" href="jquery.mobile.min.css"> <script src="jquery.min.js"></script> <script src="jquery.mobile.min.js"></script> 步驟四 : 建立頁面 jquery Mobile 框架是使用標記驅動 (Markup-driven) 來設定與配置頁面, 我們是使用 HTML5 的 data-role 屬性定義 div 元素是什麼, 如下所示 : <div data-role="page"> <div data-role="header"> <h1>mobile Web 開發 </h1> </div> <div data-role="content"> <p> 使用 HTML5 建立 Mobile 13-11

12 PART 5 jquery Mobile 行動網頁設計網頁和桌上型 Web 網頁並沒有什麼不同, 主要差異在於 Mobile 網頁的螢幕尺寸比較小, 另一個需要注意的是效能, 我們需要最佳化 Mobile 網頁的執行, 減少頻寬浪費, 以便行動網路瀏覽器能夠以最佳效能來瀏覽 Mobile 網頁 </p> </div> <div data-role="footer"> <h1> 製作者 : 陳會安 </h1> </div> </div> 上述最外層 div 元素的 data-role 屬性值是 page, 表示它是一個頁面, 標準 jquery Mobile 頁面的內容可以分成三個區段, 如下表所示 : <div> 標籤的區段 <div data-role="header"> <div data-role="content"> <div data-role="footer"> 說明頁面的標題列, 我們可以在此元素建立巡覽列, 如果標題文字太長, 就會在最後顯示縮寫符號... 頁面實際顯示的內容頁面的註腳列, 我們也可以在此元素建立巡覽列, 如果加上 data-position="fixed" 屬性, 可以讓註腳列永遠顯示在底部在上表的三個區段中, 只有 content 是頁面的必須元素,header 和 footer 都是選項元素, 可有可無, 我們可以使用 header 和 footer 建立工具列的介面元件, 其進一步說明請參閱第 14 章步驟五 : 預覽網頁內容請在 WebMatrix 的標籤頁編輯 Ch13_4.html, 完整 jquery Mobile 程式碼如下所示 : 01: <!DOCTYPE html> 02: <html> 03: <head> 04: <meta charset="utf-8"/> 05: <meta name="viewport" content="width=device-width, initial-scale=1"> 06: <title>ch13_4.html</title> 07: <link rel="stylesheet" href="jquery.mobile.min.css"> 08: <script src="jquery.min.js"></script> 13-12

13 建立 jquery Mobile 程式 chapter 13 09: <script src="jquery.mobile.min.js"></script> 10: </head> 11: <body> 12: <div data-role="page"> 13: <div data-role="header"> 14: <h1>mobile Web 開發 </h1> 15: </div> 16: <div data-role="content"> 17: <p> 使用 HTML5 建立 Mobile 18: 網頁和桌上型 Web 網頁並沒有什麼不同, 19: 主要差異在於 Mobile 網頁的螢幕尺寸比 20: 較小, 另一個需要注意的是效能, 我們 21: 需要最佳化 Mobile 網頁的執行, 減少頻 22: 寬浪費, 以便行動網路瀏覽器能夠以最 23: 佳效能來瀏覽 Mobile 網頁 </p> 24: </div> 25: <div data-role="footer"> 26: <h1> 製作者 : 陳會安 </h1> 27: </div> 28: </div> 29: </body> 30: </html> 上述程式碼可以看到我們沒有使用 JavaScript 程式碼, 就可以輕鬆建立行動網頁的使用介面現在, 請參閱第節使用 iphone Simulator 預覽手機行動網頁的內容, 如右圖所示 : 13-13

PART 5 jquery Mobile 行動網頁設計 13-5 jquery Mobile 頁面結構在成功建立第 1 個 jquery Mobile 程式後, 接著, 我們就來看一看 jquery Mobile 框架架構和頁面結構 13-5-1 jquery Mobile 框架架構 jquery Mobile 框架的設計理念非常簡單, 它是基於 jquery 和 jquery UI

14 PART 5 jquery Mobile 行動網頁設計 13-5 jquery Mobile 頁面結構在成功建立第 1 個 jquery Mobile 程式後, 接著, 我們就來看一看 jquery Mobile 框架架構和頁面結構 jquery Mobile 框架架構 jquery Mobile 框架的設計理念非常簡單, 它是基於 jquery 和 jquery UI 建立的一個跨行動裝置平台的使用介面系統, 提供輕量化程式碼和樣式來建立漂亮的 Mobile 網頁使用介面在 jquery Mobile 框架是使用簡單和功能強大的方式來定義網頁內容, 即頁面 (Pages), 並且提供 Ajax 技術的巡覽系統, 可以建立動畫效果的頁面轉換 jquery Mobile 框架架構的基本單位是頁面, 使用卡片觀念來建立頁面結構, 如同一盒卡片, 盒子是 HTML 網頁文件, 每一張卡片就是一個扮演 page 角色的 <div> 標籤, 如下圖所示 : 上述 HTML 網頁可以在同一檔案建立一個或多個頁面, 或是多檔案多頁面, 每一個頁面是一張卡片, 其主要目的是為了減少延遲和下載時間事實上, 卡片觀念在 Mobile 技術並不是一件新鮮事, 因為 WML 語言 (Wireless Markup Language) 就可以在同一檔案建立多個虛擬頁面, 每一個頁面稱為卡片 (Cards),WML 文件稱為一幅紙牌 (Deck), 它是使用 <card> 標籤定義虛擬頁面 13-14

15 建立 jquery Mobile 程式 chapter 13 在 jquery Mobile 頁面之間可以使用 <a> 超連結來連接, 我們不只可以連接同一檔案的其他頁面, 還可以連接其他 HTML 網頁的 jquery Mobile 頁面頁面結構與角色 jquery Mobile 的 HTML5 網頁是以頁面 (Pages) 為單位來建構使用介面, 我們可以在同一 jquery Mobile 程式檔案建立一個頁面, 或多個頁面, 也可以是多檔案各擁有一或多個頁面, 詳見第節的說明 jquery Mobile 之所以可以不撰寫任何 JavaScript 程式碼就建立使用介面, 因為是使用屬性指定 <div> 標籤扮演的角色 (Roles), 使用的是 HTML5 的 data-* 屬性, 例如 :<div data-role="page"> 使用 data-role 屬性值 page 指定此標籤扮演頁面角色, 其 id 屬性值就是頁面名稱 jquery Mobile 的 data-role 屬性值說明, 如下表所示 : data-role 屬性值 page header content footer dialog navbar button controlgroup listview collapsible collapsible-set fieldcontain slider nojs 說明定義頁面, 這是 jquery Mobile 顯示使用介面的基本單位定義頁面的標題列定義頁面的內容定義頁面的註腳列定義對話方塊的頁面定義巡覽工具列產生按鈕介面元件群組介面元素成水平或垂直排列建立 ListView 元件建立可摺疊內容建立手風琴選單表單欄位的容器建立滑動軸在支援 jquery Mobile 瀏覽器隱藏元素 13-15

16 PART 5 jquery Mobile 行動網頁設計多頁面結構 jquery Mobile 可以在同一 HTML 網頁建立多頁面和對話方塊, 並且讓我們建立超連結或巡覽工具列來切換顯示不同頁面或對話方塊多頁面結構在第節已經說明過 jquery Mobile 頁面結構, 我們是使用 id 屬性替頁面命名, 同一 jquery Mobile 程式就可以建立多頁面, 例如 :id 屬性值為 home 和 register 的 2 個頁面, 如下所示 : <div data-role="page" id="home"> <div data-role="header"> </div> <div data-role="content"> <a href="#register"> 報名研討會 </a><br/> </div> <div data-role="footer"></div> </div> <div data-role="page" id="register"> <div data-role="header"></div> <div data-role="content"></div> </div> 上述 <div> 標籤有 2 個頁面, 在 home 頁面的 content 內容擁有 a 元素的超連結, 可以開啟 register 頁面, 如下所示 : <a href="#register"> 報名研討會 </a> 上述 <a> 標籤的 href 屬性是使用 # 符號加上 id 屬性值來切換至另一頁面當在瀏覽器載入多頁面的 jquery Mobile 程式,jQuery Mobile 預設隱藏所有 <div data-role="page"> 標籤, 只顯示第 1 個頁面, 即顯示 home 頁面多頁面的標題文字對於多頁面 jquery Mobile 程式來說, 預設所有頁面都是使用同一 <title> 標籤的標題文字, 即顯示在瀏覽器視窗的標題列或標籤頁的標題文字 ( 如果有顯示的話 ), 我們可以使用 data-title 屬性指定其他頁面顯示的標題文字 ( 不含第一個頁面 ), 如下所示 : 13-16

html 在 jquery Mobile 程式的同一程式檔案建立 5 個頁面, 依序為 home register speakers schedule 和 information, 在 home 頁面新增超連結開啟其他 4 個頁面, 點選報名研討會超連結,

17 建立 jquery Mobile 程式 chapter 13 <div data-role="page" id="register" data-title ="Register"> <div data-role="header"> <h1> 報名研討會 </h1> </div> <div data-role="content"></div> </div> 上述標籤的 data-title 屬性可以指定第二個頁面的標題文字 jquery Mobile 程式 :Ch13_5_3.html 在 jquery Mobile 程式的同一程式檔案建立 5 個頁面, 依序為 home register speakers schedule 和 information, 在 home 頁面新增超連結開啟其他 4 個頁面, 點選報名研討會超連結, 可以顯示 register 頁面, 如下圖所示 : 點選其他超連結可以瀏覽其他 jquery Mobile 頁面因為 register 頁面有使用 data-title 屬性指定標題文字, 所以在 Google Chrome 瀏覽器顯示的標籤頁名稱就是屬性值 Register, 如下圖所示 : 13-17

PART 5 jquery Mobile 行動網頁設計程式內容 01: <!DOCTYPE html> 02: <html> 03: <head> 04: <meta charset="utf-8"/> 05: <meta name="viewport" content="width=device-width, initial-scale=1"> 06: <title>ch13_5_3.

18 PART 5 jquery Mobile 行動網頁設計程式內容 01: <!DOCTYPE html> 02: <html> 03: <head> 04: <meta charset="utf-8"/> 05: <meta name="viewport" content="width=device-width, initial-scale=1"> 06: <title>ch13_5_3.html</title> 07: <link rel="stylesheet" href="jquery.mobile.min.css"> 08: <script src="jquery.min.js"></script> 09: <script src="jquery.mobile.min.js"></script> 10: </head> 11: <body> 12: <div data-role="page" id="home"> 13: <div data-role="header"> 14: <h1>mobile 研討會 </h1> 15: </div> 16: <div data-role="content"> 17: <p> 歡迎參加目前最佳的 Mobile 開發研討會!</p> 18: <p>mobile 開發是目前巿場的當紅潮流, 19: 各種伺服端和客戶端網頁技術都逐漸向 Mobile 靠攏, 20: Mobile 開發研討會告訴你最新的各種 Mobile 技術 </p> 21: <a href="#register"> 報名研討會 </a><br/> 22: <a href="#speakers"> 講師陣容 </a><br/> 23: <a href="#schedule"> 課程內容 </a><br/> 24: <a href="#information"> 聯絡資訊 </a><br/> 25: </div> 26: <div data-role="footer" data-position="fixed"> 27: <h1> 舉辦者 : 陳會安 </h1> 28: </div> 29: </div> 30: <div data-role="page" id="register" 31: data-title ="Register"> 32: <div data-role="header"> 13-18

19 建立 jquery Mobile 程式 chapter 13 33: <h1> 報名研討會 </h1> 34: </div> 35: <div data-role="content"> 36: <p> 請輸入個人資料報名 Mobile 開發研討會!</p> 37: </div> 38: </div> 39: <div data-role="page" id="speakers" 40: data-title ="Speakers"> 41: <div data-role="header"> 42: <h1> 講師陣容 </h1> 43: </div> 44: <div data-role="content"></div> 45: </div> 46: <div data-role="page" id="schedule"> 47: <div data-role="header"> 48: <h1> 課程內容 </h1> 49: </div> 50: <div data-role="content"></div> 51: </div> 52: <div data-role="page" id="information"> 53: <div data-role="header"> 54: <h1> 聯絡資訊 </h1> 55: </div> 56: <div data-role="content"></div> 57: </div> 58: </body> 59: </html> 程式說明第 12~29 列 : 第 1 頁 home 頁面, 在第 21~24 列是連接其他頁面的超連結, 第 26~28 列使用 data-position="fixed" 屬性, 可以固定在頁尾顯示註腳列第 30~57 列 : 分別是 register speakers schedule 和 contact 頁面, 在第 31 和 40 列使用 data-title 屬性指定標題文字 13-19

20 PART 5 jquery Mobile 行動網頁設計 13-6 巡覽 jquery Mobile 頁面在 jquery Mobile 程式的不同頁面可以使用 a 元素的超連結來進行巡覽, 即連接其他 jquery Mobile 頁面, 或其他網站的網頁頁面標題列的返回鈕在 jquery Mobile 頁面的標題列擁有返回上一個頁面的返回鈕, 因為預設隱藏, 所以不會看到此按鈕對於哪些準備建立成原生應用程式的 Mobile 網頁應用程式來說, 我們可能就需要顯示返回鈕來幫助使用者進行頁面之間的切換 ( 因為瀏覽器本身擁有回到上一頁的按鈕, 所以 jquery Mobile 的 Mobile 網頁並不一定需要使用此按鈕 ) 在標題列顯示返回鈕 jquery Mobile 框架自動會替頁面標題列新增返回鈕, 我們可以使用 data-add-back-btn 屬性來切換顯示返回鈕, 如下所示 : <div data-role="header" data-add-back-btn="true"> </div> 上述標題列的 <div> 標籤指定 data-add-back-btn 屬性值為 true, 即顯示返回鈕, 預設值 false 為不顯示, 可以看到位在標題列前的返回鈕, 預設的標題文字是 Back 指定返回鈕的標題文字因為返回鈕的預設標題文字是 Back, 如果需要, 我們可以使用 data-back-btn-text 屬性更改顯示的標題文字, 如下所示 : <div data-role="header" data-add-back-btn="true" data-back-btn-text=" 上一頁 "> </div> 上述標籤碼指定返回鈕顯示的標題文字為上一頁 13-20

按一下, 可以回到上一個頁面 ( 請注意!iPhone Simulator 按此按鈕有問題, 並沒有作用, 請按下方工具列的第 1 個按鈕回到上一頁 ) 如果點選講師陣容顯示 speakers 頁面, 可以看到標題文字改為上一頁鈕, 如右圖所示 : 程式內容 01: <!

21 建立 jquery Mobile 程式 chapter 13 jquery Mobile 程式 :Ch13_6_1.html 在 jquery Mobile 程式建立 3 個頁面 home register 和 speakers, 在 home 頁面擁有超連結開啟 register 和 speakers 頁面, 在 register 頁面顯示返回鈕,speakers 頁面將標題文字更改成上一頁請點選報名研討會顯示 register 頁面, 如右圖所示 : 上述頁面的標題列顯示回到上一頁的 Back 鈕, 按一下, 可以回到上一個頁面 ( 請注意!iPhone Simulator 按此按鈕有問題, 並沒有作用, 請按下方工具列的第 1 個按鈕回到上一頁 ) 如果點選講師陣容顯示 speakers 頁面, 可以看到標題文字改為上一頁鈕, 如右圖所示 : 程式內容 01: <!DOCTYPE html> 02: <html> 03: <head> 04: <meta charset="utf-8"/> 05: <meta name="viewport" content="width=device-width, initial-scale=1"> 06: <title>ch13_6_1.html</title> 07: <link rel="stylesheet" href="jquery.mobile.min.css"> 08: <script src="jquery.min.js"></script> 09: <script src="jquery.mobile.min.js"></script> 10: </head> 11: <body> 12: <div data-role="page" id="home"> 13: <div data-role="header"> 14: <h1>mobile 研討會 </h1> 15: </div> 16: <div data-role="content"> 17: <p> 歡迎參加目前最佳的 Mobile 開發研討會!</p> 18: <p>mobile 開發是目前巿場的當紅潮流, 19: 各種伺服端和客戶端網頁技術都逐漸向 Mobile 靠攏, 13-21

22 Chapter 13 學習評量 ( )1. 請問 jquery Mobile 頁面一定需要使用下列哪一個 Meta 標籤的屬性來建立 Mobile 網頁? A. chartset B. viewport C. initial-scale D. user-scalable ( )2. jquery Mobile 頁面是使用 div 元素建立, 請問我們需要指定 data-role 屬性值為下列哪一個? A. page B. header C. footer D. content ( )3. jquery Mobile 頁面顯示的內容也是 div 元素, 請問 data-role 屬性值是下列哪一個? A. page B. header C. footer D. content ( )4. 在同一 jquery Mobile 程式可以建立多頁面, 我們需要在頁面 <div> 標籤指定下列哪一個屬性值來識別是不同的頁面? A. name B. page C. id D. page_id ( )5. 請問下列哪一個 jquery Mobile 頁面轉換特效會從 1 個點逐漸擴展成整個頁面來顯示? A. slideup B. fade C. pop D. flip 6. 請簡單說明什麼是 jquery Mobile 框架? 7. 請舉例說明 jquery Mobile 的頁面結構? 如何連接其他 jquery Mobile 頁面? 8. 請建立 2 頁 jquery Mobile 頁面, 一為 home; 一為 ch13, 在 home 頁面顯示本書書名的文字內容 ;ch13 頁面使用 <ol> 標籤顯示本章章節的清單, 然後在 home 頁面建立名為第 13 章超連結來連接 ch13 頁面 13-29

Microsoft Word - chap03.doc

Microsoft Word - chap03.doc 03 建立 jquery Mobile 程式與佈景 3-1 jquery Mobile 的基礎 3-2 行動網路瀏覽器與 Viewport 3-3 下載安裝與使用 jquery Mobile 3-4 建立第一個 jquery Mobile 程式 3-5 jquery Mobile 頁面結構 3-6 jquery Mobile 的佈景 Part II 客戶端 jquery Mobile 建立使用介面