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

Recommandé

Recommandé

Contenu connexe

Similaire à JQuery Mobile UI

Similaire à JQuery Mobile UI (20)

Plus de My own sweet home!

Plus de My own sweet home! (20)

Dernier

Dernier (20)

JQuery Mobile UI