Download presentation
Presentation is loading. Please wait.
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 http://jquery.com/download/
4
jQuery Library
5
jQuery Mobile Library
6
jQuery Mobile Library 解壓縮jquery.mobile zip 主要是這三個
7
檔案 把下面三個檔案與一個目錄都放在一起 jquery-1.8.2.min.js jquery.mobile-1.2.0.min.css
jquery.mobile min.js Images目錄 放在Apache內的某個目錄內
8
測試工具 Opera Mobile Emulator
下一步就可以安裝完成
9
可以選手機種類
10
另一個測試工具 Mobilizer http://www.springbox.com/about/tools
可以模擬”愛瘋”`,但需要Adobe air
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網頁 <head> <body>
<div data-role=page> <div data-role=header> <div data-role=content> <div data-role=footer> jQuery控制的部份 在div上直接給定義 其他都是html語法
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 一定是跳到jQuery的頁面才行 跳到外部網頁或是一般網頁都沒效果 可以的效果有： 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就可以跳頁面
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
<video> 的屬性 src autoplay controls 影片的URL。 影片是否自動播放，預設為 false。
是否顯示播放控制列，若設定為ture將會顯示播放控制列，這個控制器的樣式是依據瀏覽器而定的，預設為 false。
58
<video> 的屬性 width height Poster <video> 所佔寬度。
如同一些以Flash實現的播放器所提供的「預覽圖」功能一樣，可於此指定預覽圖的URL，當影片尚未開始播放時，將會先顯示這裡所指定的圖片。
59
Video example 加上 autoplay controls 後呢? <!DOCTYPE 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>加入 <body>加入
<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);
![Init.js $(function(){ var video = $( #myvideo )[0];//取得video](http://slidesplayer.com/slide/14657544/90/images/61/Init.js+%24%28function%28%29%7B+var+video+%3D+%24%28+%23myvideo+%29%5B0%5D%3B%2F%2F%E5%8F%96%E5%BE%97video.jpg "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 試試其他檔案類型 Mp3、ogg、webm 新版chrome取消支援mp4 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
後續
Similar presentations
