狠狠撸

框架介紹與使用
www.ezoui.com

jQuery + Mobile
jQuery Mobile
=

这麼简单，大家都知道呀！

但是 jQuery Mobile 到底是什麼？能吃吗？

jQuery Mobile 的特色
支援響應式網頁
使用 jQuery 建構
具備完整的 UI 畫面
支援 HTML5
支援各種平台裝置
多樣的效果和變化
更簡捷的語法與輕量化的大小
精簡觸控和滑鼠事件
3

感受一下 jQuery Mobile
http://demos.jquerymobile.com/1.4.2/
5

認識了 jQuery Mobile 之后就让我们开始吧！

<head>
<title>jQuery Mobile</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a1/jquery.mobile.min.css" />
<script src=/EZoApp/jquery-mobile-36199159/"http:/code.jquery.com/jquery-1.4.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a1/jquery.mobile.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>header</h1>
</div>
<div class="ui-content">
<p>content</p>
</div>
<div data-role="footer">
<h4>footer</h4>
</div>
</div>
</body>
起
手
式
6

<div id="page1" data-role="page">
<div role="main" class="ui-content"></div>
</div>
</div>
</div>
一個 jQuery Mobile 通常會有多個 page
不過，只會顯示其中一頁
page 必須使用 id 進行區隔
page
7

page 使用 EZoApp 來體驗一下 page
http://goo.gl/EmXUY9
8

★ 使用 href ，直接切換到指定的 Page Id
★ 使用 data-transition 設定切換效果
★ 設定 data-rel=”back” 用同樣效果返回
page
切換效果
<a href="#pageID" data-transition="效果"></a>
★ 也可以使用 javascript 來做切換
★ $.mobile.changePage('#PageID');
★ $.mobile.changePage('#PageB' , {'transition':'效果'} );
9

● default：預設值 ( fade )
● fade：淡入淡出 ( 預設值 )
● flip：翻轉
● flow ：流動切換效果
● pop：彈出窗口顯示
● slide：左右滑動切換
● slidefade：左右滑動 + 淡入淡出切換
● slideup：由上而下滑動切換
● slidedown：由下而上滑動切換
● turn：轉向下一頁
● none：直接切換
page
切換效果
<a href="#pageID" data-transition="效果"></a>
範例：
http://goo.gl/xwIR0F
10

Button <a href="#" class="ui-btn">Anchor</a>
<button class="ui-btn">Button</button>
使用 class 產生按鈕樣式
<a href="#" class="ui-btn ui-btn-inline">Anchor</a>
<button class="ui-btn ui-btn-inline">Button</button>
11

Button
ICON
使用 class 產生按鈕 icon
<button class="ui-btn ui-btn-icon-left ui-icon-action">action</button>
<button class="ui-btn ui-btn-icon-left ui-icon-alert">alert</button>
<button class="ui-btn ui-btn-icon-up ui-icon-arrow-d">arrow-d</button>
<button class="ui-btn ui-btn-icon-right ui-icon-arrow-d-l">arrow-d-l</button>
<button class="ui-btn ui-btn-icon-bottom ui-icon-arrow-d-r">arrow-d-r</button>
<button class="ui-btn ui-btn-icon-left ui-icon-arrow-l">arrow-l</button>
範例：
http://goo.gl/TQxnvm
12

Grid <div class="ui-grid-b">
<div class="ui-block-a">Block A</div>
<div class="ui-block-b">Block B</div>
<div class="ui-block-c">Block C</div>
</div>
使用 class 產生 Grid，Grid 裡頭還可以放 Grid
ui-grid-a : 兩格，ui-grid-b：三格
ui-grid-c：四格，ui-grid-d：五格 ( 最多五格 )
http://goo.gl/AizA2f
13

Input
<div class="ui-field-contain">
<label for="#text_id">Title</label>
<input type="text" name="" id="#text_id">
</div>
<label for="#textarea_id">Title</label>
<textarea name="" id="#textarea_id"></textarea>
</div>
<label for="#search_id">Title</label>
<input type="search" name="" id="#search_id">
</div>
http://goo.gl/XOXJPH
14

theme 使用 class 產生不同的主題
按鈕：
<a href="#" class="ui-btn ui-btn-a">Theme A</a>
<a href="#" class="ui-btn ui-btn-b">Theme B</a>
navbar：
<div data-role="navbar">
<ul>
<li><a data-theme="a">Theme A</a></li>
<li><a data-theme="b">Theme B</a></li>
</ul>
</div>
http://goo.gl/E8QcW9
15

練習 1
< 嘗試將畫面中的按鈕更名，並且加上 icon >
http://goo.gl/JacD3Z
16

練習 2
< 設定點選按鈕後，出現各種切換頁面的效果 >
http://goo.gl/xtf6at
17

練習 3
< 請將左圖修改為右圖的樣子 >
http://goo.gl/Op9kDX
18

由上面幾個例子就可以看出
jQuery Mobile 裡頭
class 扮演舉足輕重的地位
19

當然不是呀！
第二個也非常重要的就是：data attribute
2
20

什麼是 data attribute 呀？

