中央資管 - 43013
文孝義 方毓賢 101-1 學期
JQuery Mobile Framework
04/10/2023 2
大綱
Overview of JQuery Mobile Prepared Environment Pages & dialogs Toolbars: Headers & Footers Buttons Listviews Form 附言
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
04/10/2023 4
Overview of JQuery Mobile
架構
04/10/2023 5
Prepared Environment
JQuery Mobilehttp://jquerymobile.com
Last Version: 1.2.0 Supported JQuery 1.8
04/10/2023 6
Prepared Environment
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)
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
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>
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>
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>
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>
04/10/2023 13
Pages & dialogs
Page transitions Pop Flip Turn Flow Slidefade Slide Slideup slidedown
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>
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>
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>
04/10/2023 17
Toolbars: Headers & Footers
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>
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>
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>
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>
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>
04/10/2023 23
Buttons
Button Link
<div data-role="content"> <a href="#page2" data-role="button" data-transition="turn">Goto Next</a></div>
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>
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>
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>
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>
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>
04/10/2023 29
Form
Text inputs
<div data-role="content"> <label for="sid"> 學號 :</label> <input type="text" name="sid" id="sid" value="" /></div>
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>
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>
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>
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>
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>
04/10/2023 35
附言
需透過 Ajax 的方式利用 Http Get/Post 傳送資料到後端主機,取回資料。
使用 JavaScript 抓取 UI 元件內容與變更,或是控制 UI 元件的狀態。
JavaScript 是唯一的程式語言 後端主機才是最難處理
資料庫 查詢資料