SlideShare a Scribd company logo

JQuery Mobile UI

•Download as PPTX, PDF•
•
My own sweet home!
My own sweet home!

The document discusses the JQuery Mobile framework. It provides an overview and introduction to JQuery Mobile, which is an API based on JQuery for building mobile web sites and applications. It focuses on the mobile user interface and supports HTML5, JavaScript, and most web frameworks. The document then covers setting up the environment for JQuery Mobile and describes key aspects of the framework like pages, dialogs, toolbars, buttons, lists, forms and more.

Education
1 of 35
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

Recommended

Unlock the next era of UI design with Polymer
Unlock the next era of UI design with PolymerUnlock the next era of UI design with Polymer
Unlock the next era of UI design with Polymer
Rob Dodson
 
Vue.js - zastosowanie i budowa komponentów
Vue.js - zastosowanie i budowa komponentówVue.js - zastosowanie i budowa komponentów
Vue.js - zastosowanie i budowa komponentów
Laravel Poland MeetUp
 
SharePoint 2010 Training Session 6
SharePoint 2010 Training Session 6SharePoint 2010 Training Session 6
SharePoint 2010 Training Session 6Usman Zafar Malik
 
Gordian Knot Presentation (Help Network)
Gordian Knot Presentation (Help Network)Gordian Knot Presentation (Help Network)
Gordian Knot Presentation (Help Network)Jim Osowski
 
ChocolateChip-UI
ChocolateChip-UIChocolateChip-UI
ChocolateChip-UI
GeorgeIshak
 
Jerri Chou: Condoms, Enterprise, and Making Women's Empowerment Sexy
Jerri Chou: Condoms, Enterprise, and Making Women's Empowerment Sexy Jerri Chou: Condoms, Enterprise, and Making Women's Empowerment Sexy
Jerri Chou: Condoms, Enterprise, and Making Women's Empowerment Sexy
IGNITE NYC
 
Commuter Tax Credit
Commuter Tax CreditCommuter Tax Credit
Commuter Tax Credit
The McMillan Companies
 
Unit5 Otgo
Unit5 OtgoUnit5 Otgo
Unit5 Otgo
Bayarmaa GBayarmaa
 

Recommended

Unlock the next era of UI design with Polymer
Unlock the next era of UI design with PolymerUnlock the next era of UI design with Polymer
Unlock the next era of UI design with Polymer
Rob Dodson
 
Vue.js - zastosowanie i budowa komponentów
Vue.js - zastosowanie i budowa komponentówVue.js - zastosowanie i budowa komponentów
Vue.js - zastosowanie i budowa komponentów
Laravel Poland MeetUp
 
SharePoint 2010 Training Session 6
SharePoint 2010 Training Session 6SharePoint 2010 Training Session 6
SharePoint 2010 Training Session 6Usman Zafar Malik
 
Gordian Knot Presentation (Help Network)
Gordian Knot Presentation (Help Network)Gordian Knot Presentation (Help Network)
Gordian Knot Presentation (Help Network)Jim Osowski
 
ChocolateChip-UI
ChocolateChip-UIChocolateChip-UI
ChocolateChip-UI
GeorgeIshak
 
Jerri Chou: Condoms, Enterprise, and Making Women's Empowerment Sexy
Jerri Chou: Condoms, Enterprise, and Making Women's Empowerment Sexy Jerri Chou: Condoms, Enterprise, and Making Women's Empowerment Sexy
Jerri Chou: Condoms, Enterprise, and Making Women's Empowerment Sexy
IGNITE NYC
 
Commuter Tax Credit
Commuter Tax CreditCommuter Tax Credit
Commuter Tax Credit
The McMillan Companies
 
Unit5 Otgo
Unit5 OtgoUnit5 Otgo
Unit5 Otgo
Bayarmaa GBayarmaa
 
Index of jquery template 2 Minuteman Summer Web Dev.
Index of jquery template 2 Minuteman Summer Web Dev.Index of jquery template 2 Minuteman Summer Web Dev.
Index of jquery template 2 Minuteman Summer Web Dev.Daniel Downs
 
HTML5 and the dawn of rich mobile web applications pt 2
HTML5 and the dawn of rich mobile web applications pt 2HTML5 and the dawn of rich mobile web applications pt 2
HTML5 and the dawn of rich mobile web applications pt 2James Pearce
 
Introduction to jQuery Mobile
Introduction to jQuery MobileIntroduction to jQuery Mobile
Introduction to jQuery Mobile
ejlp12
 
Jquery mobile2
Jquery mobile2Jquery mobile2
Jquery mobile2Inbal Geffen
 
