建立jQuery Mobile程式與佈景

3 建立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的佈景

3-1 jQuery Mobile的基礎 • 3-1-1 認識jQuery Mobile • 3-1-2 jQuery Mobile的檔案與支援平台

3-1-1 認識jQuery Mobile • jQuery Mobile是由jQuery專案小組開發，在2011年11月推出1.0正式版，它是一套建立在jQuery函數庫之上的使用介面系統（User Interface System，UI），一個觸控最佳化的Web框架，提供眾多最佳化觸控操作的使用介面元素，可以讓我們不用撰寫一行JavaScript程式碼，就輕鬆使用HTML標籤建立跨行動裝置網站或Mobile Web應用程式的使用介面。

3-1-2 jQuery Mobile的檔案與支援平台-檔案 jQuery Mobile所需的檔案 • 在jQuery Mobile的HTML5網頁文件需要內嵌JavaScript函數庫和CSS外部樣式，其檔案內容如下所示： • jQuery函數庫的JavaScript程式檔。 • jQuery Mobile核心JavaScript程式檔。 • jQuery Mobile核心CSS外部樣式檔。 • jQuery Mobile佈景的外部樣式檔（選項）。

3-1-2 jQuery Mobile的檔案與支援平台-支援平台

3-2 行動網路瀏覽器與Viewport • 3-2-1 行動網路瀏覽器與模擬器 • 3-2-2 Meta標籤Viewport • 3-2-3 瀏覽Mobile網頁

3-2-1 行動網路瀏覽器與模擬器 • 目前桌上型電腦的主要瀏覽器有：Internet Explorer、Firefox、Safari、Opera和Chrome等，在Mobile平台的行動網路瀏覽器也一樣有很多種，除了各平台內建的行動網路瀏覽器外，還有一些桌上型瀏覽器的Mobile版，例如：Opera和Firefox。 • 基本上，行動裝置的行動網路瀏覽器和桌上型瀏覽器之間的最大差異在行動裝置的螢幕尺寸比較小，目前巿面上行動裝置平台有Apple的iPhone iOS、Google的Android和Windows Phone等平台，其內建行動網路瀏覽器都支援最新HTML5、CSS3和JavaScript。

3-2-2 Meta標籤Viewport-語法 • Meta標籤Viewport最早出現在Apple公司iPhone手機的Safari瀏覽器，可以正確告訴行動瀏覽器所看到的網頁尺寸，如果沒有此Meta標籤Viewport，行動瀏覽器會認為它是在瀏覽一頁桌上型電腦看到的網頁，如下所示： <meta name="viewport" content="width=device-width, initial-scale=1"> • 上述<meta>標籤的name屬性值是viewport，可以告訴使用WebKit瀏覽器引擎的行動瀏覽器，和需要顯示的頁面尺寸為何？

3-2-2 Meta標籤Viewport-參數1 • 在content屬性提供一些參數來定義進一步尺寸和縮放資訊，相關參數說明如下表所示：

3-2-2 Meta標籤Viewport-參數2 • 在Android作業系統的內建行動瀏覽器支援額外參數，其說明如下表所示：

3-2-2 Meta標籤Viewport-範例 • 現在，我們就可以建立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個螢幕像素。

3-2-3 瀏覽Mobile網頁 • 現在，我們就可以使用iPhone Simulator和Opera Mobile Emulator來瀏覽Mobile網頁。

3-3 下載、安裝與使用jQuery Mobile • 3-3-1 下載jQuery與jQuery Mobile • 3-3-2 安裝jQuery Mobile至WebMatrix站台 • 3-3-3 在HTML網頁使用jQuery Mobile

3-3-1 下載jQuery與jQuery Mobile-下載 下載jQuery Mobile • jQuery Mobile可以在官方網站免費下載，在本書使用的是1.2.0版，其下載網址如下所示： • jQuery Mobile：http://jquerymobile.com/download/ 下載jQuery函數庫 • jQuery函數庫可以在官方網站免費下載，jQuery Mobile建議使用的版本為1.6.4或1.8.2，在本書是使用1.8.2版，其下載網址如下所示： • jQuery函數庫：http://jquery.com/download/