HTML 5 當中，使用 "data" 屬性來自定義屬性
使用者可以使用 Javascript 或 CSS 來控制
比較嚴謹的格式為 "data-*"
完整的 jQuery Mobile data attribute
http://api.jquerymobile.com/data-attribute/
21

Header
&
Footer
<div data-role="header" data-position="fixed">
<h1>header</h1>
</div>
<div data-role="footer" data-position="fixed">
<h4>footer</h4>
</div>
http://goo.gl/YpuDEY
22

Navbar <div data-role="navbar">
<ul>
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
</ul>
</div>
http://goo.gl/3nwwe1
23

Radio
button
<form>
<fieldset data-role="controlgroup" data-type="horizontal">
<legend>Horizontal:</legend>
<input type="radio" name="radio-choice-h-2" id="radio-choice-h-2a"
value="on" checked="checked">
<label for="radio-choice-h-2a">One</label>
<input type="radio" name="radio-choice-h-2" id="radio-choice-h-2b"
value="off">
<label for="radio-choice-h-2b">Two</label>
<input type="radio" name="radio-choice-h-2" id="radio-choice-h-2c"
value="other">
<label for="radio-choice-h-2c">Three</label>
</fieldset>
</form>
http://goo.gl/Vh67Vf
24

Check
box
<form>
<fieldset data-role="controlgroup">
<legend>Vertical:</legend>
<input type="checkbox" name="checkbox-v-2a" id="checkbox-v-2a">
<label for="checkbox-v-2a">One</label>
<input type="checkbox" name="checkbox-v-2b" id="checkbox-v-2b">
<label for="checkbox-v-2b">Two</label>
<input type="checkbox" name="checkbox-v-2c" id="checkbox-v-2c">
<label for="checkbox-v-2c">Three</label>
</fieldset>
</form>
http://goo.gl/x7vfGr
25

Flip
switch
<form>
<label for="flip-2">Flip toggle switch:</label>
<select name="flip-2" id="flip-2" data-
role="flipswitch" data-theme="b">
<option value="off">Off</option>
<option value="on">On</option>
</select>
</form>
http://goo.gl/83Mn0z
26

Listview <ul data-role="listview" data-inset="true"
data-divider-theme="a">
<li data-role="list-divider">Mail</li>
<li><a href="#">Inbox</a></li>
<li><a href="#">Outbox</a></li>
<li data-role="list-
divider">Contacts</li>
<li><a href="#">Friends</a></li>
<li><a href="#">Work</a></li>
</ul>
使用 data-role 輕鬆製作 listview ( filter )
http://goo.gl/XjmWug
27

Popup
<a href="#popupID" data-rel="popup" class="ui-btn" data-
transition="pop">Popup</a>
<div data-role="popup" id="popupID">
<p>popup 內容</p>
</div>
製作彈出式視窗
http://goo.gl/V2Zhxj
28

Table
<table data-role="table" id="table-column-toggle" data-
mode="columntoggle" class="ui-responsive table-stroke">
<thead>
內容省略
</thead>
<tbody>
內容省略
</tbody>
</table>
http://goo.gl/pMJlkP
建立表格 (columntoggle / Reflow)
29

狠狠撸
Panel
<div id="left-menu" data-role="panel" data-position="left">
從左側展開的內容
</div>
<div id="right-menu" data-role="panel" data-
position="right">
從左側展開的內容
</div>
跟 App 一樣的選單表現方式
30
參考文章：
http://goo.gl/QajnSU
範例：
http://goo.gl/8KlhuF

練習 4
< 請將左圖修改為右圖的樣子 >
http://goo.gl/oXlpVW
31

練習 5
< 點選按鈕後，下方的 listview 會以 pop 方式彈出 >
http://goo.gl/bnQJvD
32

經過了剛剛一系列的的練習
大家應該稍微明白了 jQuery Mobile
33

接下該如何讓 jQuery Mobile 運作呢？
34

事件
頁面事件
(function (){
$(document).on( "pageinit" , "#pageID" , function(){
//頁面第一次載入會執行
});
})()
(function (){
$(document).on( "pageshow" , "#pageID" , function(){
//頁面顯示後會執行
});
})()
(function (){
$(document).on( "gkComponentReady" , "#pageID" ,
function(){
//GK 元件初始化完成會執行
});
})()
http://goo.gl/0Zwgnd
35

$('#id').on('tap', function () {});
$('#id').on('taphold', function () {});
$('#id').on('swipe', function () {});
$('#id').on('swipeleft', function () {});
$('#id').on('swiperight', function () {});
五種頁面觸控事件 ( 手勢與滑鼠均適用 )
http://goo.gl/S5bJNq
事件
觸控事件
36

$(window).on('orientationchange', function (event) {});
偵測行動裝置的旋轉事件
http://goo.gl/HnE1Fe
事件
旋轉事件
37

以上就是 jQuery Mobile 的基本介紹
如有興趣，可以上 jQuery Mobile 官網了解更多
http://jquerymobile.com/

或直接使用 EZoApp 體驗
http://jqmdesigner.appspot.com/

狠狠撸

JQuery Mobile 框架介紹與使用

Recommended

More Related Content

What's hot (20)

Viewers also liked (20)

Similar to JQuery Mobile 框架介紹與使用 (20)

JQuery Mobile 框架介紹與使用

Editor's Notes