Polytechnic speaker deck oluwadamilare
Polytechnic speaker deck oluwadamilarePolytechnic speaker deck oluwadamilare
Polytechnic speaker deck oluwadamilare
Oluwadamilare Ibrahim
 
Polytechnic speaker deck oluwadamilare
Polytechnic speaker deck oluwadamilarePolytechnic speaker deck oluwadamilare
Polytechnic speaker deck oluwadamilare
Oluwadamilare Ibrahim
 
jQuery Mobile - Desenvolvimento para dispositivos móveis
jQuery Mobile - Desenvolvimento para dispositivos móveisjQuery Mobile - Desenvolvimento para dispositivos móveis
jQuery Mobile - Desenvolvimento para dispositivos móveis
Pablo Garrido
 
iWebkit
iWebkitiWebkit
iWebkitRyan Chung
 
Choosing the Right Mobile Development Platform (Part 2)
Choosing the Right Mobile Development Platform (Part 2)Choosing the Right Mobile Development Platform (Part 2)
Choosing the Right Mobile Development Platform (Part 2)
Chris Griffith
 
TURN YOUR CELL PHONE FROM A LIABILITY INTO AN ASSET!
TURN YOUR CELL PHONE FROM A LIABILITY INTO AN ASSET!TURN YOUR CELL PHONE FROM A LIABILITY INTO AN ASSET!
TURN YOUR CELL PHONE FROM A LIABILITY INTO AN ASSET!Coulawrence
 
QCon 2015 - Thinking in components: A new paradigm for Web UI
QCon 2015 - Thinking in components: A new paradigm for Web UIQCon 2015 - Thinking in components: A new paradigm for Web UI
QCon 2015 - Thinking in components: A new paradigm for Web UI
Oliver Häger
 
Design Patterns for JavaScript Web Apps - JavaScript Conference 2012 - OPITZ ...
Design Patterns for JavaScript Web Apps - JavaScript Conference 2012 - OPITZ ...Design Patterns for JavaScript Web Apps - JavaScript Conference 2012 - OPITZ ...
Design Patterns for JavaScript Web Apps - JavaScript Conference 2012 - OPITZ ...
OPITZ CONSULTING Deutschland
 
One Size Fits All
One Size Fits AllOne Size Fits All
One Size Fits All
Claudio Meinberg
 
Oracle Application Express & jQuery Mobile - OGh Apex Dag 2012
Oracle Application Express & jQuery Mobile - OGh Apex Dag 2012Oracle Application Express & jQuery Mobile - OGh Apex Dag 2012
Oracle Application Express & jQuery Mobile - OGh Apex Dag 2012
crokitta
 
Introduction to Html5
Introduction to Html5Introduction to Html5
Introduction to Html5
www.netgains.org
 
HTML5 Essentials
HTML5 EssentialsHTML5 Essentials
HTML5 Essentials
Marc Grabanski
 
HTML5 New and Improved
HTML5 New and ImprovedHTML5 New and Improved
HTML5 New and Improved
Timothy Fisher
 
HTML5 and Mobile
HTML5 and MobileHTML5 and Mobile
HTML5 and Mobiledoodoofish
 
Polymer Polytechnic George Town 2014
Polymer Polytechnic George Town 2014Polymer Polytechnic George Town 2014
Polymer Polytechnic George Town 2014
Vin Lim
 
Enjoy the vue.js
Enjoy the vue.jsEnjoy the vue.js
Enjoy the vue.js
TechExeter
 
Sencha touch 2 訓練課程 3 phonegap整合
Sencha touch 2 訓練課程 3 phonegap整合Sencha touch 2 訓練課程 3 phonegap整合
Sencha touch 2 訓練課程 3 phonegap整合
My own sweet home!
 
自造世代下的新創模式
自造世代下的新創模式自造世代下的新創模式
自造世代下的新創模式
My own sweet home!
 

More Related Content

Similar to JQuery Mobile UI

Index of jquery template 2 Minuteman Summer Web Dev.
Index of jquery template 2 Minuteman Summer Web Dev.Index of jquery template 2 Minuteman Summer Web Dev.
Index of jquery template 2 Minuteman Summer Web Dev.Daniel Downs
 
HTML5 and the dawn of rich mobile web applications pt 2
HTML5 and the dawn of rich mobile web applications pt 2HTML5 and the dawn of rich mobile web applications pt 2
HTML5 and the dawn of rich mobile web applications pt 2James Pearce
 
Introduction to jQuery Mobile
Introduction to jQuery MobileIntroduction to jQuery Mobile
Introduction to jQuery Mobile
ejlp12
 
Polytechnic speaker deck oluwadamilare
Polytechnic speaker deck oluwadamilarePolytechnic speaker deck oluwadamilare
Polytechnic speaker deck oluwadamilare
Oluwadamilare Ibrahim
 