3-3-1 下載jQuery與jQuery Mobile-檔案 • 在jQuery Mobile下載檔案包含所需的.js和.css檔案。基本上，建立jQuery Mobile程式所需的檔案和目錄，如下所示： • 「images」目錄：jQuery Mobile使用的圖示檔。 • jquery.mobile-1.2.0.min.css：jQuery Mobile的CSS樣式檔案。 • jquery.mobile-1.2.0.min.js：jQuery Mobile的外部JavaScript程式檔案。

3-3-2 安裝jQuery Mobile至WebMatrix站台 • 請將jQuery.mobile.min.css、jquery.mobile.min.js檔案、「image」目錄和jQuery函數庫的jquery.min.js，都加入WebMatrix站台Ch03的根目錄，就完成jQuery Mobile的安裝，如右圖所示：

3-3-3 在HTML網頁使用jQuery Mobile-1 使用下載的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-3-3 在HTML網頁使用jQuery Mobile-2 使用CDN • CDN是將資料存放在網路系統的多個電腦節點，以加速資料存取，換句話說，我們並不用下載jQuery和jQuery Mobile程式碼檔案，可以直接使用儲存在CDN的程式碼檔案，如下所示： <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" /> <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script> <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>

3-4 建立第一個jQuery Mobile程式-步驟一 步驟一：HTML5的DOCTYPE • jQuery Mobile程式是一個HTML5網頁，所以在第1行需要加上HTML5的DOCTYPE，如下所示： <!DOCTYPE html>

3-4 建立第一個jQuery Mobile程式-步驟二 步驟二：<meta>標籤指定編碼和縮放比例 • 在HTML的<head>區塊需要加上<meta>標籤指定編碼和行動裝置的尺寸與縮放比例，如下所示： <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> • 第1個<meta>標籤指定編碼為utf-8，以便可以正確顯示中文內容，第2個<meta>標籤指定瀏覽器的寬度和縮放比例。

3-4 建立第一個jQuery Mobile程式-步驟三 步驟三：含括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>

3-4 建立第一個jQuery Mobile程式-步驟四 步驟四：建立頁面 • 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>ASP.NET支援Mobile Web的跨行動裝置網站開發， ...</p> </div> <div data-role="footer"> <h1>製作者: 陳會安</h1> </div> </div>

3-4 建立第一個jQuery Mobile程式-步驟五 步驟五：預覽網頁內容

3-5 jQuery Mobile頁面結構 • 3-5-1 jQuery Mobile框架架構 • 3-5-2 單一頁面結構與角色

3-5-1 jQuery Mobile框架架構-說明 • jQuery Mobile框架是使用簡單和功能強大的方式來定義網頁內容，即頁面（Pages），並且提供Ajax技術的巡覽系統，可以建立動畫效果的頁面轉換，事實上，框架架構的基本單位就是頁面，jQuery Mobile是使用卡片觀念來建立頁面結構，如同一盒卡片，盒子是HTML網頁文件，每一張卡片就是一個扮演page角色的<div>標籤。

3-5-1 jQuery Mobile框架架構-圖例

3-5-2 單一頁面結構與角色-單一頁面結構(說明) • 對於Android、iOS、Windows Phone和webOS等行動作業系統平台來說，jQuery Mobile在顯示頁面時會試圖捲動頁面來隱藏上方URL位址欄位，其目的是為了建立更像原生應用程式的使用介面。 • 因為jQuery Mobile是使用標記驅動（Markup-driven）來設定與配置頁面，使用HTML5的data-role屬性定義div元素是什麼，例如：頁面屬性值是page，單一頁面的<div>標籤包含3個子<div>標籤的區段，其屬性值分別為header、content和footer。

