Embed Size (px)
DESCRIPTION
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. - PowerPoint PPT Presentation
Citation preview
建立 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
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 的檔案與支援平台 - 支援平台
作業系統平台 平台版本iOS 3.2~6.0 版
Android 2.1~2.3 、 3.1 、 4.0 、 4.1 版Windows Phone 7.0~7.5 版BlackBerry OS 6.0~7.0 版、 Playbook 1.0-2.0 版Palm WebOS 1.4 、 2.0 、 3.0 版
Kindle 3 and Fire
Samsung bada 2.0 版Meego 1.2 版
Opera Mobile 11.5~12
Symbian Nokia N8 、 C7 、 N97 版本（不支援 Ajax ）
3-2 行動網路瀏覽器與 Viewport
• 3-2-1 行動網路瀏覽器與模擬器 • 3-2-2 Meta 標籤 Viewport
• 3-2-3 瀏覽 Mobile 網頁
3-2-1 行動網路瀏覽器與模擬器• 目前桌上型電腦的主要瀏覽器有： Internet Explo
rer 、 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, in
itial-scale=1">
• 上述 <meta> 標籤的 name 屬性值是 viewport ，可以告訴使用 WebKit 瀏覽器引擎的行動瀏覽器，和需要顯示的頁面尺寸為何？
3-2-2 Meta 標籤 Viewport- 參數 1
• 在 content 屬性提供一些參數來定義進一步尺寸和縮放資訊，相關參數說明如下表所示：參數 說明width 指定瀏覽器顯示的寬度，屬性值 device-width 是行動裝置的
螢幕寬度，也可以指定數值的絕對寬度height 指定瀏覽器顯示的高度，屬性值 device-height 是行動裝置
的螢幕高度，也可以指定數值的絕對高度initial-scale 指定畫面是使用多少倍 viewport 來顯示， 1 就是指 1 個 vie
wport 顯示螢幕的像素（即 1 個點）等於 1 個螢幕像素user-scalable 是否允許使用者調整螢幕縮放，值 1 、 yes 或 true 表示允許；
0 、 no 或 false 表示不允許minimum-scale 指定可以使用的最小縮放，值的範圍是 0~10
maximum-scale 指定可以使用的最大縮放，值的範圍是 0~10
3-2-2 Meta 標籤 Viewport- 參數 2
• 在 Android 作業系統的內建行動瀏覽器支援額外參數，其說明如下表所示：參數 說明
target-densityDpi 參數可以告訴行動裝置此 Mobile 網頁設計的 dpi（ Dots per Inch ，每英吋的像數），值 device-dpi是符合行動裝置螢幕的 dpi ，值 high-dpi 、 mediu
m-dpi 和 low-dpi 分別是高、中和低 dpi ，也可以指定 70~400 之間的值
3-2-2 Meta 標籤 Viewport- 範例• 現在，我們就可以建立 Ch3_2_2.html ，在 <hea
d> 區塊加上 Meta 標籤 Viewport 來建立 Mobile網頁，如下所示：<head><meta charset="utf-8"/><meta name="viewport" content="width=device-width, in
itial-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"></s
cript><script src="http://code.jquery.com/mobile/1.2.0/jquery.mob
ile-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> 標籤區段的說明，如下表所示： <div>標籤的區段 說明
<div data-role="header">
頁面的標題列，我們可以在此元素建立巡覽列
<div data-role="content">
頁面實際的內容
<div data-role="footer">
頁面的註腳列，我們也可以在此元素建立巡覽列，如果加上 data-
position="fixed" 屬性，可以讓註腳列永遠顯示在底部
3-5-2 單一頁面結構與角色 -角色屬性data-role屬性值 說明
page 定義頁面，這是 jQuery Mobile 顯示使用介面的基本單位header 定義頁面的標題列content 定義頁面的內容footer 定義頁面的註腳列dialog 定義對話方塊的頁面navbar 定義巡覽工具列button 產生按鈕介面元件
controlgroup 群組介面元素成水平或垂直排列listview 建立 ListView 元件
collapsible 建立可摺疊內容collapsible-set 建立手風琴選單fieldcontain 表單欄位的容器
slider 建立滑動軸nojs 在支援 jQuery Mobile 瀏覽器隱藏元素
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 ，如下表所示：字母 預設佈景的色彩 說明
a 黑色 工具列的預設樣式，最高等級的佈景b 藍色 次高等級的佈景c 銀色 大部分情況使用的佈景d 灰色 替代的次高等級佈景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 Fundamentals) Fundamentos de jQuery191.13.234.92/.../Arquivos/LPA/JQuery/apostilas/apostila-jquery-br.pdf · Fundamentos de jQuery (jQuery Fundamentals) Rebecca Murphey []](https://img.pdfslide.tips/doc/110x75/6077fbbcb4f4d25f0363d510/jquery-fundamentals-fundamentos-de-jquery1911323492arquivoslpajqueryapostilasapostila-jquery-brpdf.jpg)
