建立jQuery Mobile程式與佈景

Download Report

Transcript 建立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的檔案與支援平台-支援平台
作業系統平台
平台版本
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
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屬性提供一些參數來定義進一步尺寸和
縮放資訊，相關參數說明如下表所示：
參數
說明
width
指定瀏覽器顯示的寬度，屬性值device-width是行動裝置的
螢幕寬度，也可以指定數值的絕對寬度
height
指定瀏覽器顯示的高度，屬性值device-height是行動裝置的
螢幕高度，也可以指定數值的絕對高度
initial-scale
指定畫面是使用多少倍viewport來顯示，1就是指1個
viewport顯示螢幕的像素（即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、medium-dpi
和low-dpi分別是高、中和低dpi，也可以指定70~400
之間的值
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.mobile1.2.0.min.css" />
<script src="http://code.jquery.com/jquery1.8.2.min.js"></script>
<script
src="http://code.jquery.com/mobile/1.2.0/jquery.mobile1.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=devicewidth, 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是使用標記驅動（Markupdriven）來設定與配置頁面，使用HTML5的datarole屬性定義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 datarole="header">
頁面的標題列，我們可以在此元素
建立巡覽列
<div datarole="content">
頁面實際的內容
<div datarole="footer">
頁面的註腳列，我們也可以在此元
素建立巡覽列，如果加上dataposition="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程式使用自訂佈景-站台結構
與執行結果