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

網頁設計實務

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

頁 )靜宜大學資管系楊子青

網頁設計實務

22

大綱

jQuery Mobile 簡介

jQuery Mobile 基本網頁架構

jQuery Mobile Lists ( 列表 )

jQuery Mobile 按鈕

網頁設計實務

33

1. jQuery Mobile簡介行動裝置普及

– 會寫 PC瀏覽的網頁已經不夠，需要開發行動裝置網頁

– 行動裝置品牌眾多，光使用 Apple iOS和 Android系統就有多種不同規格尺寸的手持裝置，更遑論平板裝置

– jQuery推出一套新的函式庫 jQuery Mobile，希望統一目前行動裝置的使用者介面

網頁設計實務

44

jQuery Mobile特色 jQuery Mobile 使用 jQuery 函數庫，因此語法相同

使用介面是使用標記驅動 (Markup-driven) 來設定與配置– 直接使用 HTML 5的 data-* 標籤來建立使用介面元素

提供觸摸、觸摸且按住、滑過和方向改變等自訂事件，可以輕鬆處理手機行動裝置的觸控操作。

使用佈景 (Themes) 來建立一致的使用介面外觀。

網頁設計實務

55

jQuery Mobile Demo

http://www.w3schools.com/jquerymobile/

網頁設計實務

66

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>

網頁設計實務

77

2. jQuery Mobile基本網頁架構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>

</div>

網頁設計實務

88

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>

指定行動裝置的縮放比例

網頁設計實務

99

行動裝置模擬器Opera Mobile Emulator

– 可在桌上型電腦執行的手機版瀏覽器，最新版Opera Mobile Classic Emulator 12.1 for Windows

http://www.opera.com/zh-tw/developer/mobile-emulator

網頁設計實務

1010

自行練習

網頁設計實務

1111

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>

網頁設計實務

1212

(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>

網頁設計實務

1313

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>

網頁設計實務

1414

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"> …

網頁設計實務

1515

(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>

網頁設計實務

1616

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>

網頁設計實務

1717


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>

網頁設計實務

1818


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>

網頁設計實務

1919

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>

網頁設計實務

2020

參考資料

教科書– 榮欽科技、陳婉凌，網頁設計必學的程式實作技術：

HTML5+CSS3+JavaScript， 2012 年，博碩。 Chap 18: 開發跨平台行動裝置網頁 jQuery Mobile

網路資源– http://jquerymobile.com/ – http://www.w3schools.com/jquerymobile/

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

Documents

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