JQuery Mobile 基礎 ( 開發跨平台行動裝置網頁 )

JQuery Mobile基礎(開發跨平台行動裝置網頁) 靜宜大學資管系楊子青

大綱 • jQuery Mobile簡介 • jQuery Mobile基本網頁架構 • jQuery Mobile Lists (列表) • jQuery Mobile 按鈕

1. jQuery Mobile簡介 • 行動裝置普及 • 會寫PC瀏覽的網頁已經不夠，需要開發行動裝置網頁 • 行動裝置品牌眾多，光使用Apple iOS和Android系統就有多種不同規格尺寸的手持裝置，更遑論平板裝置 • jQuery推出一套新的函式庫jQuery Mobile，希望統一目前行動裝置的使用者介面

jQuery Mobile特色 • jQuery Mobile使用jQuery函數庫，因此語法相同 • 使用介面是使用標記驅動(Markup-driven)來設定與配置 • 直接使用HTML 5的data-*標籤來建立使用介面元素 • 提供觸摸、觸摸且按住、滑過和方向改變等自訂事件，可以輕鬆處理手機行動裝置的觸控操作。 • 使用佈景(Themes)來建立一致的使用介面外觀。

jQuery MobileDemo • http://www.w3schools.com/jquerymobile/

jQuery Mobile引用 • 官方網站 • http://jquerymobile.com/ • 最新版本1.3.2 • 引用方式 • jQuery Mobile官網下載檔案 • http://jquerymobile.com/download/ • 透過URL連結到jQuery Mobile的CDN-hosted • <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" /> • <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> • <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>

2. jQuery Mobile基本網頁架構 • header、content與footer組成 <div data-role="page">  <divdata-role="header"> 標題(header) </div> <div data-role="content"> 網頁內容(content) </div> <div data-role="footer"> 頁尾(footer) </div> </div>

jQuery Mobile完整網頁實例 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" /> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script> </head> <body> <div data-role="page">  <div data-role="header"> 標題(header) </div> <div data-role="content"> 網頁內容(content) </div> <div data-role="footer"> 頁尾(footer) </div> </div> </body> </html> 指定行動裝置的縮放比例

行動裝置模擬器 • Opera Mobile Emulator • 可在桌上型電腦執行的手機版瀏覽器，最新版Opera Mobile Classic Emulator 12.1 for Windows • http://www.opera.com/zh-tw/developer/mobile-emulator

自行練習

3. jQuery MobileLists (列表) • 有序清單(ordered list) • <ol>標記+<li>標記 • 無序清單(unordered list) • <ul>標記+<li>標記 <div data-role="content"> <h2>Ordered List:</h2> <ol data-role="listview"> <li><a href="http://www.pu.edu.tw">靜宜大學</a></li> <li><a href="http://www.csim.pu.edu.tw">靜宜資管</a></li> </ol> <h2>Unordered List:</h2> <ul data-role="listview"> <li><a href="http://www1.pu.edu.tw/~tcyang">楊子青</a></li> </ul> </div>

(1) jQuery Mobile List Views • 圓角 data-inset="true" • 分群 data-role="list-divider" attribute to an <li> element <div data-role="content"> <ul data-role="listview" data-inset="true"> <li data-role="list-divider">靜宜大學資訊學院</li> <li><a href="http://www.csim.pu.edu.tw">資管系</a></li> <li><a href="http://www.csie.pu.edu.tw">資工系</a></li> <li><a href="http://www.csce.pu.edu.tw">資傳系</a></li> <li data-role="list-divider">楊子青</a></li> <li><a href="http://www1.pu.edu.tw/~tcyang">個人網頁</a></li> </ul> </div>

jQuery Mobile List Views • 根據字母自動分群 data-autodividers="true" <div data-role="content"> <ul data-role="listview" data-inset="true" data-autodividers="true"> <li><a href="http://www.csim.pu.edu.tw">資管系</a></li> <li><a href="http://www.csie.pu.edu.tw">資工系</a></li> <li><a href="http://www.csce.pu.edu.tw">資傳系</a></li> <li><a href="http://www.ba.pu.edu.tw">企管系</a></li> <li><a href="http://www.csim.pu.edu.tw">CSIM</a></li> <li><a href="http://www.csie.pu.edu.tw">CSIE</a></li> <li><a href="http://www.csce.pu.edu.tw">CSCE</a></li> </ul> </div>

jQuery Mobile List Views • Search Filter(搜尋過濾)： data-filter="true" <div data-role="content"> <ul data-role="listview" data-inset="true" data-autodividers="true" data-filter="true"> … • data-filter-placeholder="Search For Names" <div data-role="content"> <ul data-role="listview" data-inset="true" data-autodividers="true"data-filter="true"data-filter-placeholder="Search For Names"> …

(2) jQuery Mobile List Content • jQuery Mobile List Thumbnails (縮圖) • 運用img標籤，網頁會自動縮圖成80*80px <li> <a href="http://www1.pu.edu.tw/~tcyang"> <img src="http://www.cs.pu.edu.tw/~tcyang/george/image/tcyang/drifter/drifter2.jpg"> <h2>楊子青</h2> <p>唸碩士班尚未發福，在研究室拍的照片...</p> </a> </li>

jQuery Mobile List Content • 圖示 • class="ui-li-icon" <li> <a href="http://www1.pu.edu.tw/~tcyang"> <img src=http://www.cs.pu.edu.tw/~tcyang/george/image/tcyang/drifter/drifter2.jpg class="ui-li-icon">楊子青</a> </li>

jQuery Mobile List Content • Split Buttons • 同一個<li>標籤，放入第二個超鏈結 <li> <a href="http://www1.pu.edu.tw/~tcyang"> <img src=http://www.cs.pu.edu.tw/~tcyang/george/image/tcyang/drifter/drifter2.jpg class="ui-li-icon" >楊子青</a> <a href="http://www.cs.pu.edu.tw/~tcyang/georgeM/project/project.htm">競賽指導</a> </li>

jQuery Mobile List Content • Count Bubbles • display numbers associated with list items <li> <a href="http://www1.pu.edu.tw/~tcyang"> <img src=http://www.cs.pu.edu.tw/~tcyang/george/image/tcyang/drifter/drifter2.jpg class="ui-li-icon" >楊子青 <span class="ui-li-count">25</span></a> <a href="http://www.cs.pu.edu.tw/~tcyang/georgeM/project/project.htm" data-rel="dialog" data-transition="pop">競賽指導</a> </li>

4. jQuery Mobile 按鈕 • 三種設法 • <button>Button</button> • <input type="button" value="Button"> • 在a元素加上data-role="button"屬性 <a href="#" data-role="button">確定</a> • 如果使用介面擁有多個相關按鈕，可以在div元素使用data-role="controlgroup"屬性來群組多個按鈕 <div data-role="controlgroup" data-type="horizontal"> <a href="#" data-role="button">確定</a> <a href="#" data-role="button">放棄</a> <a href="#" data-role="button">取消</a> </div> <a href=“#” data-role=“button”>其他</a>

參考資料 • 教科書 • 榮欽科技、陳婉凌，網頁設計必學的程式實作技術：HTML5+CSS3+JavaScript，2012年，博碩。 • Chap 18: 開發跨平台行動裝置網頁jQuery Mobile • 網路資源 • http://jquerymobile.com/ • http://www.w3schools.com/jquerymobile/

JQuery Mobile 基礎 ( 開發跨平台行動裝置網頁 )