Top Banner
框框框框框框框 www.ezoui.com
48

JQuery Mobile 框架介紹與使用

Nov 28, 2014

Download

Software

EZoApp

使用 EZoApp 做為工具平台,介紹 jQuery Mobile 的基本架構,以及各種範例實做
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: JQuery Mobile 框架介紹與使用

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

Page 2: JQuery Mobile 框架介紹與使用

jQuery Mobile 是什麼?

2

Page 3: JQuery Mobile 框架介紹與使用

jQuery + Mobile

jQuery Mobile

=

Page 4: JQuery Mobile 框架介紹與使用

這麼簡單,大家都知道呀!

Page 5: JQuery Mobile 框架介紹與使用

但是 jQuery Mobile 到底是什麼?能吃嗎?

Page 6: JQuery Mobile 框架介紹與使用

jQuery Mobile 的特色

支援響應式網頁

使用 jQuery 建構 具備完整的 UI 畫面

支援 HTML5支援各種平台裝置

多樣的效果和變化

更簡捷的語法與輕量化的大小

精簡觸控和滑鼠事件

3

Page 7: JQuery Mobile 框架介紹與使用

<link rel="stylesheet" href="jquery.mobile.min.css" /> <script src="jquery.min.js"></script> <script src="jquery.mobile.min.js"></script>

jQuery Mobile 預載的程式

4

Page 8: JQuery Mobile 框架介紹與使用

感受一下 jQuery Mobile

http://demos.jquerymobile.com/1.4.2/5

Page 9: JQuery Mobile 框架介紹與使用

認識了 jQuery Mobile 之後就讓我們開始吧!

Let’s GO !

Page 10: JQuery Mobile 框架介紹與使用

<head> <title>jQuery Mobile</title> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a1/jquery.mobile.min.css" /> <script src="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

Page 11: JQuery Mobile 框架介紹與使用

<div id="page1" data-role="page"><div role="main" class="ui-content"></div></div>

<div id="page2" data-role="page"><div role="main" class="ui-content"></div></div>

<div id="page3" data-role="page"><div role="main" class="ui-content"></div></div>

一個 jQuery Mobile 通常會有多個 page不過,只會顯示其中一頁page 必須使用 id 進行區隔

page

7

Page 12: JQuery Mobile 框架介紹與使用

page 使用 EZoApp 來體驗一下 page

http://goo.gl/EmXUY9

8

Page 13: JQuery Mobile 框架介紹與使用

★ 使用 href ,直接切換到指定的 Page Id★ 使用 data-transition 設定切換效果★ 設定 data-rel=”back” 用同樣效果返回

page切換效果

<a href="#pageID" data-transition="效果 "></a>

★ 也可以使用 javascript 來做切換★ $.mobile.changePage('#PageID');★ $.mobile.changePage('#PageB' , {'transition':'效果 '} );

9

Page 14: JQuery Mobile 框架介紹與使用

● default :預設值 ( fade )● fade :淡入淡出 ( 預設值 )● flip:翻轉● flow :流動切換效果● pop:彈出窗口顯示● slide:左右滑動切換● slidefade :左右滑動 + 淡入淡出切換

● slideup:由上而下滑動切換● slidedown:由下而上滑動切換● turn:轉向下一頁● none:直接切換

page切換效果

<a href="#pageID" data-transition="效果 "></a>

範例:http://goo.gl/xwIR0F

10

Page 15: JQuery Mobile 框架介紹與使用

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

Page 16: JQuery Mobile 框架介紹與使用

ButtonICON

使用 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

Page 17: JQuery Mobile 框架介紹與使用

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

Page 18: JQuery Mobile 框架介紹與使用

Input <div class="ui-field-contain"> <label for="#text_id">Title</label> <input type="text" name="" id="#text_id"></div><div class="ui-field-contain"> <label for="#textarea_id">Title</label> <textarea name="" id="#textarea_id"></textarea></div><div class="ui-field-contain"> <label for="#search_id">Title</label> <input type="search" name="" id="#search_id"></div>

http://goo.gl/XOXJPH144

