jquery mobile n.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
jQuery Mobile PowerPoint Presentation
Download Presentation
jQuery Mobile

Loading in 2 Seconds...

play fullscreen
1 / 63

jQuery Mobile - PowerPoint PPT Presentation


  • 300 Views
  • Uploaded on

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

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
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.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - 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就可以跳頁面