Chapter 2 jQuery Mobile

Report
Chapter 2
jQuery Mobile
JQUERY & JQUERY MOBILE
針對行動裝置做過優化的一組Javascript與css框架
 搭配HTML5
 IE10以上、Chrome、Firefox等瀏覽器才支援
 可用於開發Web App (相對於原生Native App)
 使用宣告式定義,開發簡單

需要的東西
 jQuery

http://jquery.com/download/
 jQuery

Library
Mobile Library
http://jquerymobile.com/download/
JQUERY

MOBILE 的檔案
jQuery 函數庫的 JavaScript 程式檔
<script src="jquery-1.8.3.min.js"></script>

jQuery Mobile 核心 JavaScript 程式檔
<script src="jquery.mobile-1.2.1.min.js"></script>

jQuery Mobile 核心 CSS 外部樣式檔
<link rel="stylesheet" href="jquery.mobile-1.2.1.min.css" />

jQuery Mobile 布景的客製化樣式檔(選項)
<link rel="stylesheet" href="my-custom-theme.min.css">
使用 CDN

Content Delivery Network

將資料存放在網路系統的多個電腦節點,加速資料存取
<link rel="stylesheet"
href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css"
/>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile1.3.2.min.js"></script>
測試工具
OPERA MOBILE EMULATOR

http://www.opera.com/developer/tools/mobile/
下一步就可以安裝完成
可以選手機種類
HTML5畫面基本組成
加入JQUERY與JQUERY MOBILE
加上手機專屬設定
Viewport表示這頁是給手機讀的
寬度用手機現有寬度
預設的縮放大小是原大小
加入Viewport前
加入Viewport後
加入內容

jQuery頁面組成
HTML5網頁
<head>
<body>
<div data-role=page>
<div datarole=header>
<div datarole=content>
<div data-role=footer>
jQuery控制的部份
在div上直接給定義
其他都是html語法
JQUERY PAGE
加上HTML內容後
測試看看
自動就可以縮放
如果拿掉VIEWPORT與JQUERY
有
無
練習1:多個頁面切換
頁面1
Id=home
頁面2
Id=intro
測試
練習2:跳到不同HTML或是外部網頁

當然可以
就是一般A的寫法
測試
加上回前頁的功能
只要在要有回前頁的<div data-role=“page” 內加上data-add-back-btn=“true” 就可以
測試
更改回前頁文字
再加上 data-back-btn-text=“回前頁” 就可以
測試
外部網頁
在a 內加上 data-rel="external"
跳出去就不會有回前頁了!
測試
把頁面變成彈出視窗
把第二頁變成彈出視窗
測試
自動會有x
按鈕
預設就是有圓角的
 可以把a轉成按鈕
 原來的<input type=button>也是

將A改成BUTTON
結果
加上DATA-INLINE=TRUE就變成同一列
加上圖示
一樣給data-icon就可以加
上圖示
Data-iconpos可以決定圖顯
示的位置
left
right
top
bottom
在HEADER與FOOTER加上導覽列
同樣的東西複製到data-role=footer 就可以用
測試
加入預選
加入內定的圖示
練習3: 自訂圖示導覽列
自訂的圖示
先將圖定義到CSS內
定義時加上ui-icon
使用時是使用ui-icon後面的名稱
固定頁尾在畫面的下方
固定頁尾在畫面的下方
顯示資料列表
用ul或ol都可以
 加上data-role="listview"

測試
一樣加上a就可以跳頁面
加上A,自動就會有向右箭頭
加上標題與內縮變成獨立區塊
加上圖片
listview
練習4:含縮圖清單檢視(1/2)
練習4:含縮圖清單檢視(2/2)
可收合區塊(COLLAPSIBLE BLOCK)
版面格點(GRID)
版面格點(GRID)
顯示面板(REVEAL
PANEL)
顯示面板(REVEAL PANEL)
加上DATA-THEME到標題
THEMEROLLER線上工具的基礎

ThemeRoller線上工具是源於jQuery UI的佈景編輯
工具,可以直接使用拖拉方式更改元件樣式,幫助
我們快速建立自訂佈景,其網址如下所示:

ThemeRoller:http://jquerymobile.com/themeroller
使用THEMEROLLER建立自訂佈景選擇色彩(方法一)

ThemeRoller提供三種方式來選擇色彩,第一種是在
右上方調色盤選擇色彩,和在下方調整亮度與飽和
度,我們只需拖拉色塊至左邊色彩樣式的欄位上,
就可以更改色彩,如下圖所示:
使用THEMEROLLER建立自訂佈景選擇色彩(方法二)

第二種方法是長按左邊色彩樣式欄位,可以顯示圓
形的色彩選擇器來選擇色彩,如下圖所示:
使用THEMEROLLER建立自訂佈景選擇色彩(方法三)

第三種方法是最直覺的方式,請打開左邊上方的
【Inspector】開闢,然後就可以直接拖拉上方色塊
至下方預覽元件來更改指定元件的色彩,如下圖所
示:
使用THEMEROLLER建立自訂佈景編輯全域定義的樣式

在左上方選【Global】標籤,
就可以編輯全域定義樣式,
這是套用在所有不同色彩搭
配的共用樣式,如右圖所示:
使用THEMEROLLER建立自訂佈景編輯色彩搭配的樣式

在【Global】標籤之後是
至少3種;最多26種色彩搭
配的a~z,只需選擇大寫英
文字母標籤,就可以切換
編輯指定字母的色彩搭配,
如右圖所示:
使用THEMEROLLER建立自訂佈景下載自訂佈景

在完成自訂佈景的樣式編輯後,就可以下載自訂佈
景的檔案,如下圖所示:
使用THEMEROLLER建立自訂佈景自訂佈景檔案的內容

在成功下載ZIP格式的自訂佈景檔後,以此例是名為
【jquery-mobile-theme-022657-0.zip】的檔案,在
解壓檔案至本章目錄後,可以看到「themes」子資
料夾和index.html範例檔案,請開啟「themes」子
資料夾,如下圖所示:
在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>
在JQUERY MOBILE程式使用自訂佈景-站台結
構與執行結果
練習5:自訂佈景及套用樣版(1/2)
練習5:自訂佈景及套用樣版(2/2)

similar documents