Download presentation
Presentation is loading. Please wait.
Published by骥 钭 Modified 8年之前
2
建立 jQuery Mobile 程式與佈 景 3-1 jQuery Mobile 的基礎3-1 jQuery Mobile 的基礎 3-2 行動網路瀏覽器與 Viewport3-2 行動網路瀏覽器與 Viewport 3-3 下載、安裝與使用 jQuery Mobile3-3 下載、安裝與使用 jQuery Mobile 3-4 建立第一個 jQuery Mobile 程式3-4 建立第一個 jQuery Mobile 程式 3-5 jQuery Mobile 頁面結構3-5 jQuery Mobile 頁面結構 3-6 jQuery Mobile 的佈景3-6 jQuery Mobile 的佈景 3
3
3-1 jQuery Mobile 的基礎 3-1-1 認識 jQuery Mobile 3-1-2 jQuery Mobile 的檔案與支援平台
4
3-1-1 認識 jQuery Mobile jQuery Mobile 是由 jQuery 專案小組開發, 在 2011 年 11 月推出 1.0 正式版,它是一套建 立在 jQuery 函數庫之上的使用介面系統 ( User Interface System , UI ),一個觸控 最佳化的 Web 框架,提供眾多最佳化觸控 操作的使用介面元素,可以讓我們不用撰 寫一行 JavaScript 程式碼,就輕鬆使用 HTML 標籤建立跨行動裝置網站或 Mobile Web 應用程式的使用介面。
5
3-1-2 jQuery Mobile 的檔案與支援平台 - 檔案 jQuery Mobile 所需的檔案 在 jQuery Mobile 的 HTML5 網頁文件需要內 嵌 JavaScript 函數庫和 CSS 外部樣式,其檔 案內容如下所示: –jQuery 函數庫的 JavaScript 程式檔。 –jQuery Mobile 核心 JavaScript 程式檔。 –jQuery Mobile 核心 CSS 外部樣式檔。 –jQuery Mobile 佈景的外部樣式檔(選項)。
6
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 版 Kindle3 and Fire Samsung bada 2.0 版 Meego 1.2 版 Opera Mobile11.5~12 Symbian Nokia N8 、 C7 、 N97 版本(不支援 Ajax )
7
3-2 行動網路瀏覽器與 Viewport 3-2-1 行動網路瀏覽器與模擬器 3-2-2 Meta 標籤 Viewport 3-2-3 瀏覽 Mobile 網頁
8
3-2-1 行動網路瀏覽器與模擬器 目前桌上型電腦的主要瀏覽器有: Internet Explorer 、 Firefox 、 Safari 、 Opera 和 Chrome 等, 在 Mobile 平台的行動網路瀏覽器也一樣有很多種, 除了各平台內建的行動網路瀏覽器外,還有一些 桌上型瀏覽器的 Mobile 版,例如: Opera 和 Firefox 。 基本上,行動裝置的行動網路瀏覽器和桌上型瀏 覽器之間的最大差異在行動裝置的螢幕尺寸比較 小,目前巿面上行動裝置平台有 Apple 的 iPhone iOS 、 Google 的 Android 和 Windows Phone 等平台, 其內建行動網路瀏覽器都支援最新 HTML5 、 CSS3 和 JavaScript 。
9
3-2-2 Meta 標籤 Viewport- 語法 Meta 標籤 Viewport 最早出現在 Apple 公司 iPhone 手機的 Safari 瀏覽器,可以正確告訴行動瀏覽器所 看到的網頁尺寸,如果沒有此 Meta 標籤 Viewport , 行動瀏覽器會認為它是在瀏覽一頁桌上型電腦看 到的網頁,如下所示: 上述 標籤的 name 屬性值是 viewport ,可以 告訴使用 WebKit 瀏覽器引擎的行動瀏覽器,和需 要顯示的頁面尺寸為何?
10
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
11
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 之間的值
12
3-2-2 Meta 標籤 Viewport- 範例 現在,我們就可以建立 Ch3_2_2.html ,在 區塊加上 Meta 標籤 Viewport 來建立 Mobile 網頁, 如下所示: Ch3_2_2.html 上述 content 屬性的參數指定使用行動裝置的螢幕 寬度, 1 個 viewport 顯示螢幕的像素等於 1 個螢幕 像素。
13
3-2-3 瀏覽 Mobile 網頁 現在,我們就可以使用 iPhone Simulator 和 Opera Mobile Emulator 來瀏覽 Mobile 網頁。
14
3-3 下載、安裝與使用 jQuery Mobile 3-3-1 下載 jQuery 與 jQuery Mobile 3-3-2 安裝 jQuery Mobile 至 WebMatrix 站台 3-3-3 在 HTML 網頁使用 jQuery Mobile
15
3-3-1 下載 jQuery 與 jQuery Mobile- 下載 下載 jQuery Mobile jQuery Mobile 可以在官方網站免費下載,在本書 使用的是 1.2.0 版,其下載網址如下所示: –jQuery Mobile : http://jquerymobile.com/download/ http://jquerymobile.com/download/ 下載 jQuery 函數庫 jQuery 函數庫可以在官方網站免費下載, jQuery Mobile 建議使用的版本為 1.6.4 或 1.8.2 ,在本書是 使用 1.8.2 版,其下載網址如下所示: –jQuery 函數庫: http://jquery.com/download/ http://jquery.com/download/
16
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 程式檔案。
17
3-3-2 安裝 jQuery Mobile 至 WebMatrix 站台 請將 jQuery.mobile.min.css 、 jquery.mobile.min.js 檔案、 「 image 」目錄和 jQuery 函數 庫的 jquery.min.js ,都加入 WebMatrix 站台 Ch03 的根目 錄,就完成 jQuery Mobile 的 安裝,如右圖所示:
18
3-3-3 在 HTML 網頁使用 jQuery Mobile-1 使用下載的 jQuery Mobile 程式碼檔案 當我們將 jQuery Mobile 相關檔案和目錄置於 HTML 網頁的 同一個資料夾後,就可以在 HTML 網頁 標籤的 子標籤含括外部 JavaScript 程式碼檔案的 jQuery 函 數庫和 jQuery Mobile ,如下所示: ……
19
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" />
20
3-4 建立第一個 jQuery Mobile 程式 - 步驟一 步驟一: HTML5 的 DOCTYPE jQuery Mobile 程式是一個 HTML5 網頁,所 以在第 1 行需要加上 HTML5 的 DOCTYPE , 如下所示:
21
3-4 建立第一個 jQuery Mobile 程式 - 步驟二 步驟二: 標籤指定編碼和縮放比例 在 HTML 的 區塊需要加上 標籤指定 編碼和行動裝置的尺寸與縮放比例,如下所示: 第 1 個 標籤指定編碼為 utf-8 ,以便可以正 確顯示中文內容,第 2 個 標籤指定瀏覽器 的寬度和縮放比例。
22
3-4 建立第一個 jQuery Mobile 程式 - 步驟三 步驟三:含括 jQuery 和 jQuery Mobile 程式碼 檔案和樣式表 將相關.js 和.css 檔案和「 image 」目錄都複製至 Ch3_4.html 的同一個資料夾後,就可以在 區塊使用 和 標籤含括 jQuery 和 jQuery Mobile 程式碼檔案和樣式表,如下所示:
23
3-4 建立第一個 jQuery Mobile 程式 - 步驟四 步驟四:建立頁面 jQuery Mobile 是使用標記驅動( Markup-driven )來設定 與配置頁面,我們是使用 HTML5 的 data-role 屬性定義 div 元素是什麼,如下所示: Mobile Web 開發 ASP.NET 支援 Mobile Web 的跨行動裝置網站開發,... 製作者 : 陳會安
24
3-4 建立第一個 jQuery Mobile 程式 - 步驟五 步驟五:預覽網頁內容
25
3-5 jQuery Mobile 頁面結構 3-5-1 jQuery Mobile 框架架構 3-5-2 單一頁面結構與角色
26
3-5-1 jQuery Mobile 框架架構 - 說明 jQuery Mobile 框架是使用簡單和功能強大的方式 來定義網頁內容,即頁面( Pages ),並且提供 Ajax 技術的巡覽系統,可以建立動畫效果的頁面 轉換,事實上,框架架構的基本單位就是頁面, jQuery Mobile 是使用卡片觀念來建立頁面結構, 如同一盒卡片,盒子是 HTML 網頁文件,每一張 卡片就是一個扮演 page 角色的 標籤。
27
3-5-1 jQuery Mobile 框架架構 - 圖例
28
3-5-2 單一頁面結構與角色 - 單一頁面結構 ( 說明 ) 對於 Android 、 iOS 、 Windows Phone 和 webOS 等 行動作業系統平台來說, jQuery Mobile 在顯示頁 面時會試圖捲動頁面來隱藏上方 URL 位址欄位, 其目的是為了建立更像原生應用程式的使用介面。 因為 jQuery Mobile 是使用標記驅動( Markup- driven )來設定與配置頁面,使用 HTML5 的 data- role 屬性定義 div 元素是什麼,例如:頁面屬性值 是 page ,單一頁面的 標籤包含 3 個子 標籤的區段,其屬性值分別為 header 、 content 和 footer 。
29
3-5-2 單一頁面結構與角色 - 單一頁面結構 ( 區段 ) Mobile Web 開發 ASP.NET 支援 Mobile Web 的跨行動裝置網站開發, … 可以幫助我們建立跨平台行動裝置的網站。 製作者 : 陳會安
30
3-5-2 單一頁面結構與角色 - 單一頁面結構 ( 區段說明 ) 各 標籤區段的說明,如下表所示: 標籤的區段說明 頁面的標題列,我們可以在此元素 建立巡覽列 頁面實際的內容 頁面的註腳列,我們也可以在此元 素建立巡覽列,如果加上 data- position="fixed" 屬性,可以讓註腳 列永遠顯示在底部
31
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 瀏覽器隱藏元素
32
3-6 jQuery Mobile 的佈景 3-6-1 jQuery Mobile 佈景的基礎 3-6-2 ThemeRoller 線上工具的基礎 3-6-3 使用 ThemeRoller 建立自訂佈景 3-6-4 在 jQuery Mobile 程式使用自訂佈景
33
3-6-1 jQuery Mobile 佈景的基礎 - 說明 jQuery Mobile 佈景是一組字型、文字色彩、背景 色彩和漸層的 CSS 樣式,可以定義至少 5 種 ( a~e );至多 26 種( a~z )不同的色彩搭配。 基本上,每一個 jQuery Mobile 佈景除了使用英文 字母 a~z 代表不同色彩搭配外,佈景還擁有一些全 域定義( Global Definitions ),可以使用在每一 種色彩搭配的共同樣式,如下所示: – 文字和方框特效,例如:陰影和圓角。 –jQuery Mobile 框架按鈕等元件取得焦點顯示的樣式。
34
3-6-1 jQuery Mobile 佈景的基礎 - 預設佈景 jQuery Mobile 預設佈景只提供 5 種色彩搭配, 即字母 a~e ,如下表所示: 字母預設佈景的色彩說明 a 黑色工具列的預設樣式,最高等級的佈景 b 藍色次高等級的佈景 c 銀色大部分情況使用的佈景 d 灰色替代的次高等級佈景 e 黃色強調的佈景色彩
35
3-6-2 ThemeRoller 線上工具的基礎 ThemeRoller 線上工具是源於 jQuery UI 的佈景編 輯工具,可以直接使用拖拉方式更改元件樣式, 幫助我們快速建立自訂佈景,其網址如下所示: –ThemeRoller : http://jquerymobile.com/themeroller http://jquerymobile.com/themeroller
36
3-6-3 使用 ThemeRoller 建立自訂佈景 - 選擇色彩 ( 方法一 ) ThemeRoller 提供三種方式來選擇色彩,第一種 是在右上方調色盤選擇色彩,和在下方調整亮度 與飽和度,我們只需拖拉色塊至左邊色彩樣式的 欄位上,就可以更改色彩,如下圖所示:
37
3-6-3 使用 ThemeRoller 建立自訂佈景 - 選擇色彩 ( 方法二 ) 第二種方法是長按左邊色彩樣式欄位,可以顯示 圓形的色彩選擇器來選擇色彩,如下圖所示:
38
3-6-3 使用 ThemeRoller 建立自訂佈景 - 選擇色彩 ( 方法三 ) 第三種方法是最直覺的方式,請打開左邊上方的 【 Inspector 】開闢,然後就可以直接拖拉上方色 塊至下方預覽元件來更改指定元件的色彩,如下 圖所示:
39
3-6-3 使用 ThemeRoller 建立自訂佈景 - 編輯全域定義的樣式 在左上方選【 Global 】 標籤,就可以編輯全 域定義樣式,這是套 用在所有不同色彩搭 配的共用樣式,如右 圖所示:
40
3-6-3 使用 ThemeRoller 建立自訂佈景 - 編輯色彩搭配的樣式 在【 Global 】標籤 之後是至少 3 種;最 多 26 種色彩搭配的 a~z ,只需選擇大寫 英文字母標籤,就 可以切換編輯指定 字母的色彩搭配, 如右圖所示:
41
3-6-3 使用 ThemeRoller 建立自訂佈景 - 下載自訂佈景 在完成自訂佈景的樣式編輯後,就可以下載自訂 佈景的檔案,如下圖所示:
42
3-6-3 使用 ThemeRoller 建立自訂佈景 - 自訂佈景檔案的內容 在成功下載 ZIP 格式的自訂佈景檔後,以此例是名 為【 jquery-mobile-theme-022657-0.zip 】的檔案, 在解壓檔案至本章目錄後,可以看到「 themes 」 子資料夾和 index.html 範例檔案,請開啟 「 themes 」子資料夾,如下圖所示:
43
3-6-4 在 jQuery Mobile 程式使用自訂佈景 - 標 籤 在 jQuery Mobile 程式使用自訂佈景,除了自訂佈景的外部 CSS 檔案外,還需要 jquery.mobile.structure-x.x.min.css , 其中 x.x 是版本(在 jQuery Mobile 下載檔案中),在 jQuery Mobie 程式需要使用它來取代預設佈景的外部 CSS 檔案,如下所示:
44
3-6-4 在 jQuery Mobile 程式使用自訂佈景 - 站台結構 與執行結果
Similar presentations