Polytechnic speaker deck oluwadamilare
Polytechnic speaker deck oluwadamilarePolytechnic speaker deck oluwadamilare
Polytechnic speaker deck oluwadamilare
Oluwadamilare Ibrahim
 
jQuery Mobile - Desenvolvimento para dispositivos móveis
jQuery Mobile - Desenvolvimento para dispositivos móveisjQuery Mobile - Desenvolvimento para dispositivos móveis
jQuery Mobile - Desenvolvimento para dispositivos móveis
Pablo Garrido
 
Choosing the Right Mobile Development Platform (Part 2)
Choosing the Right Mobile Development Platform (Part 2)Choosing the Right Mobile Development Platform (Part 2)
Choosing the Right Mobile Development Platform (Part 2)
Chris Griffith
 
TURN YOUR CELL PHONE FROM A LIABILITY INTO AN ASSET!
TURN YOUR CELL PHONE FROM A LIABILITY INTO AN ASSET!TURN YOUR CELL PHONE FROM A LIABILITY INTO AN ASSET!
TURN YOUR CELL PHONE FROM A LIABILITY INTO AN ASSET!Coulawrence
 
QCon 2015 - Thinking in components: A new paradigm for Web UI
QCon 2015 - Thinking in components: A new paradigm for Web UIQCon 2015 - Thinking in components: A new paradigm for Web UI
QCon 2015 - Thinking in components: A new paradigm for Web UI
Oliver Häger
 
Design Patterns for JavaScript Web Apps - JavaScript Conference 2012 - OPITZ ...
Design Patterns for JavaScript Web Apps - JavaScript Conference 2012 - OPITZ ...Design Patterns for JavaScript Web Apps - JavaScript Conference 2012 - OPITZ ...
Design Patterns for JavaScript Web Apps - JavaScript Conference 2012 - OPITZ ...
OPITZ CONSULTING Deutschland
 
One Size Fits All
One Size Fits AllOne Size Fits All
One Size Fits All
Claudio Meinberg
 
Oracle Application Express & jQuery Mobile - OGh Apex Dag 2012
Oracle Application Express & jQuery Mobile - OGh Apex Dag 2012Oracle Application Express & jQuery Mobile - OGh Apex Dag 2012
Oracle Application Express & jQuery Mobile - OGh Apex Dag 2012
crokitta
 
Introduction to Html5
Introduction to Html5Introduction to Html5
Introduction to Html5
www.netgains.org
 
HTML5 Essentials
HTML5 EssentialsHTML5 Essentials
HTML5 Essentials
Marc Grabanski
 
HTML5 New and Improved
HTML5 New and ImprovedHTML5 New and Improved
HTML5 New and Improved
Timothy Fisher
 
HTML5 and Mobile
HTML5 and MobileHTML5 and Mobile
HTML5 and Mobiledoodoofish
 
Polymer Polytechnic George Town 2014
Polymer Polytechnic George Town 2014Polymer Polytechnic George Town 2014
Polymer Polytechnic George Town 2014
Vin Lim
 
Enjoy the vue.js
Enjoy the vue.jsEnjoy the vue.js
Enjoy the vue.js
TechExeter
 

Similar to JQuery Mobile UI (20)

Index of jquery template 2 Minuteman Summer Web Dev.
Index of jquery template 2 Minuteman Summer Web Dev.Index of jquery template 2 Minuteman Summer Web Dev.
Index of jquery template 2 Minuteman Summer Web Dev.
 
HTML5 and the dawn of rich mobile web applications pt 2
HTML5 and the dawn of rich mobile web applications pt 2HTML5 and the dawn of rich mobile web applications pt 2
HTML5 and the dawn of rich mobile web applications pt 2
 
Introduction to jQuery Mobile
Introduction to jQuery MobileIntroduction to jQuery Mobile
Introduction to jQuery Mobile
 
Jquery mobile2
Jquery mobile2Jquery mobile2
Jquery mobile2
 
Polytechnic speaker deck oluwadamilare
Polytechnic speaker deck oluwadamilarePolytechnic speaker deck oluwadamilare
Polytechnic speaker deck oluwadamilare
 
Polytechnic speaker deck oluwadamilare
Polytechnic speaker deck oluwadamilarePolytechnic speaker deck oluwadamilare
Polytechnic speaker deck oluwadamilare
 
jQuery Mobile - Desenvolvimento para dispositivos móveis
jQuery Mobile - Desenvolvimento para dispositivos móveisjQuery Mobile - Desenvolvimento para dispositivos móveis
jQuery Mobile - Desenvolvimento para dispositivos móveis
 
