0
JQuery Mobile Framework文孝義 方毓賢 101-1學期
大綱 Overview of JQuery Mobile Prepared Environment Pages & dialogs Toolbars: Headers & Footers Buttons Listviews For...
JQuery Mobile介紹 JQuery API Based HTML 5 Focus on Mobile UI HTML & JavaScript Support most Web Framework Support Apac...
Overview of JQuery Mobile 架構                    2012/11/7   4
Prepared Environment JQuery Mobile  http://jquerymobile.com Last Version: 1.2.0 Supported JQuery 1.8                   ...
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: Z...
Prepared Environment  The First Mobile Page : index.html<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewp...
Pages & dialogs<div data-role="page"> <div data-role="header">header</div> <div data-role="content">content</div> <div dat...
Pages & dialogs Page titles<div data-role="page"> <div data-role="header” id="home" data-title="Page Foo" >header</div> <...
Pages & dialogs    Back Button<div data-role="page" id="home" data-title="MyFirstApp" ><div data-role="header">header</di...
Pages & dialogs Dialog<div data-role="page" id="home" data-title="MyFirstApp" ><div data-role="header">header</div><div d...
Pages & dialogs Page transitions   Pop   Flip   Turn   Flow   Slidefade   Slide   Slideup   slidedown            ...
Pages & dialogs Page transitions<div data-role="page" id="home" data-title="MyFirstApp" ><div data-role="header">header</...
Pages & dialogs Popup<div data-role="page" id="home" data-title="MyFirstApp" ><div data-role="header">header</div><div da...
Toolbars: Headers & Footers<div data-role="page" id="home" data-title="MyFirstApp" ><div data-role="header"><h1>Page Title...
Toolbars: Headers & Footers                    2012/11/7   17
Toolbars: Headers & Footers   更換佈景配色<div data-role="page" id="page2" data-title="MyPage2" ><div data-role="header"><a hre...
Toolbars: Headers & Footers   自動BACK鈕<div data-role="page" id="page2" data-title="MyPage2" data-add-back-btn="true"><div ...
Toolbars: Headers & Footers  Footer buttons<div data-role="footer" class="ui-bar"><a href="index.html" data-role="button"...
Toolbars: Headers & Footers  Footer buttons<div data-role="footer" class="ui-bar"><div data-role="controlgroup" data-type...
Toolbars: Headers & Footers  Fixed toolbars<div data-role="footer" data-position="fixed"><div data-role="controlgroup" da...
Buttons Button Link<div data-role="content"><a href="#page2" data-role="button" data-transition="turn">Goto Next</a></div...
Buttons Button Icon<div data-role="content"><a href="#page2" data-role="button"data-transition="turn“ data-icon="arrow-r"...
Buttons Inline buttons  <div data-role="content">  <a href="#page2" data-role="button"  data-transition="turn“ data-inlin...
Listviews  <div data-role="content">  <ul data-role=“listview” data-theme="e">  <li><a href="acura.html">Acura</a></li>  <...
Listviews Count  <div data-role="content">  <ul data-role="listview">  <li><a href="index.html">Inbox <span class="ui-li-...
Listviews     Thumbnails<div data-role="content"><ul data-role="listview"><li><a href="index.html"><img src="images/album...
Form Text inputs  <div data-role="content">  <label for="sid">學號:</label>  <input type="text" name="sid" id="sid" value="...
Form     Slider<div data-role="content"><label for="score">成績:</label><input type="range" name="score" id="score" value="...
Form     Flip Toggle Switch<div data-role="content"><label for="status">狀態:</label><select name="status" id="status" data...
Form       Radio buttons<div data-role="content"><fieldset data-role="controlgroup"><legend>Choose a pet:</legend><input ...
Form     Checkboxes<div data-role="content"><fieldset data-role="controlgroup"><label> <input type="checkbox" name="check...
Form Select Menus<div data-role="content"><label for="select-choice-0" class="select">運送方式:</label><select name="select-c...
附言 需透過Ajax的方式利用Http Get/Post傳送資  料到後端主機,取回資料。 使用JavaScript 抓取UI元件內容與變更,或  是控制UI元件的狀態。 JavaScript是唯一的程式語言 後端主機才是最難處理  ...
Upcoming SlideShare
Loading in...5
×

JQuery Mobile UI

685

Published on

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

Published in: Education
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
685
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
36
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Transcript of "JQuery Mobile UI"

  1. 1. JQuery Mobile Framework文孝義 方毓賢 101-1學期
  2. 2. 大綱 Overview of JQuery Mobile Prepared Environment Pages & dialogs Toolbars: Headers & Footers Buttons Listviews Form 附言 2012/11/7 2
  3. 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 2012/11/7 3
  4. 4. Overview of JQuery Mobile 架構 2012/11/7 4
  5. 5. Prepared Environment JQuery Mobile http://jquerymobile.com Last Version: 1.2.0 Supported JQuery 1.8 2012/11/7 5
  6. 6. Prepared Environment 2012/11/7 6
  7. 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) 2012/11/7 7
  8. 8. 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
  9. 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> 2012/11/7 9
  10. 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> 2012/11/7 10
  11. 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> 2012/11/7 11
  12. 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> 2012/11/7 12
  13. 13. Pages & dialogs Page transitions  Pop  Flip  Turn  Flow  Slidefade  Slide  Slideup  slidedown 2012/11/7 13
  14. 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> 2012/11/7 14
  15. 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> 2012/11/7 15
  16. 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> 2012/11/7 16
  17. 17. Toolbars: Headers & Footers 2012/11/7 17
  18. 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> 2012/11/7 18
  19. 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> 2012/11/7 19
  20. 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> 2012/11/7 20
  21. 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> 2012/11/7 21
  22. 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> 2012/11/7 22
  23. 23. Buttons Button Link<div data-role="content"><a href="#page2" data-role="button" data-transition="turn">Goto Next</a></div> 2012/11/7 23
  24. 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> 2012/11/7 24
  25. 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> 2012/11/7 25
  26. 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> 2012/11/7 26
  27. 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> 2012/11/7 27
  28. 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> 2012/11/7 28
  29. 29. Form Text inputs <div data-role="content"> <label for="sid">學號:</label> <input type="text" name="sid" id="sid" value="" /> </div> 2012/11/7 29
  30. 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> 2012/11/7 30
  31. 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> 2012/11/7 31
  32. 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> 2012/11/7 32
  33. 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> 2012/11/7 33
  34. 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> 2012/11/7 34
  35. 35. 附言 需透過Ajax的方式利用Http Get/Post傳送資 料到後端主機,取回資料。 使用JavaScript 抓取UI元件內容與變更,或 是控制UI元件的狀態。 JavaScript是唯一的程式語言 後端主機才是最難處理  資料庫  查詢資料 2012/11/7 35
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×