1 / 63

jQuery Mobile

jQuery Mobile. 建國科技大學資管系 饒瑞佶 2012/11 V1 2013/3 V2 2103/4 v3. jQuery & jQuery Mobile. 針對行動裝置做過優化的一組 Javascript 與 css 框架 搭配 HTML5 IE10 以上、 Chrome 、 Firefox 等瀏覽器才支援 可用於開發 Web App ( 相對於原生 Native App) 使用宣告式定義，開發簡單. 需要的東西. jQuery Library http://jquery.com/download/ jQuery Mobile Library

kelda
Download Presentation

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. jQuery Mobile 建國科技大學資管系 饒瑞佶 2012/11 V1 2013/3 V2 2103/4 v3

  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 Library

  5. jQuery Mobile Library

  6. jQuery Mobile Library • 解壓縮jquery.mobile-1.2.0.zip 主要是這三個

  7. 檔案 • 把下面三個檔案與一個目錄都放在一起 • jquery-1.8.2.min.js • jquery.mobile-1.2.0.min.css • jquery.mobile-1.2.0.min.js • Images目錄 放在Apache內的某個目錄內

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

  9. 可以選手機種類

  10. 另一個測試工具 • Mobilizer • http://www.springbox.com/about/tools • 可以模擬”愛瘋”`,但需要Adobe air

  11. 開始設計

  12. 一個jQuery Mobile Web page的組成 • 加入jQuery Library • <script src=“jquery-1.8.2.min.js”></script> • 加入jQuery Mobile Library • <link rel=“stylesheet” href=“jquery.mobile-1.2.0.min.css”> • <script src=“jquery.mobile-1.2.0.min.js”></script> • <div> 標籤，透過屬性定義版面與內容

  13. HTML5畫面基本組成

  14. 加入jQuery與jQueryMobile

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

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

  17. jQuery page

  18. 加上html內容後

  19. 測試看看 直接就是手機style 自動就可以縮放

  20. data-theme • 設定顏色樣版 • 可以針對不同區塊進行個別設定 … • 使用英文字母 a ~ z做為樣版名稱的命名

  21. 如果拿掉viewport與jQuery 有 無

  22. 重點是可以用div在同一html定義出很多頁面 頁面1 Id=home 頁面2 Id=intro

  23. 測試

  24. 跳到不同html或是外部網頁 • 當然可以

  25. 就是一般a的寫法

  26. 測試

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

  28. 測試

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

  30. 測試

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

  32. 測試

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

  34. 測試 自動會有x

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

  36. 測試

  37. 加入預選

  38. 加入內定的圖示

  39. 加入自訂圖示 圖需要18 x 18

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

  41. 測試

  42. 換頁效果 • 加上data-transition 可以的效果有： slide slideup slidedown pop fade flip 一定是跳到jQuery的頁面才行 跳到外部網頁或是一般網頁都沒效果

  43. 替header加上樣板 可以用的樣板有 a b c d e

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

  45. 將a改成button

  46. 結果

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

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

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

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

More Related