iWebkit
iWebkitiWebkit
iWebkit
 
Choosing the Right Mobile Development Platform (Part 2)
Choosing the Right Mobile Development Platform (Part 2)Choosing the Right Mobile Development Platform (Part 2)
Choosing the Right Mobile Development Platform (Part 2)
 
TURN YOUR CELL PHONE FROM A LIABILITY INTO AN ASSET!
TURN YOUR CELL PHONE FROM A LIABILITY INTO AN ASSET!TURN YOUR CELL PHONE FROM A LIABILITY INTO AN ASSET!
TURN YOUR CELL PHONE FROM A LIABILITY INTO AN ASSET!
 
QCon 2015 - Thinking in components: A new paradigm for Web UI
QCon 2015 - Thinking in components: A new paradigm for Web UIQCon 2015 - Thinking in components: A new paradigm for Web UI
QCon 2015 - Thinking in components: A new paradigm for Web UI
 
Design Patterns for JavaScript Web Apps - JavaScript Conference 2012 - OPITZ ...
Design Patterns for JavaScript Web Apps - JavaScript Conference 2012 - OPITZ ...Design Patterns for JavaScript Web Apps - JavaScript Conference 2012 - OPITZ ...
Design Patterns for JavaScript Web Apps - JavaScript Conference 2012 - OPITZ ...
 
One Size Fits All
One Size Fits AllOne Size Fits All
One Size Fits All
 
Oracle Application Express & jQuery Mobile - OGh Apex Dag 2012
Oracle Application Express & jQuery Mobile - OGh Apex Dag 2012Oracle Application Express & jQuery Mobile - OGh Apex Dag 2012
Oracle Application Express & jQuery Mobile - OGh Apex Dag 2012
 
Introduction to Html5
Introduction to Html5Introduction to Html5
Introduction to Html5
 
HTML5 Essentials
HTML5 EssentialsHTML5 Essentials
HTML5 Essentials
 
HTML5 New and Improved
HTML5 New and ImprovedHTML5 New and Improved
HTML5 New and Improved
 
HTML5 and Mobile
HTML5 and MobileHTML5 and Mobile
HTML5 and Mobile
 
Polymer Polytechnic George Town 2014
Polymer Polytechnic George Town 2014Polymer Polytechnic George Town 2014
Polymer Polytechnic George Town 2014
 
Enjoy the vue.js
Enjoy the vue.jsEnjoy the vue.js
Enjoy the vue.js
 

More from My own sweet home!

Sencha touch 2 訓練課程 3 phonegap整合
Sencha touch 2 訓練課程 3 phonegap整合Sencha touch 2 訓練課程 3 phonegap整合
Sencha touch 2 訓練課程 3 phonegap整合
My own sweet home!
 
自造世代下的新創模式
自造世代下的新創模式自造世代下的新創模式
自造世代下的新創模式
My own sweet home!
 
物聯網 雲端智慧家庭
物聯網 雲端智慧家庭物聯網 雲端智慧家庭
物聯網 雲端智慧家庭
My own sweet home!
 
Sencha touch 2 訓練課程 2 android環境建置
Sencha touch 2 訓練課程 2 android環境建置Sencha touch 2 訓練課程 2 android環境建置
Sencha touch 2 訓練課程 2 android環境建置
My own sweet home!
 
Sencha touch 2 訓練課程 1 建置專案環境
Sencha touch 2 訓練課程 1 建置專案環境Sencha touch 2 訓練課程 1 建置專案環境
Sencha touch 2 訓練課程 1 建置專案環境
My own sweet home!
 
Ch3 文創產業網路行銷_Ch3-露天拍賣入門與實務 商品管理
Ch3 文創產業網路行銷_Ch3-露天拍賣入門與實務 商品管理Ch3 文創產業網路行銷_Ch3-露天拍賣入門與實務 商品管理
Ch3 文創產業網路行銷_Ch3-露天拍賣入門與實務 商品管理My own sweet home!
 
文創產業網路行銷_Ch1 1 - 常用服務申請與使用
文創產業網路行銷_Ch1 1 - 常用服務申請與使用文創產業網路行銷_Ch1 1 - 常用服務申請與使用
文創產業網路行銷_Ch1 1 - 常用服務申請與使用My own sweet home!
 
文創產業網路行銷_Ch2 露天拍賣入門與實務 基本操作
文創產業網路行銷_Ch2 露天拍賣入門與實務 基本操作文創產業網路行銷_Ch2 露天拍賣入門與實務 基本操作
文創產業網路行銷_Ch2 露天拍賣入門與實務 基本操作My own sweet home!
 
