JQuery Mobile UI

JQuery Mobile Framework

文孝義方毓賢 101-1學期

大綱

 Overview of JQuery Mobile
 Prepared Environment
 Pages & dialogs
 Toolbars: Headers & Footers
 Buttons
 Listviews
 Form
 附言
2012/11/7 2

JQuery Mobile介紹

 JQuery API Based
 HTML 5
 Focus on Mobile UI
 HTML & JavaScript
 Support most Web Framework
 Support Apache Cordova
 Support Web Site & Mobile

2012/11/7 3

Overview of JQuery Mobile

 架構

2012/11/7 4

Prepared Environment

 JQuery Mobile
http://jquerymobile.com
 Last Version: 1.2.0
 Supported JQuery 1.8

2012/11/7 5


2012/11/7 6


 Download

ZIP File:
If you want to host the files yourself you can download a zip of all the
files:
Zip File: jquery.mobile-1.2.0.zip (JavaScript, CSS, and images)

2012/11/7 7

The First Mobile Page : index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<link rel="stylesheet" href="css/themes/default/jquery.mobile-1.2.0.min.css" />
<script src="js/jquery-1.8.2.min.js"></script>
<script src="js/jquery.mobile-1.2.0.min.js“></script>
</head>
<body>
</body
></html>

2012/11/7 8

Pages & dialogs

<div data-role="page">
<div data-role="header">header</div>
<div data-role="content">content</div>
<div data-role="footer">footer</div>
</div>

2012/11/7 9

Pages & dialogs

 Page titles
<div data-role="page">
<div data-role="header” id="home" data-title="Page Foo" >header</div>
<div data-role="content">content</div>
</div>

2012/11/7 10

Pages & dialogs

 Back Button

<div data-role="page" id="home" data-title="MyFirstApp" >
<div data-role="content">content
<a href="#page2">Goto Next</a><br/>
<a href="http://www.kimo.com.tw" rel="external" target="new">Kimo</a>
</div>
</div>
<div data-role="page" id="page2" data-title="MyPage2" >
<div data-role="header">header </div>
<a href="" data-rel="back">Back</a></div>
</div> 2012/11/7 11

Pages & dialogs

 Dialog

<a href="#page2" data-rel="dialog">Goto Next</a><br/>
</div>
</div>

2012/11/7 12

Pages & dialogs

 Page transitions
 Pop
 Flip
 Turn
 Flow
 Slidefade
 Slide
 Slideup
 slidedown

2012/11/7 13

Pages & dialogs

 Page transitions

<a href="#page2" data-transition="turn">Goto Next</a><br/>
</div>
</div>

2012/11/7 14

Pages & dialogs

 Popup

<a href="#popupBasic" data-rel="popup" data-transition="flip">Open Popup</a>
<div data-role="popup" id="popupBasic">
<p>This is a completely basic popup, no options set.<p>
</div>
</div>
</div>

2012/11/7 15

Toolbars: Headers & Footers
<div data-role="header"><h1>Page Title</h1></div>
</div>
</div>

<div data-role="header">
<a href="index.html" data-icon="delete">Cancel</a>
<h1>Edit Contact</h1>
<a href="index.html" data-icon="check">Save</a>
</div>
<div data-role="content">content <a href="" data-rel="back">Back</a></div>
<div data-role="footer">footer</div> </div>
2012/11/7 16


2012/11/7 17


 更換佈景配色
<a href="index.html" data-icon="delete">Cancel</a>
<a href=“index.html” data-icon=“check” data-theme="b">Save</a>
</div>
<div data-role="content">content </div>

2012/11/7 18


 自動BACK鈕
<div data-role="page" id="page2" data-title="MyPage2" data-add-back-btn="true">

<a href="index.html" data-icon="delete “data-theme="b" class="ui-btn-right">Right</a>
</div>

<div data-role="content">content </div>

2012/11/7 19


 Footer buttons

<div data-role="footer" class="ui-bar">
<a href="index.html" data-role="button" data-icon="plus">Add</a>
<a href="index.html" data-role="button" data-icon="arrow-u">Up</a>
<a href="index.html" data-role="button" data-icon="arrow-d">Down</a>
</div>

