JQuery Mobile UI
Upcoming SlideShare
Loading in...5
×
 

JQuery Mobile UI

on

  • 906 views

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

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

Statistics

Views

Total Views
906
Views on SlideShare
891
Embed Views
15

Actions

Likes
0
Downloads
35
Comments
0

1 Embed 15

http://localhost 15

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

JQuery Mobile UI JQuery Mobile UI Presentation Transcript

  • 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
  • Prepared Environment 2012/11/7 6
  • 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) 2012/11/7 7
  • Prepared Environment 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 data-role="footer">footer</div></div> 2012/11/7 10
  • 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> 2012/11/7 11
  • 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> 2012/11/7 12
  • Pages & dialogs Page transitions  Pop  Flip  Turn  Flow  Slidefade  Slide  Slideup  slidedown 2012/11/7 13
  • 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> 2012/11/7 14
  • 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> 2012/11/7 15
  • 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> 2012/11/7 16
  • Toolbars: Headers & Footers 2012/11/7 17
  • 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> 2012/11/7 18
  • 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> 2012/11/7 19
  • 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> 2012/11/7 20
  • 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> 2012/11/7 21
  • 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> 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<div data-role="content"><a href="#page2" data-role="button"data-transition="turn“ data-icon="arrow-r">Goto Next</a></div> 2012/11/7 24
  • 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> 2012/11/7 25
  • 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> 2012/11/7 26
  • 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> 2012/11/7 27
  • 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> 2012/11/7 28
  • Form Text inputs <div data-role="content"> <label for="sid">學號:</label> <input type="text" name="sid" id="sid" value="" /> </div> 2012/11/7 29
  • Form  Slider<div data-role="content"><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<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> 2012/11/7 31
  • 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> 2012/11/7 32
  • 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> 2012/11/7 33
  • 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> 2012/11/7 34
  • 附言 需透過Ajax的方式利用Http Get/Post傳送資 料到後端主機,取回資料。 使用JavaScript 抓取UI元件內容與變更,或 是控制UI元件的狀態。 JavaScript是唯一的程式語言 後端主機才是最難處理  資料庫  查詢資料 2012/11/7 35