文創產業網路行銷_Ch1 課程介紹與準備
文創產業網路行銷_Ch1 課程介紹與準備文創產業網路行銷_Ch1 課程介紹與準備
文創產業網路行銷_Ch1 課程介紹與準備
My own sweet home!
 
Java API for WebSocket 實作介紹
Java API for WebSocket 實作介紹Java API for WebSocket 實作介紹
Java API for WebSocket 實作介紹
My own sweet home!
 
電子商務軟體 管理與實務 Course Introduction
電子商務軟體 管理與實務 Course Introduction電子商務軟體 管理與實務 Course Introduction
電子商務軟體 管理與實務 Course IntroductionMy own sweet home!
 
行動商務 - PhoneGapBuild and Upto Market
行動商務 - PhoneGapBuild and Upto Market行動商務 - PhoneGapBuild and Upto Market
行動商務 - PhoneGapBuild and Upto MarketMy own sweet home!
 
行動商務實務 - PhoneGap Advance
行動商務實務 - PhoneGap Advance行動商務實務 - PhoneGap Advance
行動商務實務 - PhoneGap AdvanceMy own sweet home!
 
行動商務實務 - PhoneGap Basic
行動商務實務 - PhoneGap Basic 行動商務實務 - PhoneGap Basic
行動商務實務 - PhoneGap Basic My own sweet home!
 
Apache cordova 開發環境建置
Apache cordova 開發環境建置Apache cordova 開發環境建置
Apache cordova 開發環境建置
My own sweet home!
 
行動開店 交易與支付 APPZ - 101-1學期 行動商務管理實務 第六週
行動開店 交易與支付 APPZ - 101-1學期 行動商務管理實務 第六週行動開店 交易與支付 APPZ - 101-1學期 行動商務管理實務 第六週
行動開店 交易與支付 APPZ - 101-1學期 行動商務管理實務 第六週
My own sweet home!
 
創業從零開始
創業從零開始創業從零開始
創業從零開始
My own sweet home!
 
Web based mobile devlopment 快速簡介
Web based mobile devlopment 快速簡介Web based mobile devlopment 快速簡介
Web based mobile devlopment 快速簡介
My own sweet home!
 
開放原始碼 Ch3.2 mobile - oss - oss行動領域-2 (ver1.0)
開放原始碼 Ch3.2 mobile - oss - oss行動領域-2 (ver1.0)開放原始碼 Ch3.2 mobile - oss - oss行動領域-2 (ver1.0)
開放原始碼 Ch3.2 mobile - oss - oss行動領域-2 (ver1.0)My own sweet home!
 

More from My own sweet home! (20)

Sencha touch 2 訓練課程 3 phonegap整合
Sencha touch 2 訓練課程 3 phonegap整合Sencha touch 2 訓練課程 3 phonegap整合
Sencha touch 2 訓練課程 3 phonegap整合
 
自造世代下的新創模式
自造世代下的新創模式自造世代下的新創模式
自造世代下的新創模式
 
物聯網 雲端智慧家庭
物聯網 雲端智慧家庭物聯網 雲端智慧家庭
物聯網 雲端智慧家庭
 
Sencha touch 2 訓練課程 2 android環境建置
Sencha touch 2 訓練課程 2 android環境建置Sencha touch 2 訓練課程 2 android環境建置
Sencha touch 2 訓練課程 2 android環境建置
 
Sencha touch 2 訓練課程 1 建置專案環境
Sencha touch 2 訓練課程 1 建置專案環境Sencha touch 2 訓練課程 1 建置專案環境
Sencha touch 2 訓練課程 1 建置專案環境
 
Ch3 文創產業網路行銷_Ch3-露天拍賣入門與實務 商品管理
Ch3 文創產業網路行銷_Ch3-露天拍賣入門與實務 商品管理Ch3 文創產業網路行銷_Ch3-露天拍賣入門與實務 商品管理
Ch3 文創產業網路行銷_Ch3-露天拍賣入門與實務 商品管理
 
文創產業網路行銷_Ch1 1 - 常用服務申請與使用
文創產業網路行銷_Ch1 1 - 常用服務申請與使用文創產業網路行銷_Ch1 1 - 常用服務申請與使用
文創產業網路行銷_Ch1 1 - 常用服務申請與使用
 
文創產業網路行銷_Ch2 露天拍賣入門與實務 基本操作
文創產業網路行銷_Ch2 露天拍賣入門與實務 基本操作文創產業網路行銷_Ch2 露天拍賣入門與實務 基本操作
文創產業網路行銷_Ch2 露天拍賣入門與實務 基本操作
 
