l j Query Mobile l j Query Mobile

網頁設計實務大綱 l j. Query Mobile簡介 l j. Query Mobile基本網頁架構 l j. Query Mobile Lists (列表) l j. Query Mobile 按鈕 2

網頁設計實務 l j. Query Mobile Demo http: //www. w 3 schools. com/jquerymobile/ 5

網頁設計實務 j. Query Mobile引用 l 官方網站 – http: //jquerymobile. com/ l 最新版本 1. 4. 5 l 引用方式 – j. Query Mobile官網下載檔案 l http: //jquerymobile. com/download/ – 透過URL連結到j. Query Mobile的CDN-hosted l l l <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> 6

網頁設計實務 2. j. Query Mobile基本網頁架構 l header、content與footer組成 <div data-role="page">  <div data-role="header"> 標題(header) </div> <div data-role="content"> 網頁內容(content) </div> <div data-role="footer"> 頁尾(footer) </div> 7

網頁設計實務 j. Query 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. 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">  <div data-role="header"> 標題(header) </div> <div data-role="content"> 網頁內容(content) </div> <div data-role="footer"> 頁尾(footer) </div> </body> </html> 無法直接在chrome瀏覽需將檔案上傳到網頁空間 8

網頁設計實務行動裝置模擬器 l Opera Mobile Emulator – 可在桌上型電腦執行的手機版瀏覽器，最新版 Opera Mobile Classic Emulator 12. 1 for Windows l http: //www. opera. com/zh-tw/developer/mobile-emulator 9

網頁設計實務 l 補充：j. Query Mobile Touch Events tap – 手指觸行動裝置 <script> $(document). ready(function(){ $("p"). on("tap", function(){ $(this). hide(); }); </script> l taphold – 手指觸行動裝置，一秒以上 l swipe, swipeleft, swiperight – 滑動行動裝置 l 參考資料 – http: //www. w 3 schools. com/jquerymobile_events_touch. asp 11

網頁設計實務 3. j. Query Mobile Lists (列表) l 有序清單(ordered list) – <ol>標記+<li>標記 l 無序清單(unordered list) – <ul>標記+<li>標記 <div data-role="content"> <h 2>Ordered List: </h 2> <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> <h 2>Unordered List: </h 2> <ul data-role="listview"> <li><a href="http: //www 1. pu. edu. tw/~tcyang">楊子青</a></li> </ul> </div> 12

網頁設計實務 (1) j. Query Mobile List Views l 圓角 data-inset="true" l 分群 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: //www 1. pu. edu. tw/~tcyang">個人網頁</a></li> </ul> </div> 13

網頁設計實務 j. Query Mobile List Views l 根據字母自動分群 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> 14

網頁設計實務 l Search j. Query Mobile List Views Filter(搜尋過濾)： data-filter="true" <div data-role="content"> <ul data-role="listview" data-inset="true" data-autodividers="true" data-filter="true"> … l data-filter-placeholder="Search For Names" (提供提示文字) <div data-role="content"> <ul data-role="listview" data-inset="true" data-autodividers="true" data-filter-placeholder="輸入關鍵字進行搜尋"> … 15

網頁設計實務 (2) j. Query Mobile List Content l j. Query Mobile List Thumbnails (縮圖) – 運用img標籤，網頁會自動縮圖成 80*80 px <li> <a href="http: //www 1. pu. edu. tw/~tcyang"> <img src="http: //www. cs. pu. edu. tw/~tcyang/george/image/tcyang/drifter 2. jpg"> <h 2>楊子青</h 2> <p>唸碩士班，在研究室拍的照片. . . </p> </a> </li> 16

網頁設計實務 j. Query Mobile List Content l 圖示 – class="ui-li-icon" <li> <a href="http: //www 1. pu. edu. tw/~tcyang"> <img src=http: //www. cs. pu. edu. tw/~tcyang/george/image/tcyang/drifter 2. jpg class="ui-li-icon" > 楊子青</a> </li> 17

網頁設計實務 j. Query Mobile List Content l Split Buttons – 同一個<li>標籤，放入第二個超鏈結 <li> <a href="http: //www 1. pu. edu. tw/~tcyang"> <img src=http: //www. cs. pu. edu. tw/~tcyang/george/image/tcyang/drifter 2. jpg class="ui-li-icon" > 楊子青</a> <a href="http: //www. cs. pu. edu. tw/~tcyang/george. M/project. htm">競賽指導</a> </li> 18

網頁設計實務 l 4. j. Query Mobile 按鈕三種設法 – <button>Button</button> – <input type="button" value="Button"> – 在a元素加上data-role="button"屬性 <a href="#" data-role="button">確定</a> l 如果使用介面擁有多個相關按鈕，可以在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> 19