Page 19: JQuery Mobile 框架介紹與使用

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

Page 20: JQuery Mobile 框架介紹與使用

做個小小的練習吧

Page 21: JQuery Mobile 框架介紹與使用

練習 1< 嘗試將畫面中的按鈕更名,並且加上 icon >

http://goo.gl/JacD3Z

16

Page 22: JQuery Mobile 框架介紹與使用

練習 2< 設定點選按鈕後,出現各種切換頁面的效果 >

http://goo.gl/xtf6at

17

Page 23: JQuery Mobile 框架介紹與使用

練習 3< 請將左圖修改為右圖的樣子 >

http://goo.gl/Op9kDX

18

Page 24: JQuery Mobile 框架介紹與使用

由上面幾個例子就可以看出 jQuery Mobile 裡頭

class 扮演舉足輕重的地位

19

Page 25: JQuery Mobile 框架介紹與使用

你一定會認為

Page 26: JQuery Mobile 框架介紹與使用

當然不是呀!第二個也非常重要的就是: data attribute

2

20

Page 27: JQuery Mobile 框架介紹與使用

什麼是 data attribute 呀?

Page 28: JQuery Mobile 框架介紹與使用

HTML 5 當中,使用 "data" 屬性來自定義屬性 使用者可以使用 Javascript 或 CSS 來控制

比較嚴謹的格式為 "data-*"

完整的 jQuery Mobile data attributehttp://api.jquerymobile.com/data-attribute/

21

Page 29: JQuery Mobile 框架介紹與使用

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/YpuDEY22

Page 30: JQuery Mobile 框架介紹與使用

Navbar <div data-role="navbar"> <ul> <li><a href="#">One</a></li> <li><a href="#">Two</a></li> </ul></div>

http://goo.gl/3nwwe123

Page 31: JQuery Mobile 框架介紹與使用

Radiobutton

<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

Page 32: JQuery Mobile 框架介紹與使用

Checkbox

<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/x7vfGr25

Page 33: JQuery Mobile 框架介紹與使用

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/83Mn0z26

Page 34: JQuery Mobile 框架介紹與使用

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

Page 35: JQuery Mobile 框架介紹與使用

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/V2Zhxj28

Page 36: JQuery Mobile 框架介紹與使用

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

Page 37: JQuery Mobile 框架介紹與使用

SlidePanel

<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

Page 38: JQuery Mobile 框架介紹與使用

不要忘記小小的練習

Page 39: JQuery Mobile 框架介紹與使用

練習 4< 請將左圖修改為右圖的樣子 >

http://goo.gl/oXlpVW

31

Page 40: JQuery Mobile 框架介紹與使用

練習 5< 點選按鈕後,下方的 listview 會以 pop 方式彈出 >

http://goo.gl/bnQJvD

32

Page 41: JQuery Mobile 框架介紹與使用

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

33

Page 42: JQuery Mobile 框架介紹與使用

接下該如何讓 jQuery Mobile 運作呢?

34

Page 43: JQuery Mobile 框架介紹與使用

事件頁面事件

(function (){$(document).on( "pageinit" , "#pageID" ,

function(){

//頁面第一次載入會執行});})()

(function (){$(document).on( "pageshow" , "#pageID" ,

function(){

//頁面顯示後會執行});})()

(function (){$(document).on( "gkComponentReady" , "#pageID" ,

function(){

//GK 元件初始化完成會執行});})() http://goo.gl/0Zwgnd

35

Page 44: JQuery Mobile 框架介紹與使用

$('#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

Page 45: JQuery Mobile 框架介紹與使用

$(window).on('orientationchange', function (event) {});

偵測行動裝置的旋轉事件

http://goo.gl/HnE1Fe

事件旋轉事件

37

Page 46: JQuery Mobile 框架介紹與使用

以上就是 jQuery Mobile 的基本介紹 如有興趣,可以上 jQuery Mobile 官網了解更多

http://jquerymobile.com/

Page 47: JQuery Mobile 框架介紹與使用

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

Page 48: JQuery Mobile 框架介紹與使用

謝謝聆聽敬請指教