文創產業網路行銷_Ch1 課程介紹與準備
文創產業網路行銷_Ch1 課程介紹與準備文創產業網路行銷_Ch1 課程介紹與準備
文創產業網路行銷_Ch1 課程介紹與準備
 
Java API for WebSocket 實作介紹
Java API for WebSocket 實作介紹Java API for WebSocket 實作介紹
Java API for WebSocket 實作介紹
 
電子商務軟體 管理與實務 Course Introduction
電子商務軟體 管理與實務 Course Introduction電子商務軟體 管理與實務 Course Introduction
電子商務軟體 管理與實務 Course Introduction
 
行動商務 - PhoneGapBuild and Upto Market
行動商務 - PhoneGapBuild and Upto Market行動商務 - PhoneGapBuild and Upto Market
行動商務 - PhoneGapBuild and Upto Market
 
行動商務實務 - PhoneGap Advance
行動商務實務 - PhoneGap Advance行動商務實務 - PhoneGap Advance
行動商務實務 - PhoneGap Advance
 
行動商務實務 - PhoneGap Basic
行動商務實務 - PhoneGap Basic 行動商務實務 - PhoneGap Basic
行動商務實務 - PhoneGap Basic
 
Apache cordova 開發環境建置
Apache cordova 開發環境建置Apache cordova 開發環境建置
Apache cordova 開發環境建置
 
行動開店 交易與支付 APPZ - 101-1學期 行動商務管理實務 第六週
行動開店 交易與支付 APPZ - 101-1學期 行動商務管理實務 第六週行動開店 交易與支付 APPZ - 101-1學期 行動商務管理實務 第六週
行動開店 交易與支付 APPZ - 101-1學期 行動商務管理實務 第六週
 
創業從零開始
創業從零開始創業從零開始
創業從零開始
 
行動技術開發概論
行動技術開發概論行動技術開發概論
行動技術開發概論
 
Web based mobile devlopment 快速簡介
Web based mobile devlopment 快速簡介Web based mobile devlopment 快速簡介
Web based mobile devlopment 快速簡介
 
開放原始碼 Ch3.2 mobile - oss - oss行動領域-2 (ver1.0)
開放原始碼 Ch3.2 mobile - oss - oss行動領域-2 (ver1.0)開放原始碼 Ch3.2 mobile - oss - oss行動領域-2 (ver1.0)
開放原始碼 Ch3.2 mobile - oss - oss行動領域-2 (ver1.0)
 

Recently uploaded

Additional Benefits for Employee Website.pdf
Additional Benefits for Employee Website.pdfAdditional Benefits for Employee Website.pdf
Additional Benefits for Employee Website.pdf
joachimlavalley1
 
The Challenger.pdf DNHS Official Publication
The Challenger.pdf DNHS Official PublicationThe Challenger.pdf DNHS Official Publication
The Challenger.pdf DNHS Official Publication
Delapenabediema
 
2024.06.01 Introducing a competency framework for languag learning materials ...
2024.06.01 Introducing a competency framework for languag learning materials ...2024.06.01 Introducing a competency framework for languag learning materials ...
2024.06.01 Introducing a competency framework for languag learning materials ...
Sandy Millin
 
A Strategic Approach: GenAI in Education
A Strategic Approach: GenAI in EducationA Strategic Approach: GenAI in Education
A Strategic Approach: GenAI in Education
Peter Windle
 
The Accursed House by Émile Gaboriau.pptx
The Accursed House by Émile Gaboriau.pptxThe Accursed House by Émile Gaboriau.pptx
The Accursed House by Émile Gaboriau.pptx
DhatriParmar
 
Model Attribute Check Company Auto Property
Model Attribute Check Company Auto PropertyModel Attribute Check Company Auto Property
Model Attribute Check Company Auto Property
Celine George
 
Instructions for Submissions thorugh G- Classroom.pptx
Instructions for Submissions thorugh G- Classroom.pptxInstructions for Submissions thorugh G- Classroom.pptx
Instructions for Submissions thorugh G- Classroom.pptx
Jheel Barad
 
Unit 8 - Information and Communication Technology (Paper I).pdf
Unit 8 - Information and Communication Technology (Paper I).pdfUnit 8 - Information and Communication Technology (Paper I).pdf
Unit 8 - Information and Communication Technology (Paper I).pdf
Thiyagu K
 
The approach at University of Liverpool.pptx
The approach at University of Liverpool.pptxThe approach at University of Liverpool.pptx
The approach at University of Liverpool.pptx
Jisc
 
1.4 modern child centered education - mahatma gandhi-2.pptx
1.4 modern child centered education - mahatma gandhi-2.pptx1.4 modern child centered education - mahatma gandhi-2.pptx
1.4 modern child centered education - mahatma gandhi-2.pptx
JosvitaDsouza2
 
