jQuery Mobile

Size: px

Start display at page:

Download "jQuery Mobile"

灰巅宣
6 years ago
Views:

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 jquery Mobile Library

4 jquery Library

5 jquery Mobile Library

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

檔案把下面三個檔案與一個目錄都放在一起 jquery-1.8.2.min.js jquery.mobile-1.2.0.

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

8 測試工具 Opera Mobile Emulator 下一步就可以安裝完成

9 可以選手機種類

10 另一個測試工具 Mobilizer 可以模擬愛瘋 `, 但需要 Adobe air 10

11 開始設計

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

13 HTML5 畫面基本組成

14 加入 jquery 與 jquery Mobile

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

16 加入內容 jquery 頁面組成 HTML5 網頁 <body> <head> <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 可以用的樣板有 a b c d e 替 header 加上樣板

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

51 加上 a, 自動就會有向右箭頭

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

53 加上圖片 listview

54 加上 data-theme 到標題

55 video 在 HTML5 以前要在網頁中播放影片時, 需要使用 ActiveX 或 Plug-in 的方式來達到, 例如 :Flash Player QuickTime 等等 HTML5 之後這些東西成了標準, 不再需要透過額外的外掛來達成主要支援 : Theora/Vorbis (*.ogg ; *.ogv) H.264 / AAC (*.mp4 ; *.m4v)

56 Video 標籤基本架構 <video> <source src="video.ogg"> <source src="video.m4v"> 很抱歉! 您的瀏覽器不支援 HTML5 Video </video>

57 src 影片的 URL autoplay <video> 的屬性影片是否自動播放, 預設為 false controls 是否顯示播放控制列, 若設定為 ture 將會顯示播放控制列, 這個控制器的樣式是依據瀏覽器而定的, 預設為 false

58 width <video> 所佔寬度 height <video> 所佔高度 Poster <video> 的屬性如同一些以 Flash 實現的播放器所提供的預覽圖功能一樣, 可於此指定預覽圖的 URL, 當影片尚未開始播放時, 將會先顯示這裡所指定的圖片

59 Video example <!DOCTYPE html> <html> <head> <meta charset=utf-8> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>html5 Demo: Video</title> </head> <body> <video id="myvideo > <source src="dizzy.mp4" type="video/mp4" /> <source src="dizzy.webm" type="video/webm" /> <source src="dizzy.ogv" type="video/ogg" /> </video> </body> </html> 加上 autoplay controls 後呢?

60 整合 jquery <head> 加入 <script src="jquery min.js"></script> <script src="init.js"></script> <body> 加入 <div id="state"></div> <p><button id="play">play</button><button id="pause">pause</button></p> <ul id="statelist"></ul>

61 Init.js $(function(){ var video = $('#myvideo')[0];// 取得 video var statelist = $('#statelist'); var videostatetexts = [ 'HAVE_NOTHING','HAVE_METADATA','HAVE_CURRENT_DATA', 'HAVE_FUTURE_DATA','HAVE_ENOUGH_DATA' ]; var pr = ['currenttime','readystate','paused','muted','volume','ended']; $('#play').click(function(){ video.play(); // 播放影片 }); $('#pause').click(function(){ video.pause(); // 停止播放 }); var t = setinterval(function(){ statelist.empty(); $('#state').text(videostatetexts[video.readystate]); for(x in pr){ statelist.append($('<li><storng>'+ pr[x] + ' : ' + video[pr[x]] + '</strong></li>')); } },100); });

62 result Flash 還是使用 <embed> <embed src="segment1.swf" width="320" height="240"> 試試其他檔案類型 Mp3 ogg webm 新版 chrome 取消支援 mp4 Chrome 要改成 <source src="dizzy.mp4" type='video/mp4; codecs="avc1.42e01e, mp4a.40.2"' />

63 後續

Microsoft PowerPoint - 14 jQuery App 開發

Microsoft PowerPoint - 14 jQuery App 開發計劃名稱 : 104 年度教育部資通訊軟體創新人才推升推廣計畫跨校資源中心 : 雲端運算 ( 國立中山大學 ) 課程名稱 : 網路及平台服務 Part1- 課程教材教材名稱 :jquery App 開發國立高雄大學資訊工程學系張保榮教授大綱 jquery Mobile 介紹與使用 PhoneGap 介紹與使用 jquery & jquery Mobile 針對行動裝置做過優化的一組 Javascript