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 http://jquerymobile.com/download/
jquery Library
jquery Mobile Library
jquery Mobile Library 解壓縮 jquery.mobile-1.2.0.zip 主要是這三個
檔案 把下面三個檔案與一個目錄都放在一起 jquery-1.8.2.min.js jquery.mobile-1.2.0.min.css jquery.mobile-1.2.0.min.js Images 目錄 放在 Apache 內的某個目錄內
測試工具 Opera Mobile Emulator http://www.opera.com/developer/tools/mobile/ 下一步就可以安裝完成
可以選手機種類
另一個測試工具 Mobilizer http://www.springbox.com/about/tools 可以模擬 愛瘋 `, 但需要 Adobe air 10
開始設計
一個 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> 標籤, 透過屬性定義版面與內容
HTML5 畫面基本組成
加入 jquery 與 jquery Mobile
加上手機專屬設定 Viewport 表示這頁是給手機讀的寬度用手機現有寬度預設的縮放大小是原大小
加入內容 jquery 頁面組成 HTML5 網頁 <body> <head> <div data-role=page> <div data-role=header> <div data-role=content> jquery 控制的部份在 div 上直接給定義其他都是 html 語法 <div data-role=footer>
jquery page
加上 html 內容後
測試看看 直接就是手機 style 自動就可以縮放
data-theme 設定顏色樣版 可以針對不同區塊進行個別設定 使用英文字母 a ~ z 做為樣版名稱的命名
如果拿掉 viewport 與 jquery 有 無
重點是可以用 div 在同一 html 定義出 很多頁面 頁面 1 Id=home 頁面 2 Id=intro
測試
跳到不同 html 或是外部網頁 當然可以
就是一般 a 的寫法
測試
加上回前頁的功能 只要在要有回前頁的 <div data-role= page 內加上 data-add-back-btn= true 就可以
測試
更改回前頁文字 再加上 data-back-btn-text= 回前頁 就可以
測試
外部網頁 在 a 內加上 data-rel="external" 跳出去就不會有回前頁了!
測試
把頁面變成彈出視窗 把第二頁變成彈出視窗
測試 自動會有 x
在 data-role=header 與 footer 加上選項 同樣的東西複製到 data-role=footer 就可以用
測試
加入預選
加入內定的圖示
加入自訂圖示 圖需要 18 x 18
先將圖定義到 css 內 定義時加上 ui-icon 使用時是使用 ui-icon 後面的名稱
測試
換頁效果 加上 data-transition 可以的效果有 : slide slideup slidedown pop fade flip 一定是跳到 jquery 的頁面才行跳到外部網頁或是一般網頁都沒效果
可以用的樣板有 a b c d e 替 header 加上樣板
按鈕 預設就是有圓角的 可以把 a 轉成按鈕 原來的 <input type=button 也是
將 a 改成 button
結果
加上 data-inline=true 就變成同一列
一樣給 data-icon 就可以加上圖示 Data-iconpos 可以決定圖顯示的位置 left right top bottom 加上圖示
顯示資料列表 用 ul 或 ol 都可以 加上 data-role="listview"
測試 一樣加上 a 就可以跳頁面
加上 a, 自動就會有向右箭頭
加上標題與內縮變成獨立區塊
加上圖片 listview
加上 data-theme 到標題
video 在 HTML5 以前要在網頁中播放影片時, 需要使用 ActiveX 或 Plug-in 的方式來達到, 例如 :Flash Player QuickTime 等等 HTML5 之後這些東西成了標準, 不再需要透過額外的外掛來達成 主要支援 : Theora/Vorbis (*.ogg ; *.ogv) H.264 / AAC (*.mp4 ; *.m4v)
Video 標籤基本架構 <video> <source src="video.ogg"> <source src="video.m4v"> 很抱歉! 您的瀏覽器不支援 HTML5 Video </video>
src 影片的 URL autoplay <video> 的屬性 影片是否自動播放, 預設為 false controls 是否顯示播放控制列, 若設定為 ture 將會顯示播放控制列, 這個控制器的樣式是依據瀏覽器而定的, 預設為 false
width <video> 所佔寬度 height <video> 所佔高度 Poster <video> 的屬性 如同一些以 Flash 實現的播放器所提供的 預覽圖 功能一樣, 可於此指定預覽圖的 URL, 當影片尚未開始播放時, 將會先顯示這裡所指定的圖片
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 後呢?
整合 jquery <head> 加入 <script src="jquery-1.9.1.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>
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); });
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"' />
後續 http://jquerymobile.com/ http://view.jquerymobile.com/1.3.0/