How libraries can support authors with open access requirements for UKRI fund...
How libraries can support authors with open access requirements for UKRI fund...How libraries can support authors with open access requirements for UKRI fund...
How libraries can support authors with open access requirements for UKRI fund...
Jisc
 
Phrasal Verbs.XXXXXXXXXXXXXXXXXXXXXXXXXX
Phrasal Verbs.XXXXXXXXXXXXXXXXXXXXXXXXXXPhrasal Verbs.XXXXXXXXXXXXXXXXXXXXXXXXXX
Phrasal Verbs.XXXXXXXXXXXXXXXXXXXXXXXXXX
MIRIAMSALINAS13
 
Introduction to AI for Nonprofits with Tapp Network
Introduction to AI for Nonprofits with Tapp NetworkIntroduction to AI for Nonprofits with Tapp Network
Introduction to AI for Nonprofits with Tapp Network
TechSoup
 
special B.ed 2nd year old paper_20240531.pdf
special B.ed 2nd year old paper_20240531.pdfspecial B.ed 2nd year old paper_20240531.pdf
special B.ed 2nd year old paper_20240531.pdf
Special education needs
 
Guidance_and_Counselling.pdf B.Ed. 4th Semester
Guidance_and_Counselling.pdf B.Ed. 4th SemesterGuidance_and_Counselling.pdf B.Ed. 4th Semester
Guidance_and_Counselling.pdf B.Ed. 4th Semester
Atul Kumar Singh
 
Unit 2- Research Aptitude (UGC NET Paper I).pdf
Unit 2- Research Aptitude (UGC NET Paper I).pdfUnit 2- Research Aptitude (UGC NET Paper I).pdf
Unit 2- Research Aptitude (UGC NET Paper I).pdf
Thiyagu K
 
The French Revolution Class 9 Study Material pdf free download
The French Revolution Class 9 Study Material pdf free downloadThe French Revolution Class 9 Study Material pdf free download
The French Revolution Class 9 Study Material pdf free download
Vivekanand Anglo Vedic Academy
 
June 3, 2024 Anti-Semitism Letter Sent to MIT President Kornbluth and MIT Cor...
June 3, 2024 Anti-Semitism Letter Sent to MIT President Kornbluth and MIT Cor...June 3, 2024 Anti-Semitism Letter Sent to MIT President Kornbluth and MIT Cor...
June 3, 2024 Anti-Semitism Letter Sent to MIT President Kornbluth and MIT Cor...
Levi Shapiro
 
Overview on Edible Vaccine: Pros & Cons with Mechanism
Overview on Edible Vaccine: Pros & Cons with MechanismOverview on Edible Vaccine: Pros & Cons with Mechanism
Overview on Edible Vaccine: Pros & Cons with Mechanism
DeeptiGupta154
 
Chapter 3 - Islamic Banking Products and Services.pptx
Chapter 3 - Islamic Banking Products and Services.pptxChapter 3 - Islamic Banking Products and Services.pptx
Chapter 3 - Islamic Banking Products and Services.pptx
Mohd Adib Abd Muin, Senior Lecturer at Universiti Utara Malaysia
 

Recently uploaded (20)

Additional Benefits for Employee Website.pdf
Additional Benefits for Employee Website.pdfAdditional Benefits for Employee Website.pdf
Additional Benefits for Employee Website.pdf
 
The Challenger.pdf DNHS Official Publication
The Challenger.pdf DNHS Official PublicationThe Challenger.pdf DNHS Official Publication
The Challenger.pdf DNHS Official Publication
 
2024.06.01 Introducing a competency framework for languag learning materials ...
2024.06.01 Introducing a competency framework for languag learning materials ...2024.06.01 Introducing a competency framework for languag learning materials ...
2024.06.01 Introducing a competency framework for languag learning materials ...
 
A Strategic Approach: GenAI in Education
A Strategic Approach: GenAI in EducationA Strategic Approach: GenAI in Education
A Strategic Approach: GenAI in Education
 
The Accursed House by Émile Gaboriau.pptx
The Accursed House by Émile Gaboriau.pptxThe Accursed House by Émile Gaboriau.pptx
The Accursed House by Émile Gaboriau.pptx
 
Model Attribute Check Company Auto Property
Model Attribute Check Company Auto PropertyModel Attribute Check Company Auto Property
Model Attribute Check Company Auto Property
 
Instructions for Submissions thorugh G- Classroom.pptx
Instructions for Submissions thorugh G- Classroom.pptxInstructions for Submissions thorugh G- Classroom.pptx
Instructions for Submissions thorugh G- Classroom.pptx
 
