1 / 66

Chapter 2 jQuery Mobile

Chapter 2 jQuery Mobile. jQuery & jQuery Mobile. 針對行動裝置做過優化的一組 Javascript 與 css 框架 搭配 HTML5 IE10 以上、 Chrome 、 Firefox 等瀏覽器才支援 可用於開發 Web App ( 相對於原生 Native App) 使用宣告式定義，開發簡單. 需要的東西. jQuery Library http://jquery.com/download/ jQuery Mobile Library http://jquerymobile.com/download/.

trudy
Download Presentation

Chapter 2 jQuery Mobile

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Chapter 2 jQuery Mobile

  2. jQuery & jQuery Mobile • 針對行動裝置做過優化的一組Javascript與css框架 • 搭配HTML5 • IE10以上、Chrome、Firefox等瀏覽器才支援 • 可用於開發Web App (相對於原生Native App) • 使用宣告式定義，開發簡單

  3. 需要的東西 • jQuery Library • http://jquery.com/download/ • jQuery Mobile Library • http://jquerymobile.com/download/

  4. jQuery Mobile 的檔案 • jQuery函數庫的 JavaScript 程式檔 • jQuery Mobile 核心 JavaScript 程式檔 • jQuery Mobile 核心 CSS 外部樣式檔 • jQuery Mobile 布景的客製化樣式檔(選項) <script src="jquery-1.8.3.min.js"></script> <script src="jquery.mobile-1.2.1.min.js"></script> <link rel="stylesheet" href="jquery.mobile-1.2.1.min.css" /> <link rel="stylesheet" href="my-custom-theme.min.css">

  5. 使用 CDN • Content Delivery Network • 將資料存放在網路系統的多個電腦節點，加速資料存取 <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>

  6. 測試工具Opera Mobile Emulator • http://www.opera.com/developer/tools/mobile/ 下一步就可以安裝完成

  7. 可以選手機種類

  8. HTML5畫面基本組成

  9. 加入jQuery與jQueryMobile

  10. 加上手機專屬設定 Viewport表示這頁是給手機讀的 寬度用手機現有寬度 預設的縮放大小是原大小

  11. 加入Viewport前 加入Viewport後

  12. 加入內容 • jQuery頁面組成 HTML5網頁 <head> <body> <div data-role=page> <div data-role=header> <div data-role=content> jQuery控制的部份 在div上直接給定義 其他都是html語法 <div data-role=footer>

  13. jQuery page

  14. 加上html內容後

  15. 測試看看 自動就可以縮放

  16. 如果拿掉viewport與jQuery 有 無

  17. 練習1:多個頁面切換 頁面1 Id=home 頁面2 Id=intro

  18. 測試

  19. 練習2:跳到不同html或是外部網頁 • 當然可以

  20. 就是一般a的寫法

  21. 測試

  22. 加上回前頁的功能 只要在要有回前頁的<div data-role=“page” 內加上data-add-back-btn=“true” 就可以

  23. 測試

  24. 更改回前頁文字 再加上 data-back-btn-text=“回前頁” 就可以

  25. 測試

  26. 外部網頁 在a 內加上 data-rel="external" 跳出去就不會有回前頁了！

  27. 測試

  28. 把頁面變成彈出視窗 把第二頁變成彈出視窗

  29. 測試 自動會有x

  30. 按鈕 • 預設就是有圓角的 • 可以把a轉成按鈕 • 原來的<input type=button>也是

  31. 將a改成button

  32. 結果

  33. 加上data-inline=true就變成同一列

  34. 加上圖示 一樣給data-icon就可以加上圖示 Data-iconpos可以決定圖顯示的位置 left right top bottom

  35. 在header與footer加上導覽列 同樣的東西複製到data-role=footer 就可以用

  36. 測試

  37. 加入預選

  38. 加入內定的圖示

  39. 練習3: 自訂圖示導覽列 自訂的圖示

  40. 先將圖定義到css內 定義時加上ui-icon 使用時是使用ui-icon後面的名稱

  41. 固定頁尾在畫面的下方 固定頁尾在畫面的下方

  42. 顯示資料列表 • 用ul或ol都可以 • 加上data-role="listview"

  43. 測試 一樣加上a就可以跳頁面

  44. 加上a，自動就會有向右箭頭

  45. 加上標題與內縮變成獨立區塊

  46. 加上圖片 listview

  47. 練習4:含縮圖清單檢視(1/2)

  48. 練習4:含縮圖清單檢視(2/2)

  49. 可收合區塊(collapsible block)

  50. 版面格點(grid)

More Related