Download presentation
Presentation is loading. Please wait.
1
JQuery Mobile基礎 (開發跨平台行動裝置網頁)
靜宜大學 資管系 楊子青
2
jQuery Mobile Lists (列表) jQuery Mobile 按鈕
大綱 jQuery Mobile簡介 jQuery Mobile基本網頁架構 jQuery Mobile Lists (列表) jQuery Mobile 按鈕
3
1. jQuery Mobile簡介 行動裝置普及 會寫PC瀏覽的網頁已經不夠，需要開發行動裝置網頁
行動裝置品牌眾多，光使用Apple iOS和Android系統就有多種不同規格尺寸的手持裝置，更遑論平板裝置 jQuery推出一套新的函式庫jQuery Mobile，希望統一目前行動裝置的使用者介面
4
jQuery Mobile特色 jQuery Mobile使用jQuery函數庫，因此語法相同
使用介面是使用標記驅動(Markup-driven)來設定與配置 直接使用HTML 5的data-*標籤來建立使用介面元素 提供觸摸、觸摸且按住、滑過和方向改變等自訂事件，可以輕鬆處理手機行動裝置的觸控操作。 使用佈景(Themes)來建立一致的使用介面外觀。
5
jQuery Mobile Demo
6
jQuery Mobile引用 官方網站 最新版本1.4.5 引用方式 jQuery Mobile官網下載檔案
最新版本1.4.5 引用方式 jQuery Mobile官網下載檔案 透過URL連結到jQuery Mobile的CDN-hosted <link rel="stylesheet" href=" /> <script src=" <script src="
7
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)
8
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=" /> <script src=" <script src=" <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瀏覽 需將檔案上傳到網頁空間
9
行動裝置模擬器 Opera Mobile Emulator
可在桌上型電腦執行的手機版瀏覽器，最新版Opera Mobile Classic Emulator 12.1 for Windows
10
自行練習
11
補充：jQuery Mobile Touch Events
tap 手指觸行動裝置 <script> $(document).ready(function(){ $("p").on("tap",function(){ $(this).hide(); }); </script> taphold 手指觸行動裝置，一秒以上 swipe, swipeleft, swiperight 滑動行動裝置 參考資料
12
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=" <li><a href=" </ol> <h2>Unordered List:</h2> <ul data-role="listview"> <li><a href=" </ul> </div>
13
(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=" <li><a href=" <li><a href=" <li data-role="list-divider">楊子青</a></li> <li><a href=" </ul> </div>
14
jQuery Mobile List Views
根據字母自動分群 data-autodividers="true" <div data-role="content"> <ul data-role="listview" data-inset="true" data-autodividers="true"> <li><a href=" <li><a href=" <li><a href=" <li><a href=" <li><a href=" <li><a href=" <li><a href=" </ul> </div>
15
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="輸入關鍵字進行搜尋"> …
16
(2) jQuery Mobile List Content
jQuery Mobile List Thumbnails (縮圖) 運用img標籤，網頁會自動縮圖成80*80px <li> <a href=" <img src=" <h2>楊子青</h2> <p>唸碩士班，在研究室拍的照片...</p> </a> </li>
17
jQuery Mobile List Content
圖示 class="ui-li-icon" <li> <a href=" <img src= class="ui-li-icon" > 楊子青</a> </li>
18
jQuery Mobile List Content
Split Buttons 同一個<li>標籤，放入第二個超鏈結 <li> <a href=" <img src= class="ui-li-icon" > 楊子青</a> <a href=" </li>
19
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>
20
參考資料 教科書 網路資源 榮欽科技、陳婉凌，網頁設計必學的程式實作技術：HTML5+CSS3+JavaScript，2012年，博碩。
Chap 18: 開發跨平台行動裝置網頁jQuery Mobile 網路資源
Similar presentations
