jquery mobile ui

35
中中中中 - 43013 文文文 文文文 101-1 文文 JQuery Mobile Framework

Upload: my-own-sweet-home

Post on 17-Dec-2014

654 views

Category:

Education


3 download

DESCRIPTION

中央資管 101-1 行動商務第八週上課投影片

TRANSCRIPT

Page 1: JQuery Mobile UI

中央資管 - 43013

文孝義 方毓賢 101-1 學期

JQuery Mobile Framework

Page 2: JQuery Mobile UI

04/10/2023 2

大綱

Overview of JQuery Mobile Prepared Environment Pages & dialogs Toolbars: Headers & Footers Buttons Listviews Form 附言

Page 3: JQuery Mobile UI

04/10/2023 3

JQuery Mobile 介紹

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

Page 4: JQuery Mobile UI

04/10/2023 4

Overview of JQuery Mobile

架構

Page 5: JQuery Mobile UI

04/10/2023 5

Prepared Environment

JQuery Mobilehttp://jquerymobile.com

Last Version: 1.2.0 Supported JQuery 1.8

Page 6: JQuery Mobile UI

04/10/2023 6

Prepared Environment

Page 7: JQuery Mobile UI

04/10/2023 7

Prepared Environment

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)

Page 8: JQuery Mobile UI

04/10/2023 8

Prepared Environment

<!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>

The First Mobile Page : index.html

Page 9: JQuery Mobile UI

04/10/2023 9

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>

Page 10: JQuery Mobile UI

04/10/2023 10

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 data-role="footer">footer</div> </div>

Page 11: JQuery Mobile UI

04/10/2023 11

Pages & dialogs

Back Button

<div data-role="page" id="home" data-title="MyFirstApp" > <div data-role="header">header</div> <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 data-role="footer">footer</div> </div> <div data-role="page" id="page2" data-title="MyPage2" > <div data-role="header">header </div> <div data-role="content">content <a href="" data-rel="back">Back</a></div> <div data-role="footer">footer</div> </div>

Page 12: JQuery Mobile UI

04/10/2023 12

Pages & dialogs

Dialog

<div data-role="page" id="home" data-title="MyFirstApp" > <div data-role="header">header</div> <div data-role="content">content <a href="#page2" data-rel="dialog">Goto Next</a><br/></div> <div data-role="footer">footer</div> </div>

Page 13: JQuery Mobile UI

04/10/2023 13

Pages & dialogs

Page transitions Pop Flip Turn Flow Slidefade Slide Slideup slidedown

Page 14: JQuery Mobile UI

04/10/2023 14

Pages & dialogs

Page transitions

<div data-role="page" id="home" data-title="MyFirstApp" > <div data-role="header">header</div> <div data-role="content">content <a href="#page2" data-transition="turn">Goto Next</a><br/></div> <div data-role="footer">footer</div> </div>

Page 15: JQuery Mobile UI

04/10/2023 15

Pages & dialogs

Popup

<div data-role="page" id="home" data-title="MyFirstApp" > <div data-role="header">header</div> <div data-role="content">content <a href="#page2" data-transition="turn">Goto Next</a><br/><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 data-role="footer">footer</div> </div>

Page 16: JQuery Mobile UI

04/10/2023 16

Toolbars: Headers & Footers

<div data-role="page" id="home" data-title="MyFirstApp" > <div data-role="header"><h1>Page Title</h1></div> <div data-role="content">content <a href="#page2" data-transition="turn">Goto Next</a><br/></div> <div data-role="footer">footer</div> </div>

<div data-role="page" id="page2" data-title="MyPage2" > <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>

Page 17: JQuery Mobile UI

04/10/2023 17

Toolbars: Headers & Footers

Page 18: JQuery Mobile UI

04/10/2023 18

Toolbars: Headers & Footers 更換佈景配色

<div data-role="page" id="page2" data-title="MyPage2" > <div data-role="header"><a href="index.html" data-icon="delete">Cancel</a><h1>Edit Contact</h1><a href=“index.html” data-icon=“check” data-theme="b">Save</a> </div> <div data-role="content">content </div><div data-role="footer">footer</div> </div>

Page 19: JQuery Mobile UI

04/10/2023 19

Toolbars: Headers & Footers 自動 BACK 鈕

<div data-role="page" id="page2" data-title="MyPage2" data-add-back-btn="true">

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

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

Page 20: JQuery Mobile UI

04/10/2023 20

Toolbars: Headers & Footers 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>

Page 21: JQuery Mobile UI

04/10/2023 21

Toolbars: Headers & Footers Footer buttons

<div data-role="footer" class="ui-bar"><div data-role="controlgroup" data-type="horizontal"><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></div>

Page 22: JQuery Mobile UI

04/10/2023 22

Toolbars: Headers & Footers Fixed toolbars

<div data-role="footer" data-position="fixed"><div data-role="controlgroup" data-type="horizontal"><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></div>

Page 23: JQuery Mobile UI

04/10/2023 23

Buttons

Button Link

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

Page 24: JQuery Mobile UI

04/10/2023 24

Buttons

Button Icon

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

Page 25: JQuery Mobile UI

04/10/2023 25

Buttons

Inline buttons

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

Page 26: JQuery Mobile UI

04/10/2023 26

Listviews

<div data-role="content"> <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>

Page 27: JQuery Mobile UI

04/10/2023 27

Listviews

Count<div data-role="content"> <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>

Page 28: JQuery Mobile UI

04/10/2023 28

Listviews

Thumbnails<div data-role="content"> <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>

Page 29: JQuery Mobile UI

04/10/2023 29

Form

Text inputs

<div data-role="content"> <label for="sid"> 學號 :</label> <input type="text" name="sid" id="sid" value="" /></div>

Page 30: JQuery Mobile UI

04/10/2023 30

Form

Slider

<div data-role="content"> <label for="score"> 成績 :</label> <input type="range" name="score" id="score" value="60" min="0" max="100" /></div>

Page 31: JQuery Mobile UI

04/10/2023 31

Form

Flip Toggle Switch

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

Page 32: JQuery Mobile UI

04/10/2023 32

Form

Radio buttons<div data-role="content"> <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> <input type="radio" name="radio-choice" id="radio-choice-3" value="choice-3" /> <label for="radio-choice-3">Hamster</label> <input type="radio" name="radio-choice" id="radio-choice-4" value="choice-4" /> <label for="radio-choice-4">Lizard</label> </fieldset> </div>

Page 33: JQuery Mobile UI

04/10/2023 33

Form

Checkboxes

<div data-role="content"> <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>

Page 34: JQuery Mobile UI

04/10/2023 34

Form

Select Menus<div data-role="content"> <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>

Page 35: JQuery Mobile UI

04/10/2023 35

附言

需透過 Ajax 的方式利用 Http Get/Post 傳送資料到後端主機,取回資料。

使用 JavaScript 抓取 UI 元件內容與變更,或是控制 UI 元件的狀態。

JavaScript 是唯一的程式語言 後端主機才是最難處理

資料庫 查詢資料