3-5-2 單一頁面結構與角色-單一頁面結構(區段) <div data-role="page"> <div data-role="header"> <h1>Mobile Web開發</h1> </div> <div data-role="content"> <p>ASP.NET支援Mobile Web的跨行動裝置網站開發， … 可以幫助我們建立跨平台行動裝置的網站。</p> </div> <div data-role="footer"> <h1>製作者: 陳會安</h1> </div> </div>

3-5-2 單一頁面結構與角色-單一頁面結構(區段說明) • 各<div>標籤區段的說明，如下表所示：

3-5-2 單一頁面結構與角色-角色屬性

3-6 jQuery Mobile的佈景 • 3-6-1 jQuery Mobile佈景的基礎 • 3-6-2 ThemeRoller線上工具的基礎 • 3-6-3 使用ThemeRoller建立自訂佈景 • 3-6-4 在jQuery Mobile程式使用自訂佈景

3-6-1 jQuery Mobile佈景的基礎-說明 • jQuery Mobile佈景是一組字型、文字色彩、背景色彩和漸層的CSS樣式，可以定義至少5種（a~e）；至多26種（a~z）不同的色彩搭配。 • 基本上，每一個jQuery Mobile佈景除了使用英文字母a~z代表不同色彩搭配外，佈景還擁有一些全域定義（Global Definitions），可以使用在每一種色彩搭配的共同樣式，如下所示： • 文字和方框特效，例如：陰影和圓角。 • jQuery Mobile框架按鈕等元件取得焦點顯示的樣式。

3-6-1 jQuery Mobile佈景的基礎-預設佈景 • jQuery Mobile預設佈景只提供5種色彩搭配，即字母a~e，如下表所示：

3-6-2 ThemeRoller線上工具的基礎 • ThemeRoller線上工具是源於jQuery UI的佈景編輯工具，可以直接使用拖拉方式更改元件樣式，幫助我們快速建立自訂佈景，其網址如下所示： • ThemeRoller：http://jquerymobile.com/themeroller

3-6-3 使用ThemeRoller建立自訂佈景-選擇色彩(方法一) • ThemeRoller提供三種方式來選擇色彩，第一種是在右上方調色盤選擇色彩，和在下方調整亮度與飽和度，我們只需拖拉色塊至左邊色彩樣式的欄位上，就可以更改色彩，如下圖所示：

3-6-3 使用ThemeRoller建立自訂佈景-選擇色彩(方法二) • 第二種方法是長按左邊色彩樣式欄位，可以顯示圓形的色彩選擇器來選擇色彩，如下圖所示：

3-6-3 使用ThemeRoller建立自訂佈景- 選擇色彩(方法三) • 第三種方法是最直覺的方式，請打開左邊上方的【Inspector】開闢，然後就可以直接拖拉上方色塊至下方預覽元件來更改指定元件的色彩，如下圖所示：

3-6-3 使用ThemeRoller建立自訂佈景- 編輯全域定義的樣式 • 在左上方選【Global】標籤，就可以編輯全域定義樣式，這是套用在所有不同色彩搭配的共用樣式，如右圖所示：

3-6-3 使用ThemeRoller建立自訂佈景- 編輯色彩搭配的樣式 • 在【Global】標籤之後是至少3種；最多26種色彩搭配的a~z，只需選擇大寫英文字母標籤，就可以切換編輯指定字母的色彩搭配，如右圖所示：

3-6-3 使用ThemeRoller建立自訂佈景- 下載自訂佈景 • 在完成自訂佈景的樣式編輯後，就可以下載自訂佈景的檔案，如下圖所示：

3-6-3 使用ThemeRoller建立自訂佈景-自訂佈景檔案的內容 • 在成功下載ZIP格式的自訂佈景檔後，以此例是名為【jquery-mobile-theme-022657-0.zip】的檔案，在解壓檔案至本章目錄後，可以看到「themes」子資料夾和index.html範例檔案，請開啟「themes」子資料夾，如下圖所示：

3-6-4 在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-6-4 在jQuery Mobile程式使用自訂佈景-站台結構與執行結果

建立jQuery Mobile程式與佈景