220 likes | 465 Views
JQuery Mobile 基礎 ( 開發跨平台行動裝置網頁 ). 靜宜大學 資管系 楊子青. 大綱. jQuery Mobile 簡介 jQuery Mobile 基本網頁架構 jQuery Mobile Lists ( 列表 ) jQuery Mobile 按鈕. 1. jQuery Mobile 簡介. 行動裝置普及 會寫PC瀏覽的網頁已經不夠, 需要開發行動裝置網頁 行動裝置品牌 眾多,光使用 Apple iOS和Android系統就有多種不同規格尺寸的手持裝置,更遑論平板裝置
E N D
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"> <!--開始一個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"> <!--開始一個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/