JQuery Mobile基礎 (開發跨平台行動裝置網頁) 靜宜大學 資管系 楊子青
jQuery Mobile Lists (列表) 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 Mobile Demo http://www.w3schools.com/jquerymobile/
jQuery Mobile引用 官方網站 最新版本1.4.5 引用方式 jQuery Mobile官網下載檔案 http://jquerymobile.com/ 最新版本1.4.5 引用方式 jQuery Mobile官網下載檔案 http://jquerymobile.com/download/ 透過URL連結到jQuery Mobile的CDN-hosted <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" /> <script src="http://code.jquery.com/jquery-2.1.4.js"></script> <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
header、content與footer組成 2. jQuery Mobile基本網頁架構 header、content與footer組成 <div data-role="page"> <!--開始一個page --> <div data-role="header"> 標題(header) </div> <div data-role="content"> 網頁內容(content) <div data-role="footer"> 頁尾(footer)
jQuery Mobile完整網頁實例 指定行動裝置的縮放比例 無法直接在chrome瀏覽 需將檔案上傳到網頁空間 <!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.4.5/jquery.mobile-1.4.5.min.css" /> <script src="http://code.jquery.com/jquery-2.1.4.js"></script> <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script></head> <body> <div data-role="page"> <!--開始一個page --> <div data-role="header"> 標題(header) </div> <div data-role="content"> 網頁內容(content) <div data-role="footer"> 頁尾(footer) </body> </html> 指定行動裝置的縮放比例 無法直接在chrome瀏覽 需將檔案上傳到網頁空間
行動裝置模擬器 Opera Mobile Emulator 可在桌上型電腦執行的手機版瀏覽器，最新版Opera Mobile Classic Emulator 12.1 for Windows http://www.opera.com/zh-tw/developer/mobile-emulator
自行練習
補充：jQuery Mobile Touch Events tap 手指觸行動裝置 <script> $(document).ready(function(){ $("p").on("tap",function(){ $(this).hide(); }); </script> taphold 手指觸行動裝置，一秒以上 swipe, swipeleft, swiperight 滑動行動裝置 參考資料 http://www.w3schools.com/jquerymobile/jquerymobile_events_touch.asp
3. jQuery Mobile Lists (列表) 有序清單(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="輸入關鍵字進行搜尋"> …
(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>
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> </div> <a href=“#” data-role=“button”>其他</a>
參考資料 教科書 網路資源 榮欽科技、陳婉凌，網頁設計必學的程式實作技術：HTML5+CSS3+JavaScript，2012年，博碩。 Chap 18: 開發跨平台行動裝置網頁jQuery Mobile 網路資源 http://jquerymobile.com/ http://www.w3schools.com/jquerymobile/