Microsoft Word - chap03

Size: px

Start display at page:

Download "Microsoft Word - chap03"

稚屈
5 years ago
Views:

1 範例檔與相關工具說明為了方便讀者實際操作本書內容, 筆者將本書使用到的軟體建立的範例站台 HTML5 JavaScript jquery 和 jquery Mobile 範例程式都收錄在碁峰資訊書籍配件的下載網站 ( PHP.zip 相關範例與工具共有 3 個 ZIP 格式的檔案, 說明如下 : ZIP 檔案說明各章 WebMatrix 範例 PHP 站台 CakePHP 應用程式與 Slim 應用程式的 ZIP 格式壓縮檔 jquery-mobile-theme zip 第 3 章筆者建立的 jquery Mobile 自訂佈景 Tools.zip 本書使用的 WampServer CakePHP Slim Mobile Detect PHP QR Code Opera Mobile Emulator jquery Mobile 和 jquery 等工具的 ZIP 格式壓縮檔範例程式的安裝有兩種方式, 一是使用 WebMatrix for PHP, 請建立名為 PHP_Mobile 資料夾後, 將各章 WebMatrix 範例 PHP 站台都複製至資料夾下, 此時每一個章名的目錄是一個站台, 其中第 16~18 章的 CakePHP 與 Slim 應用程式需要使用 Apache 伺服器, 所以只能使用 WampServer 另一種方式是使用 WampServer, 請直接將所有 Ch01~Ch18 資料夾都複製到 C:\wamp\www 資料夾的根目錄, 就可以開啟此目錄的站台來測試本書範例 PHP 程式版權聲明本書所提供下載的共享或公共軟體, 其著作權皆屬原開發廠商或著作人, 本書作者和出版商與各軟體的著作權和其他利益無涉檔案僅供讀者練習之用, 請於安裝後詳細閱讀各工具的授權和使用說明, 若在使用過程中因軟體所造成的任何損失, 與本書作者和出版商無關 v

2 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 的佈景

建立 jquery Mobile 程式與佈景 Chapter 03 3-2 行動網路瀏覽器與 Viewport 行動網路瀏覽器主要是用來瀏覽 Mobile 網頁 ( 如果瀏覽 PC 版的 Web 網頁, 網頁內容看起來像是一頁密密麻麻的小抄 ), 如同桌上型電腦瀏覽器的 Web 網頁, 我們一樣是使用 HTML 來建立 Mobile 網頁 3-2-1 行動網路瀏覽器與模擬器

3 建立 jquery Mobile 程式與佈景 Chapter 行動網路瀏覽器與 Viewport 行動網路瀏覽器主要是用來瀏覽 Mobile 網頁 ( 如果瀏覽 PC 版的 Web 網頁, 網頁內容看起來像是一頁密密麻麻的小抄 ), 如同桌上型電腦瀏覽器的 Web 網頁, 我們一樣是使用 HTML 來建立 Mobile 網頁行動網路瀏覽器與模擬器目前桌上型電腦的主要瀏覽器有 :Internet Explorer Firefox Safari Opera 和 Chrome 等, 在 Mobile 平台的行動網路瀏覽器也一樣有很多種, 除了各平台內建的行動網路瀏覽器外, 還有一些桌上型瀏覽器的 Mobile 版, 例如 :Opera 和 Firefox 基本上, 行動裝置的行動網路瀏覽器和桌上型瀏覽器之間的最大差異在行動裝置的螢幕尺寸比較小, 目前巿面上行動裝置平台有 Apple 的 iphone ios Google 的 Android 和 Windows Phone 等平台, 其內建行動網路瀏覽器都支援最新 HTML5 CSS3 和 JavaScript 下載與安裝 iphone Simulator 在 WebMatrix 可以免費安裝 iphone 行動網路瀏覽器的模擬器, 讓我們在 Windows 8 電腦預覽行動裝置的 Mobile 網頁, 其安裝步驟如下所示 : 請啟動 WebMatrix 2 開啟名為 Ch03 的站台在 Ribbon 工具列執行執行 > 新增... 指令, 可以開啟瀏覽器擴充組件庫 3-5

4 Part II 客戶端 jquery Mobile 建立使用介面在右邊選 iphone Simulator 後, 按安裝鈕, 可看到安裝資訊按安裝鈕, 可以看到使用者授權合約 3-6

5 建立 jquery Mobile 程式與佈景 Chapter 03 按我接受鈕同意授權, 就可以下載安裝 iphone Simulator, 稍等一下, 等到安裝完成, 就會返回 WebMatrix 在 WebMatrix 的 Ribbon 工具列執行執行 >iphone 指令, 可以開啟 iphone Simulator 瀏覽站台的首頁, 因為 index.php 並沒有內容, 所以瀏覽器顯示空白頁, 如右圖所示 : 請在 iphone Simulator 上, 執行右鍵快顯功能表的 File>Exit 指令結束 iphone Simulator 3-7

Part II 客戶端 jquery Mobile 建立使用介面下載與安裝 Opera Mobile Emulator 因為 WebMatrix 提供的 iphone Simulator 是 Lite 版本, 可以測試在 iphone 手機上瀏覽網頁的顯示效果, 但功能並不完整,jQuery Mobile 框架的某些功能並無法正確執行, 此時, 筆者就會改用 Opera Mobile

6 Part II 客戶端 jquery Mobile 建立使用介面下載與安裝 Opera Mobile Emulator 因為 WebMatrix 提供的 iphone Simulator 是 Lite 版本, 可以測試在 iphone 手機上瀏覽網頁的顯示效果, 但功能並不完整,jQuery Mobile 框架的某些功能並無法正確執行, 此時, 筆者就會改用 Opera Mobile Emulator 來測試執行 Opera Mobile Emulator 是一個可以在桌上型電腦執行的行動網路瀏覽器, 支援 Windows Mac OS X 與 Linux 作業系統, 可以讓網頁設計者在建立 Mobile 網頁時, 直接在個人電腦模擬顯示 Mobile 網頁的版面和找出相容性問題 Opera Mobile Emulator 可以在 Opera 官方網站免費下載, 其下載網址為 : 如下圖所示 : 按游標所在按鈕, 就可以下載 Opera Mobile Emulator, 本書下載的檔名為 : Opera_Mobile_Emulator_12.1_Windows.exe 3-8

$exe 檔案, 可以看到歡迎安裝的精靈畫面按 Next 鈕選擇 Opera Mobile Emulator 的安裝路徑預設安裝路徑為 C:\Program Files (x86)\opera Mobile Emulator, 按 Next 鈕輸入開始功能表的捷徑名稱預設名稱是 Opera Mobile Emulator, 不用更改, 按 Next 鈕選擇額外工作$

7 建立 jquery Mobile 程式與佈景 Chapter 03 在下載 Opera Mobile Emulator 後, 就可以在 Windows 電腦安裝 Opera Mobile Emulator, 其步驟如下所示 : 按二下 Opera_Mobile_Emulator_12.1_Windows.exe 檔案, 可以看到歡迎安裝的精靈畫面按 Next 鈕選擇 Opera Mobile Emulator 的安裝路徑預設安裝路徑為 C:\Program Files (x86)\opera Mobile Emulator, 按 Next 鈕輸入開始功能表的捷徑名稱預設名稱是 Opera Mobile Emulator, 不用更改, 按 Next 鈕選擇額外工作勾選是否建立桌面捷徑或快速啟動列圖示, 不用更改, 按 Next 鈕可以看到安裝資訊, 準備開始安裝按 Install 鈕開始安裝, 稍等一下, 可以看到安裝完成的精靈畫面按 Finish 鈕完成 Opera Mobile Emulator 的安裝 3-9

8 Part II 客戶端 jquery Mobile 建立使用介面 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"> 上述 <meta> 標籤的 name 屬性值是 viewport, 可以告訴使用 WebKit 瀏覽器引擎的行動瀏覽器, 和需要顯示的頁面尺寸為何? 在 content 屬性提供一些參數來定義進一步尺寸和縮放資訊, 相關參數說明如下表所示 : width height 參數 initial-scale user-scalable 說明指定瀏覽器顯示的寬度, 屬性值 device-width 是行動裝置的螢幕寬度, 也可以指定數值的絕對寬度指定瀏覽器顯示的高度, 屬性值 device-height 是行動裝置的螢幕高度, 也可以指定數值的絕對高度指定畫面是使用多少倍 viewport 來顯示,1 就是指 1 個 viewport 顯示螢幕的像素 ( 即 1 個點 ) 等於 1 個螢幕像素是否允許使用者調整螢幕縮放, 值 1 yes 或 true 表示允許 ; 0 no 或 false 表示不允許 minimum-scale 指定可以使用的最小縮放, 值的範圍是 0~10 maximum-scale 指定可以使用的最大縮放, 值的範圍是 0~

9 建立 jquery Mobile 程式與佈景 Chapter 03 在 Android 作業系統的內建行動瀏覽器支援額外參數, 其說明如下表所示 : 參數 target-densitydpi 說明參數可以告訴行動裝置此 Mobile 網頁設計的 dpi(dots per Inch, 每英吋的像數 ), 值 device-dpi 是符合行動裝置螢幕的 dpi, 值 high-dpi medium-dpi 和 low-dpi 分別是高中和低 dpi, 也可以指定 70~400 之間的值現在, 我們就可以建立 Ch3_2_2.html, 在 <head> 區塊加上 Meta 標籤 Viewport 來建立 Mobile 網頁, 如下所示 : <head> <meta charset="utf-8"/> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>ch3_2_2.html</title> </head> 上述 content 屬性的參數指定使用行動裝置的螢幕寬度,1 個 viewport 顯示螢幕的像素等於 1 個螢幕像素瀏覽 Mobile 網頁現在, 我們就可以使用 iphone Simulator 和 Opera Mobile Emulator 來瀏覽 Mobile 網頁使用 iphone Simulator 瀏覽 Mobile 網頁在 WebMatrix 可以使用 iphone Simulator 瀏覽 Mobile 網頁 : Ch3_2_2.html, 其步驟如下所示 : 3-11

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

10 Part II 客戶端 jquery Mobile 建立使用介面請啟動 WebMatrix, 在 Ribbon 工具列執行執行 >iphone 指令, 可以開啟 iphone Simulator 瀏覽站台的首頁移至上方標題列, 可以看到網址欄, 請在最後輸入 Ch3_2_2.html, 按 Enter 鍵, 就可以顯示網頁內容, 如右圖所示 : 當在 WebMatrix 執行過 iphone Simulator, 它就會成為預設瀏覽器, 此後只需在站台檔案清單的欲瀏覽檔案上, 執行右鍵快顯功能表的在瀏覽器中啟動指令, 就可以啟動 iphone Simulator 瀏覽執行指定的 HTML 網頁 3-12

11 建立 jquery Mobile 程式與佈景 Chapter 03 使用 Opera Mobile Emulator 瀏覽 Mobile 網頁在安裝 Opera Mobile Emulator 的最後一步如果勾選 Launch Opera Mobile Emulator, 或直接按二下桌面 Opera Mobile Emulator 捷徑, 就可以啟動 Opera Mobile Emulator( 第 1 次啟動需選擇語言, 請選 English 且取消勾選下方核取方塊, 不再顯示此對話方塊 ), 看到 Opera Mobile Emulator 對話方塊在 Profile 框可以選擇手機或平板電腦的機型, 或在右上方 Resolution 欄位選擇解析度, 本書使用的解析度是 480X640, 請注意! 因為是模擬器, 我們只能預覽大致內容, 它和實際在行動裝置上的顯示結果, 並不保證百分之一百相同請選 VGA Portrait (480X640) 解析度, 按右下角 Launch 鈕, 可以啟動此螢幕尺寸的 Opera Mobile Emulator, 然後按左下角接受鈕進入瀏覽器, 如右圖所示 : 3-13

Part II 客戶端 jquery Mobile 建立使用介面請在上方網址欄使用虛擬鍵盤或電腦實際鍵盤輸入 URL 網址 http://localhost:41980/ch3 _2_2.

如果需要修改 URL 網址時, 只能使用 Backspace 鍵刪除之前輸入的字元 ; 並不能使用 Delete 鍵刪除之後的字元在 URL 欄位上長按, 可以複製或貼上剪貼簿的內容, 如下圖所示 : 3-3 下載安裝與使用 jquery

12 Part II 客戶端 jquery Mobile 建立使用介面請在上方網址欄使用虛擬鍵盤或電腦實際鍵盤輸入 URL 網址 _2_2.html( 此網址就是前述使用 WebMatrix 執行網頁時的網址 ), 按 Enter 鍵預覽 Mobile 網頁內容, 如右圖所示 : 請注意! 如果需要修改 URL 網址時, 只能使用 Backspace 鍵刪除之前輸入的字元 ; 並不能使用 Delete 鍵刪除之後的字元在 URL 欄位上長按, 可以複製或貼上剪貼簿的內容, 如下圖所示 : 3-3 下載安裝與使用 jquery Mobile 在安裝 iphone Simulator 和 Opera Mobile Emulator 後, 我們就可以在 WebMatrix 建立 jquery Mobile 的執行環境下載 jquery 與 jquery Mobile jquery Mobile 可以免費下載和使用, 我們只需下載 jquery Mobile 框架的檔案和 jquery 函數庫, 在解壓縮後就可以使用 jquery Mobile 3-14

建立 jquery Mobile 程式與佈景 Chapter 03 下載 jquery Mobile jquery Mobile 可以在官方網站免費下載, 在本書使用的是 1.

com/download/ 請捲動視窗找到 ZIP File, 點選 Zip File: jquery.mobile-1.2.0.

13 建立 jquery Mobile 程式與佈景 Chapter 03 下載 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 檔案, 其檔案結構如下圖所示 : 3-15

Part II 客戶端 jquery Mobile 建立使用介面上述 demos 目錄是範例程式基本上, 建立 jquery Mobile 程式所需的檔案和目錄, 如下所示 : images 目錄:jQuery Mobile 使用的圖示檔 jquery.mobile-1.2.0.min.

14 Part II 客戶端 jquery Mobile 建立使用介面上述 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 函數庫 jquery 函數庫可以在官方網站免費下載,jQuery Mobile 建議使用的版本為或 1.8.2, 在本書是使用版, 其下載網址如下所示 : jquery 函數庫 : 3-16

建立 jquery Mobile 程式與佈景 Chapter 03 請捲動視窗至 ADVANCED/EXPERIMENTAL OPTIONS 區段, 可以下載之前版本的 jquery 函數庫, 請選 1.8.2 版之後的 Minified 超連結( 右鍵另存目標指令 ), 可以下載壓縮版本的 jquery 函數庫, 其下載檔名為 : jquery-1.8.2.min.

15 建立 jquery Mobile 程式與佈景 Chapter 03 請捲動視窗至 ADVANCED/EXPERIMENTAL OPTIONS 區段, 可以下載之前版本的 jquery 函數庫, 請選版之後的 Minified 超連結( 右鍵另存目標指令 ), 可以下載壓縮版本的 jquery 函數庫, 其下載檔名為 : jquery min.js 為了方便升級 jquery, 筆者已經將 jquery 版號刪除, 請更名為 jquery.min.js 安裝 jquery Mobile 至 WebMatrix 站台請將 jquery.mobile.min.css jquery.mobile. min.js 檔案 image 目錄和 jquery 函數庫 jquery.min.js ( 已經更改檔案名稱 ), 都加入 WebMatrix 站台 Ch03 的根目錄, 就完成 jquery Mobile 的安裝, 如右圖所示 : 在 HTML 網頁使用 jquery Mobile 在 HTML 網頁使用 jquery Mobile 有兩種方式, 一是下載至同一個目錄, 或直接使用 CDN(Content Delivery Network) 使用下載的 jquery Mobile 程式碼檔案當我們將 jquery Mobile 相關檔案和目錄置於 HTML 網頁的同一個資料夾後, 就可以在 HTML 網頁 <head> 標籤的 <script> 子標籤含括外部 JavaScript 程式碼檔案的 jquery 函數庫和 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> 3-17

16 Part II 客戶端 jquery Mobile 建立使用介面上述標籤碼的 <link> 是連接外部 CSS 樣式檔案 ( 已更名 ), 第 2 個 <script> 標籤含括 jquery 的 JavaScript 函數庫, 第 3 個是 jquery Mobile 的 JavaScript 檔案 ( 已更名 ), 我們可以在最後 1 個 <script> 標籤撰寫 jquery 或 JavaScript 程式碼來建立 jquery Mobile 網頁應用程式關於 <script> 標籤的進一步說明請參閱第 12 章, 在此之前讀者就當是一個含括 JavaScript 函數庫的 HTML 標籤即可使用 CDN CDN 是將資料存放在網路系統的多個電腦節點, 以加速資料存取, 以 Internet 來說, 資料是儲存在全球多個不同位置的伺服器, 當存取資料時, 就會從最近的伺服器來取得資料, 以加速資料存取換句話說, 我們並不用下載 jquery 和 jquery Mobile 程式碼檔案, 可以直接使用儲存在 CDN 的程式碼檔案, 如下所示 : <link rel="stylesheet" href=" /> <script src=" <script src=" 上述標籤碼可以在 JavaScript 程式的 <head> 標籤含括 CDN 的 jquery 函數庫和 jquery Mobile 相關檔案 3-4 建立第一個 jquery Mobile 程式在這一節我們準備建立第一個 jquery Mobile 程式的行動網頁, 並且使用 WebMatrix 和 iphone Simulator 在 Windows 8 作業系統預覽 jquery Mobile 程式的執行結果 jquery Mobile 程式 :Ch3_4.html 在 jquery Mobile 程式建立一頁 PHP 的 Mobile Web 開發的簡介網頁, 其建立步驟如下所示 : 3-18

17 建立 jquery Mobile 程式與佈景 Chapter 03 步驟一 :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 檔案和 image 目錄都複製至 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> 3-19

18 Part II 客戶端 jquery Mobile 建立使用介面 </div> <div data-role="content"> <p>php 支援 Mobile Web 的跨行動裝置網站開發, 並且全面擁抱 Open Source 的當紅網頁技術, 例如 : jquery 函數庫和 jquery Mobile 框架, 可以幫助我們建立跨平台行動裝置的網站 </p> </div> <div data-role="footer"> <h1> 製作者 : 陳會安 </h1> </div> </div> 上述最外層 div 元素的 data-role 屬性值是 page, 表示它是一個頁面, 在之中的內容分成三個區段, 分別是 <div data-role="header"> 標籤的標題列 <div data-role="content"> 標籤的本文內容和 <div data-role="footer"> 標籤的註腳列步驟五 : 預覽網頁內容請在 WebMatrix 的標籤頁編輯 Ch3_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>ch3_4.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"> 13: <div data-role="header"> 14: <h1>mobile Web 開發 </h1> 15: </div> 16: <div data-role="content"> 17: <p>php 支援 Mobile Web 的跨行動裝置網站開發, 18: 並且全面擁抱 Open Source 的當紅網頁技術, 例如 : 19: jquery 函數庫和 jquery Mobile 框架, 20: 可以幫助我們建立跨平台行動裝置的網站 </p> 3-20

19 建立 jquery Mobile 程式與佈景 Chapter 03 21: </div> 22: <div data-role="footer"> 23: <h1> 製作者 : 陳會安 </h1> 24: </div> 25: </div> 26: </body> 27: </html> 上述程式碼可以看到我們沒有使用一行 JavaScript 程式碼, 就可以輕鬆建立行動網頁的使用介面現在, 請參閱第節使用 iphone Simulator 預覽手機行動網頁的內容, 如右圖所示 : 請移至 iphone Simulator 的上方標題, 可以顯示預設網址, 請在 Opera Mobile Emulator 輸入此網址, 或複製或貼上網址, 就可以在 Opera Mobile Emulator 顯示行動網頁的內容, 如右圖所示 : 3-21

20 Part II 客戶端 jquery Mobile 建立使用介面此時, 在瀏覽器上方並沒有顯示 URL 網址欄, 請按住網頁往下拖拉, 就可以顯示網址欄, 再按二下欄位, 即可輸入其他 URL 網址, 如右圖所示 : 3-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> 標籤, 如下圖所示 : 3-22

建立 jquery Mobile 程式與佈景 Chapter 03 上述 HTML 網頁可以在同一個檔案建立一個或多個頁面, 或是多檔案多頁面, 每一個頁面是一張卡片, 其主要目的是為了減少延遲和下載時間, 事實上, 卡片觀念在 Mobile 技術並不是一件新鮮事, 因為 WML 語言 (Wireless Markup Language) 就可以在同一個檔案建立多個虛擬頁面, 每一個頁面稱為卡片

21 建立 jquery Mobile 程式與佈景 Chapter 03 上述 HTML 網頁可以在同一個檔案建立一個或多個頁面, 或是多檔案多頁面, 每一個頁面是一張卡片, 其主要目的是為了減少延遲和下載時間, 事實上, 卡片觀念在 Mobile 技術並不是一件新鮮事, 因為 WML 語言 (Wireless Markup Language) 就可以在同一個檔案建立多個虛擬頁面, 每一個頁面稱為卡片 (Cards),WML 文件稱為一幅紙牌 (Deck), 它是使用 <card> 標籤定義虛擬頁面在 jquery Mobile 頁面之間可以使用 <a> 超連結來連接, 我們不只可以連接同一個檔案的其他頁面, 還可以連接其他 HTML 網頁的 jquery Mobile 頁面, 在第 4 章有進一步的說明單一頁面結構與角色 jquery Mobile 的 HTML5 網頁是以頁面 (Pages) 為單位來建構使用介面, 我們可以在同一個 jquery Mobile 程式檔案建立一個頁面, 或多頁面, 也可以是多檔案和多頁面換句話說, 使用 jquery Mobile 建立跨行動裝置網站時, 我們可以在同一檔案建立多頁面, 或是多個檔案各擁有一或多個頁面, 以本書準備在第 4~5 章建立的範例網站來說, 使用的是多檔案, 而且每一個檔案擁有一個頁面, 以方便解說各頁面的內容 3-23

22 Part II 客戶端 jquery Mobile 建立使用介面 jquery Mobile 之所以可以不撰寫任何一行程式碼就建立使用介面, 因為它是使用屬性來指定 <div> 標籤扮演的角色 (Roles), 使用的是 HTML5 的 data-* 屬性, 例如 :<div data-role="page"> 使用 data-role 屬性值 page 指定此標籤扮演頁面角色單一頁面結構對於 Android ios Windows Phone 和 webos 等行動作業系統平台來說,jQuery Mobile 在顯示頁面時會試圖捲動頁面來隱藏上方 URL 位址欄位, 其目的是為了建立更像原生應用程式的使用介面因為 jquery Mobile 是使用標記驅動 (Markup-driven) 來設定與配置頁面, 使用 HTML5 的 data-role 屬性定義 div 元素是什麼, 例如 : 頁面屬性值是 page, 單一頁面的 <div> 標籤包含 3 個子 <div> 標籤的區段, 其屬性值分別為 header content 和 footer, 如下所示 : <div data-role="page"> <div data-role="header"> <h1>mobile Web 開發 </h1> </div> <div data-role="content"> <p>php 支援 Mobile Web 的跨行動裝置網站開發, 並且全面擁抱 Open Source 的當紅網頁技術, 例如 : jquery 函數庫和 jquery Mobile 框架, 可以幫助我們建立跨平台行動裝置的網站 </p> </div> <div data-role="footer"> <h1> 製作者 : 陳會安 </h1> </div> </div> 上述最外層 div 元素的 data-role 屬性值是 page, 表示它是一個頁面, 標準 jquery Mobile 頁面的內容可以分成三個區段, 如下表所示 : <div> 標籤的區段 <div data-role="header"> 說明頁面的標題列, 我們可以在此元素建立巡覽列, 如果標題文字太長, 就會在最後顯示縮寫符號

23 建立 jquery Mobile 程式與佈景 Chapter 03 <div> 標籤的區段 <div data-role="content"> <div data-role="footer"> 頁面實際的內容說明頁面的註腳列, 我們也可以在此元素建立巡覽列, 如果加上 data-position="fixed" 屬性, 可以讓註腳列永遠顯示在底部上表的三個區段中, 只有 content 是頁面的必須元素,header 和 footer 都是選項元素, 可有可無, 我們可以使用 header 和 footer 建立工具列的介面元件, 其進一步說明請參閱第 5 章 jquery Mobile 的角色屬性 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 瀏覽器隱藏元素 3-25

24 Part II 客戶端 jquery Mobile 建立使用介面 3-6 jquery Mobile 的佈景 jquery Mobile 框架除了預設佈景外, 我們也可以自行使用佈景或 CSS 樣式來格式化整個使用介面, 簡單的說, 就是建立自訂佈景 jquery Mobile 佈景的基礎 jquery Mobile 允許我們建立自訂佈景 (Themes) 來套用在頁面或頁面元件, 佈景是一組指定版面配置樣式和色彩的 CSS 樣式, 一般來說, 每一個自訂佈景可以包含 26 種色彩搭配, 包含 : 前景色彩背景色彩和漸層, 以字母 a~z 來標示認識 jquery Mobile 的佈景 jquery Mobile 佈景是一組字型文字色彩背景色彩和漸層的 CSS 樣式, 可以定義至少 5 種 (a~e); 至多 26 種 (a~z) 不同的色彩搭配基本上, 每一個 jquery Mobile 佈景除了使用英文字母 a~z 代表不同色彩搭配外, 佈景還擁有一些全域定義 (Global Definitions), 可以使用在每一種色彩搭配的共同樣式, 如下所示 : 文字和方框特效, 例如 : 陰影和圓角 jquery Mobile 框架按鈕等元件取得焦點顯示的樣式全域定義的主要目的是維護使用介面一致的使用經驗, 不論是套用哪一種色彩搭配都套用相同的樣式, 例如 :jquery Mobile 預設佈景是使用藍色表示按鈕取得焦點, 不論使用哪一種色彩搭配都一樣對於每一個色彩搭配來說, 我們可以定義 jquery Mobile 介面的工具列本文內容和按鈕的樣式, 包含色彩陰影和框線 jquery Mobile 提供 ThemeRoller 線上編輯工具來幫助我們建立自訂佈景 3-26

建立 jquery Mobile 程式與佈景 Chapter 03 jquery Mobile 的預設佈景 jquery Mobile 預設佈景只提供 5 種色彩搭配, 即字母 a~e, 如下表所示 : 字母預設佈景的色彩說明 a 黑色工具列的預設樣式, 最高等級的佈景 b 藍色次高等級的佈景 c 銀色大部分情況使用的佈景 d 灰色替代的次高等級佈景 e 黃色強調的佈景色彩

25 建立 jquery Mobile 程式與佈景 Chapter 03 jquery Mobile 的預設佈景 jquery Mobile 預設佈景只提供 5 種色彩搭配, 即字母 a~e, 如下表所示 : 字母預設佈景的色彩說明 a 黑色工具列的預設樣式, 最高等級的佈景 b 藍色次高等級的佈景 c 銀色大部分情況使用的佈景 d 灰色替代的次高等級佈景 e 黃色強調的佈景色彩我們可以使用 data-theme 屬性指定使用哪一種色彩搭配的佈景, 如下所示 : <div data-role="header" data-theme="b"> </div> 上述 header 區段的 data-theme 屬性值是 b, 就是使用預設佈景 b 的色彩搭配來顯示標題列 jquery Mobile 程式 :Ch3_6_1.html 在 jquery Mobile 程式顯示 jquery Mobile 預設佈景 a~e, 首先是使用 iphone Simulator 來測試執行, 如右圖所示 : 3-27

Part II 客戶端 jquery Mobile 建立使用介面 Opera Mobile Emulator 的執行結果, 如右圖所示 : 上述巡覽工具列按鈕的標題文字因為寬度太小和解析度問題, 所以最後 1 個沒有完整顯示標題文字, 此時剪裁部分會自動顯示省略符號程式內容 01: <!

26 Part II 客戶端 jquery Mobile 建立使用介面 Opera Mobile Emulator 的執行結果, 如右圖所示 : 上述巡覽工具列按鈕的標題文字因為寬度太小和解析度問題, 所以最後 1 個沒有完整顯示標題文字, 此時剪裁部分會自動顯示省略符號程式內容 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>ch3_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" data-theme="b"> 14: <h1>ch3_6_1.html</h1> 15: </div> 16: <div data-role="content"> 17: <p>jquery Mobile 預設佈景 </p> 18: <div data-role="navbar"> 19: <ul> 20: <li><a href="#" data-theme="a"> 佈景 a</a></li> 21: <li><a href="#" data-theme="b"> 佈景 b</a></li> 22: <li><a href="#" data-theme="c"> 佈景 c</a></li> 23: <li><a href="#" data-theme="d"> 佈景 d</a></li> 3-28

27 建立 jquery Mobile 程式與佈景 Chapter 03 24: <li><a href="#" data-theme="e"> 佈景 e</a></li> 25: </ul> 26: </div> 27: </div> 28: </div> 29: </body> 30: </html> 程式說明第 18~26 列 : 使用 data-role 屬性值 navbar 的巡覽工具列來測試各種 jquery Mobile 預設佈景, 在第 20~24 列使用 data-theme 屬性值來指定預設佈景 a~e, 關於巡覽工具列的進一步說明, 請參閱第 5-1 節 ThemeRoller 線上工具的基礎 ThemeRoller 線上工具是源於 jquery UI 的佈景編輯工具, 可以讓我們直接拖拉色彩來更改元件的顯示樣式, 幫助我們快速建立自訂佈景, 其網址如下所示 : ThemeRoller: 當瀏覽器載入上述網址, 可以看到一個歡迎使用 ThemeRoller 的視窗, 如下圖所示 : 3-29

Part II 客戶端 jquery Mobile 建立使用介面請點選 Get Rolling 進入 ThemeRoller 編輯網頁, 如下圖所示 : 上述 ThemeRoller 使用介面可以分成左右兩大部分, 在左上方標籤可以切換編輯全域定義 Global, 或預設 3 個空佈景的色彩搭配 A B 和 C, 如果需要更多, 請按最後的 + 標籤來新增色彩搭配, 最多可以有 26 個,

28 Part II 客戶端 jquery Mobile 建立使用介面請點選 Get Rolling 進入 ThemeRoller 編輯網頁, 如下圖所示 : 上述 ThemeRoller 使用介面可以分成左右兩大部分, 在左上方標籤可以切換編輯全域定義 Global, 或預設 3 個空佈景的色彩搭配 A B 和 C, 如果需要更多, 請按最後的 + 標籤來新增色彩搭配, 最多可以有 26 個, 在下方展開區段可以編輯各種元件的佈景樣式或全域樣式, 包含字型色彩圓角圖示和陰影等樣式當我們在左邊區段更改樣式, 可以馬上在右邊顯示各種元件的預覽結果, 標題文字 A 是對應色彩搭配 A 的元件預覽結果 ;B 就是 B;C 就是 C, 以此類推, 捲動視窗就可以在下方看到標題文字 C 的預覽結果使用 ThemeRoller 建立自訂佈景現在, 我們就可以使用 ThemeRoller 建立 jquery Mobile 的自訂佈景, 並且在完成後下載自訂佈景的樣式檔案選擇色彩在 ThemeRoller 建立自訂佈景的最重要工作是選擇色彩,ThemeRoller 可以使用三種方式來選擇色彩, 如下所示 : 3-30

29 建立 jquery Mobile 程式與佈景 Chapter 03 方法一 : 使用右上方調色盤選擇色彩, 然後就可以在下方調整亮度與飽和度, 我們只需拖拉色塊至左邊色彩樣式的欄位上, 就可以更改色彩, 如下圖所示 : 方法二 : 長按左邊色彩樣式欄位, 就可以顯示圓形的色彩選擇器來選擇色彩, 如右圖所示 : 方法三 : 請打開左上方 Inspector 開闢, 就可以直接拖拉上方色塊至下方預覽元件來更改指定元件的色彩, 如右圖所示 : 3-31

背景色彩框線和陰影 ; Corner Radii 調整圓角的弧度; Icon 調整圖示色彩; Box Shadow 調整方框陰影編輯指定色彩搭配的樣式在

30 Part II 客戶端 jquery Mobile 建立使用介面編輯全域定義的樣式在左上方選 Global 標籤, 可以編輯全域定義樣式, 這是套用在所有不同色彩搭配的共同樣式, 如右圖所示 : 在下方展開 Font Family 可以編輯字型; Active State 更改作用中狀態的文字色彩背景色彩框線和陰影 ; Corner Radii 調整圓角的弧度; Icon 調整圖示色彩; Box Shadow 調整方框陰影編輯指定色彩搭配的樣式在 Global 標籤之後是預設至少 3 種 ; 最多 26 種色彩搭配的 a~z, 只需選擇上方大寫英文字母標籤, 就可以切換編輯指定字母的色彩搭配, 如右圖所示 : 3-32

31 建立 jquery Mobile 程式與佈景 Chapter 03 按最後 + 標籤可以新增色彩搭配, 在選擇後, 請展開下方各區段來編輯工具列內文按鈕等元件的樣式下載自訂佈景在完成自訂佈景的樣式編輯後, 我們可以下載自訂佈景的壓縮檔案, 如下圖所示 : 點選上方 Download 鈕, 可以看到 Download Theme 對話方塊 3-33

Part II 客戶端 jquery Mobile 建立使用介面在右上角 Theme Name 欄輸入自訂佈景名稱, 以此例為 my-customtheme, 按 Download Zip 鈕下載 ZIP 格式的自訂佈景檔自訂佈景檔案的內容在成功下載 ZIP 格式的自訂佈景檔後, 以此例是名為 jquery-mobiletheme-022657-0.

32 Part II 客戶端 jquery Mobile 建立使用介面在右上角 Theme Name 欄輸入自訂佈景名稱, 以此例為 my-customtheme, 按 Download Zip 鈕下載 ZIP 格式的自訂佈景檔自訂佈景檔案的內容在成功下載 ZIP 格式的自訂佈景檔後, 以此例是名為 jquery-mobiletheme zip 的檔案, 在解壓檔案至本章目錄後, 可以看到 themes 子資料夾和 index.html 範例檔案, 請開啟 themes 子資料夾, 如下圖所示 : 上述 my-custom-theme.min.css 是我們建立自訂佈景的 CSS 樣式檔案, 名稱是在下載時輸入的佈景名稱, images 資料夾是圖示檔在 jquery Mobile 程式使用自訂佈景在 jquery Mobile 程式使用自訂佈景, 除了自訂佈景的外部 CSS 檔案外, 還需要 jquery.mobile.structure-x.x.min.css, 其中 x.x 是版本 ( 在 jquery Mobile 下載檔案中 ), 在 jquery Mobie 程式需要使用它來取代預設佈景的外部 CSS 檔案, 如下所示 : <link rel="stylesheet" href="my-custom-theme.min.css"> <link rel="stylesheet" href="jquery.mobile.structure.min.css"> <script src="jquery.min.js"></script> <script src="jquery.mobile.min.js"></script> 3-34

33 建立 jquery Mobile 程式與佈景 Chapter 03 上述 HTML 標籤碼的第 1 個 <link> 標籤是連接自訂佈景的外部 CSS 樣式檔案, 第 2 個是已更名的 jquery.mobile.structure.min.css, 如下圖所示 : jquery Mobile 程式 :Ch3_6_4.html jquery Mobile 程式是修改 Ch3_4.html, 改用上一節建立的自訂佈景, 其自訂樣式的顯示結果, 首先是 iphone Simulator, 如下圖所示 : 3-35

34 Part II 客戶端 jquery Mobile 建立使用介面 Opera Mobile Emulator 的顯示結果, 如右圖所示 : 程式內容 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>ch3_6_4.html</title> 07: <link rel="stylesheet" href="my-custom-theme.min.css"> 08: <link rel="stylesheet" href="jquery.mobile.structure.min.css"> 09: <script src="jquery.min.js"></script> 10: <script src="jquery.mobile.min.js"></script> 11: </head> 12: <body> 13: <div data-role="page"> 14: <div data-role="header" data-theme="a"> 15: <h1>mobile Web 開發 </h1> 16: </div> 17: <div data-role="content" data-theme="b"> 18: <p>php 支援 Mobile Web 的跨行動裝置網站開發, 19: 並且全面擁抱 Open Source 的當紅網頁技術, 例如 : 20: jquery 函數庫和 jquery Mobile 框架, 21: 可以幫助我們建立跨平台行動裝置的網站 </p> 22: </div> 23: <div data-role="footer" data-theme="c"> 24: <h1> 製作者 : 陳會安 </h1> 25: </div> 26: </div> 27: </body> 28: </html> 程式說明第和 23 列 : 使用 data-theme 屬性值 a b 和 c 來分別套用佈景色彩搭配 a b 和 c 3-36

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 建立使用介面