2012/11/7 20


 Footer buttons

<div data-role="footer" class="ui-bar">
<div data-role="controlgroup" data-type="horizontal">
</div>
</div>

2012/11/7 21


 Fixed toolbars

<div data-role="footer" data-position="fixed">
<div data-role="controlgroup" data-type="horizontal">
</div>
</div>

2012/11/7 22

Buttons

 Button Link

<div data-role="content">
<a href="#page2" data-role="button" data-transition="turn">Goto Next</a>
</div>

2012/11/7 23

Buttons

 Button Icon

<a href="#page2" data-role="button"
data-transition="turn“ data-icon="arrow-r">Goto Next</a>
</div>

2012/11/7 24

Buttons

 Inline buttons

<a href="#page2" data-role="button"
data-transition="turn“ data-inline="true“ data-icon="arrow-r">Goto Next</a>
</div>

2012/11/7 25

Listviews

<ul data-role=“listview” data-theme="e">
<li><a href="acura.html">Acura</a></li>
<li><a href="audi.html">Audi</a></li>
<li><a href="bmw.html">BMW</a></li>
</ul>
</div>

2012/11/7 26

Listviews

 Count
<ul data-role="listview">
<li><a href="index.html">Inbox <span class="ui-li-count">12</span></a></li>
<li><a href="index.html">Outbox <span class="ui-li-count">0</span></a></li>
<li><a href="index.html">Drafts <span class="ui-li-count">4</span></a></li>
<li><a href="index.html">Sent <span class="ui-li-count">328</span></a></li>
<li><a href="index.html">Trash <span class="ui-li-count">62</span></a></li>
</ul>
</div>

2012/11/7 27

Listviews

 Thumbnails
<ul data-role="listview">
<li><a href="index.html">
<img src="images/album-bb.jpg" />
<h3>Broken Bells</h3>
<p>Broken Bells</p></a>
</li>
</ul>
</div>

2012/11/7 28

Form

 Text inputs
<label for="sid">學號:</label>
<input type="text" name="sid" id="sid" value="" />
</div>

2012/11/7 29

Form

 Slider
<label for="score">成績:</label>
<input type="range" name="score" id="score" value="60" min="0" max="100" />
</div>

2012/11/7 30

Form

 Flip Toggle Switch
<label for="status">狀態:</label>
<select name="status" id="status" data-role="slider">
<option value="off">Off</option>
<option value="on">On</option>
</select>
</div>

2012/11/7 31

Form

 Radio buttons
<fieldset data-role="controlgroup">
<legend>Choose a pet:</legend>
<input type="radio" name="radio-choice" id="radio-choice-1" value="choice-1"
checked="checked" />
<label for="radio-choice-1">Cat</label>
<input type="radio" name="radio-choice" id="radio-choice-2" value="choice-2" />
<label for="radio-choice-2">Dog</label>
<label for="radio-choice-3">Hamster</label>
<label for="radio-choice-4">Lizard</label>
</fieldset> </div>

2012/11/7 32

Form

 Checkboxes
<fieldset data-role="controlgroup">
<label> <input type="checkbox" name="checkbox-0" />蛋糕</label>
<input type="checkbox" name="checkbox-1" id="checkbox-1" class="custom" />
<label for="checkbox-1">餅乾</label>
</fieldset>
</div>

2012/11/7 33

Form

 Select Menus
<label for="select-choice-0" class="select">運送方式:</label>
<select name="select-choice-0" id="select-choice-0">
<option value="send1">郵寄</option>
<option value="send2">超商取貨</option>
<option value="send3">貨到付款</option>
<option value="send4">快遞</option>
</select>
</div>

2012/11/7 34

附言

 需透過Ajax的方式利用Http Get/Post傳送資
料到後端主機，取回資料。
 使用JavaScript 抓取UI元件內容與變更，或
是控制UI元件的狀態。
 JavaScript是唯一的程式語言
 後端主機才是最難處理
 資料庫
 查詢資料

2012/11/7 35

JQuery Mobile UI

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Ähnlich wie JQuery Mobile UI

Ähnlich wie JQuery Mobile UI (20)

Mehr von My own sweet home!

Mehr von My own sweet home! (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

JQuery Mobile UI