Upload
quade
View
112
Download
6
Embed Size (px)
DESCRIPTION
JQuery Mobile 基礎 ( 開發跨平台行動裝置網頁 ). 靜宜大學 資管系 楊子青. 大綱. jQuery Mobile 簡介 jQuery Mobile 基本網頁架構 jQuery Mobile Lists ( 列表 ) jQuery Mobile 按鈕. 1. jQuery Mobile 簡介. 行動裝置普及 會寫PC瀏覽的網頁已經不夠, 需要開發行動裝置網頁 行動裝置品牌 眾多,光使用 Apple iOS和Android系統就有多種不同規格尺寸的手持裝置,更遑論平板裝置 - PowerPoint PPT Presentation
Citation preview
網頁設計實務
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"> <!-- 開始一個 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"> <!-- 開始一個 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
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>
網頁設計實務
1818
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>
網頁設計實務
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/