Presentation is loading. Please wait.

Presentation is loading. Please wait.

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

Similar presentations


Presentation on theme: "JQuery Mobile基礎 (開發跨平台行動裝置網頁)"— Presentation transcript:

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 網路資源


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

Similar presentations


Ads by Google