Chapter 2 jQuery Mobile
Download
Report
Transcript Chapter 2 jQuery Mobile
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)