Unit 8 - Information and Communication Technology (Paper I).pdf
Unit 8 - Information and Communication Technology (Paper I).pdfUnit 8 - Information and Communication Technology (Paper I).pdf
Unit 8 - Information and Communication Technology (Paper I).pdf
 
The approach at University of Liverpool.pptx
The approach at University of Liverpool.pptxThe approach at University of Liverpool.pptx
The approach at University of Liverpool.pptx
 
1.4 modern child centered education - mahatma gandhi-2.pptx
1.4 modern child centered education - mahatma gandhi-2.pptx1.4 modern child centered education - mahatma gandhi-2.pptx
1.4 modern child centered education - mahatma gandhi-2.pptx
 
How libraries can support authors with open access requirements for UKRI fund...
How libraries can support authors with open access requirements for UKRI fund...How libraries can support authors with open access requirements for UKRI fund...
How libraries can support authors with open access requirements for UKRI fund...
 
Phrasal Verbs.XXXXXXXXXXXXXXXXXXXXXXXXXX
Phrasal Verbs.XXXXXXXXXXXXXXXXXXXXXXXXXXPhrasal Verbs.XXXXXXXXXXXXXXXXXXXXXXXXXX
Phrasal Verbs.XXXXXXXXXXXXXXXXXXXXXXXXXX
 
Introduction to AI for Nonprofits with Tapp Network
Introduction to AI for Nonprofits with Tapp NetworkIntroduction to AI for Nonprofits with Tapp Network
Introduction to AI for Nonprofits with Tapp Network
 
special B.ed 2nd year old paper_20240531.pdf
special B.ed 2nd year old paper_20240531.pdfspecial B.ed 2nd year old paper_20240531.pdf
special B.ed 2nd year old paper_20240531.pdf
 
Guidance_and_Counselling.pdf B.Ed. 4th Semester
Guidance_and_Counselling.pdf B.Ed. 4th SemesterGuidance_and_Counselling.pdf B.Ed. 4th Semester
Guidance_and_Counselling.pdf B.Ed. 4th Semester
 
Unit 2- Research Aptitude (UGC NET Paper I).pdf
Unit 2- Research Aptitude (UGC NET Paper I).pdfUnit 2- Research Aptitude (UGC NET Paper I).pdf
Unit 2- Research Aptitude (UGC NET Paper I).pdf
 
The French Revolution Class 9 Study Material pdf free download
The French Revolution Class 9 Study Material pdf free downloadThe French Revolution Class 9 Study Material pdf free download
The French Revolution Class 9 Study Material pdf free download
 
June 3, 2024 Anti-Semitism Letter Sent to MIT President Kornbluth and MIT Cor...
June 3, 2024 Anti-Semitism Letter Sent to MIT President Kornbluth and MIT Cor...June 3, 2024 Anti-Semitism Letter Sent to MIT President Kornbluth and MIT Cor...
June 3, 2024 Anti-Semitism Letter Sent to MIT President Kornbluth and MIT Cor...
 
Overview on Edible Vaccine: Pros & Cons with Mechanism
Overview on Edible Vaccine: Pros & Cons with MechanismOverview on Edible Vaccine: Pros & Cons with Mechanism
Overview on Edible Vaccine: Pros & Cons with Mechanism
 
Chapter 3 - Islamic Banking Products and Services.pptx
Chapter 3 - Islamic Banking Products and Services.pptxChapter 3 - Islamic Banking Products and Services.pptx
Chapter 3 - Islamic Banking Products and Services.pptx
 

JQuery Mobile UI

  • 1. JQuery Mobile Framework 文孝義 方毓賢 101-1學期
  • 2. 大綱  Overview of JQuery Mobile  Prepared Environment  Pages & dialogs  Toolbars: Headers & Footers  Buttons  Listviews  Form  附言 2012/11/7 2
  • 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. Overview of JQuery Mobile  架構 2012/11/7 4
  • 5. Prepared Environment  JQuery Mobile http://jquerymobile.com  Last Version: 1.2.0  Supported JQuery 1.8 2012/11/7 5
  • 6. Prepared Environment 2012/11/7 6
  • 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. 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. 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. 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. 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. 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. Pages & dialogs  Page transitions  Pop  Flip  Turn  Flow  Slidefade  Slide  Slideup  slidedown 2012/11/7 13
  • 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. 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. 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. Toolbars: Headers & Footers 2012/11/7 17
  • 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 附言  需透過Ajax的方式利用Http Get/Post傳送資 料到後端主機，取回資料。  使用JavaScript 抓取UI元件內容與變更，或 是控制UI元件的狀態。  JavaScript是唯一的程式語言  後端主機才是最難處理  資料庫  查詢資料 2012/11/7 35