Watch - TWNIC 財團法人台灣網路資訊中心 · 察及分析，一起掌握網路發展潮流與機會。主題包括 「剖析網路行銷｣、「服務上雲端｣、「行動網站與
行動網頁開發: jQuery...
57
Transcript of 行動網頁開發: jQuery...
行動網頁開發: jQuery Mobile
台大計中 許凱平
101 年網路技術推廣研討會
http://goo.gl/w8Twv
主要參考書籍: MASTER MOBILE WEB APPS WITH JQUERY MOBILE
http://store.elated.com/
課程大綱
• 簡介
• 快速入門
– 製作行動網頁
• 按鍵
• 工具列
• 對話盒
• 表單
• 清單
• 格式設定
• 佈景主題
• jQuery Mobile API
• 範例
Mobile Web Apps
• 以 HTML 5 技術提供資訊服務
• 純網頁 (HTML/CSS/JS) == Mobile Web Pages
–加入主畫面螢幕
• 混合模式
–主體為應用程式(Native Code)
–內容為網頁(WebUI)
• PhoneGap
• Rhodes
Mobile Web Apps 的優點
• 網頁幾乎可以在所有手機的瀏覽器運行
–只要寫一個版本就可以了
• 利用目前的技術就可以建置
–後端: PHP 或 C# 或 Java
–豐富的應用程式框架可供使用
–減少開發成本與時程
• 容易維護
–不怕找不到程式師
Mobile Web Apps 的缺點
• 存取本地資源的限制 – 如同瀏覽器的沙盒模式
• 不能存取本地檔案系統
– New Browser API
– 混合模式 => 透過PhoneGap
• 執行速度通常較慢 – Chrome V8 JavaScript Engine
• 使用時通常需要網路連線 – Mobile App Cache / Web Database(HTML5)
– Offline Mode
jQuery Mobile 支援的行動平臺
• Apple iOS 3.2 ~ 5.1
– iPhone 3+, iPod Touch and iPad
• Android 2.1 ~ 4.0
• Windows Phone 7~7.5
• Blackberry 6~7
• 瀏覽器: IE Chrome Firefox Opera…
• 詳細清單請參考 jQuery Mobile 網站
jQuery vs jQuery Mobile
• jQuery
–是一套跨瀏覽器的 JavaScript 函式庫
– IE6+
• jQuery Mobile
–是一套建置於 jQuery 的使用者介面架構
–專為觸控與手持裝置設計 (也可用在桌面)
– IE 7~9
安裝與開發
安裝
取得程式碼(JS/CSS)與圖示
• 利用 CDN
• 下載
開發
• 線上 – http://jsbin.com/
– http://codiqa.com/
• 軟體 – VS2010
– Notepad++
– Eclipse
測試
實機測試
• iPhone – Setting
– Safari
– Advanced
– Debug Console (On)
模擬器
• 手機模擬器 – iOS 模拟器
– Android 模擬器
– Windows Phone
• 瀏覽器 – Firefox
• Web Developer Ext.
• Firebug
– Opera Mobile
jQuery Mobile 的特色
• Single-page app (SPA)
– Multiple mobile pages in single HTML file
• UI components
– Mobile page • Not html page
– HTML5: data-*
• Ajax-driven page navigation
Mobile Page HTML 5 div + data-role
<page>
<header>
<content>
<footer>
<div data-role=page> <div data-role=header>
<div data-role=content>
<div data-role=footer>
jQuery Mobile 的使用者介面元件
UI Components
• page (Mobile Page, <div>) – header (bar)
– content (area)
– footer (bar)
• Link (<a>) – As Button
– As Menu Item
• Toolbar – Header bar
• Title
• Button
– Footer bar
基本架構
<div data-role="page"> <div data-role="header"> <h1>國立臺灣大學</h1> </div> <div data-role="content">國立臺灣大學，簡稱臺灣大學、臺大，是中華民國一所國立研究型綜合大學，也是臺灣第一所現代大學。</div> <div data-role="footer"> <a href="http://www.ntu.edu.tw">網站</a> </div> </div>
做做看
• 連線至 jsbin.com
• 另開分頁連線至 jQuery Mobile
–選擇 download
– Copy-and-Paste Snippet for CDN-hosted files
• 在 瀏覽器檢視
• 在 iOS 模擬器檢視
DOCTYPE and viewport
<!DOCTYPE html> <html lang="zh-tw"> <head> <meta charset="utf-8" /> <title>jQuery Mobile</title>
<!DOCTYPE html PUBLIC ” -//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=big5">
XHTML 1.0
HTML 5
viewport meta
<meta
name="viewport"
content="width=device-width, initial-scale=1 , user-scalable=no "/>
• width=device-width • initial-scale=1 • user-scalable=no
Default: 980 (pixels, apple) 200 to 10,000.
HTML 5 input type
• email, tel, url, number
• time, date, month, week, datetime, color
Buttons
• 預設會以 Button 顯示的元素
– <a> in header & footer
– Form buttons
• Button Icons
– data-icon, data-iconpos, data-mini
• Grouping Buttons
• Custom Icon
<a> as Buttons
• 超連結( <a>)
– 在 header 跟 footer 區域的超連結會自動以Button 風格顯示
– 在 content 區域的的超連結可以用 role 設定 • data-role="button“
– Button 的大小預設為頁寬，可用 inline 縮小 • data-inline="true"
Form buttons
• <button>
• <input type=button|submit|reset|image>
Button Icons
• data-icon • data-iconpos
Icon 相對於文字的位置
left | right | top |bottom | notext (不顯示文字)
• data-mini
Grouping
<div data-role="controlgroup" data-type="horizontal">
Making your own icons
• myapp-phone
• 18x18, 36x36 png-8 transparent
• only screen and (min-resolution: 240dpi) {
.ui-icon-myapp-phone {
ackground-image:
url(/myapp/icons/phone-hd.png); }
• http://glyphish.com/
Theme
Toolbar
• Types
– Header: Title + Up to two buttons
– Footer
• positioning options
– inline
– Fixed: 出現在每一頁
Navbar
• footer
• header
Content formatting
• Collapsible content markup
– Nested Collapsibles
– Collapsible sets (每次只有一個打開)
Form
• Markup Conventions
– id must be unique across the pages in a site
– label-for
• Dynamic form layout
– Narrow: label display:block
– Wide: label display:inline (two columns)
• Field containers
Text inputs
• Single Line
– Plain Text
– Password
– Url
– Tel
• Multiple Lines
– Textarea
• Search
– type="search“
Title
• One html file can contain multiple jqm-pages.
• One html file could contain one <tilte> in <head> section only, but each page may have different title.
<page> <tilte>My Page</title>
</page>
<div data-role="page" id="mypage" data-title="My Page">
(<), 上一頁, back
• <a href="p1.html" data-rel="back">Back</a>
• <a href="previous-page.html" data-rel="back" data-icon="arrow-l">Back</a>
• <div data-role="page" data-add-back-btn="true” data-back-btn-theme="b" >
$(document).bind("mobileinit", function({ $.mobile.page.prototype.options.addBackBtn = true;
$.mobile.page.prototype.options.backBtnText = "Prev";
});
Footer
<div data-role="footer" class="ui-bar”>
<a href="menu.html">Menu</a>
<a href="recipes.html">Recipes</a>
<a href="ingredients.html">Ingredients</a>
<a href="settings.html">Settings</a>
</div>
navbar
<div data-role="footer”>
<div data-role="navbar" data-grid="a"> <ul> <li><a href="menu.html">Menu</a></li> <li>
<a href="recipes.html" class="ui-btn-active">Recipes
</a></li>
<li><a href="ingredients.html">Ingredients</a></li> <li><a href="settings.html">Settings</a></li>
</ul> </div>
</div>
Positioning Toolbars
• Inline (the default mode)
• Fixed
• Fullscreen
• the footers in all the pages have a data-id attribute with the same value
Dialog
• <page>的一種呈現方式
• 由誰決定
–指符 <a data-rel="dialog">
–所指 <div data-role="dialog">
• 指符決定
–所指只是普通的 jqm page
– jQM styles the target page to look like a dialog
Dialog Command
• Close
– $('#myDialog').dialog('close')
– data-rel="back"
– data-close-btn-text="newText"
• $(document).bind("mobileinit", function() { $.mobile.dialog.prototype.options.closeBtnText = "newText";
• });
FORM
Prevent Ajax
• Regular Forms Ajax jqm forms
• Jqm Forms Ajax Prevention
– <form data-ajax="false">
– <input type="text" data-role="none">
• prevent jQuery Mobile from enhancing this control.
– $(document).bind("mobileinit", function() { $.mobile.page.prototype.options.keepNative = "input[type='text'], textarea.noenhance"; });
Additional Markup
<div|fieldset data- role="fieldcontain" >
Hide label: one|all <label class=ui-hidden-accessible>
<div data-role="fieldcontain”
class="ui-hide-label"> <label for="username">Username<label> <input type="texplaceholdert" name="username" id="username" ="Username">
</div>
Select • <select data-native-menu="false">
Label
Multiple/optgroup
List View
Anchor list
List Dividers
Split-Button Lists
Search Filter
data-filter-placeholder="Search list…" $.mobile.listview.prototype.options.filterPlaceholder
Forms in List Views
• Use <li> as wrapper to contain each control
• Layout grids
– Two Column Grids
• Collapsible content blocks
<div class="ui-grid-a”>
<div class="ui-block-a">(Left column content goes here)</div>
<div class="ui-block-b">(Right column content goes here)</div>
</div>
Creating Collapsible Content Blocks
• data-role="collapsible"
• <div data-role="collapsible" data-collapsed="true"> <h3>Widget Details</h3> <p>This top-of-the-range widget is available in 76 different colors. It
• comes with a leather carry case and a large cup holder.</p> </div>
Themes & Swatches
• A theme in jQuery Mobile is a CSS stylesheet file that controls the entire look of your mobile web pages.
• A theme’s CSS file also includes several swatches.
• A swatch is a set of CSS rules that govern certain aspects — primarily the colors — of three groups of page elements:
Rules of a swatch
• Bars: the header and footer toolbars, navbars
• The body content in the page
• Buttons, includes tappable list items in list views, and options in select menu overlays.
Setting a Dialog’s Swatches
• <div data-role="dialog" – data-overlay-theme="e"> ... </div>
– Control Background
• <div data-role="fieldcontain"> – <label for="numWidgets">Number of
Widgets:</label>
– <input type="range" name="numWidgets" id="numWidgets" value="3" min="1" max="10" data-theme="e" data-track-theme="b">
– </div>
Events
• pageinit –請使用 $(document).bind('pageinit')
• Touch event – tap taphold swipe swipeleft swiperight
• Virtual mouse events
• Orientationchange
• Scroll events
• Page load events
Methods
• $.mobile.changePage
• $.mobile.loadPage
• $.mobile.showPageLoadingMsg
• $.mobile.hidePageLoadingMsg
• $.mobile.fixedToolbars.show
• ….
