JQuery Mobile 建國科技大學資管系 饒瑞佶 2012/11 V1 2013/3 V2 2103/4 v3.

Slides:



Advertisements
Similar presentations
第 15 章 Mobile PHP 與 Ajax 15-1 Mobile PHP 15-2 Ajax 的基礎 15-2 Ajax 的基礎 15-3 jQuery 的 Ajax 方法 15-3 jQuery 的 Ajax 方法 15-4 應用實例:關鍵字建議清單 15-4 應用實例:關鍵字建議清單.
Advertisements

HyperText Markup Language
Web app和html5给前端带来的变化 —— 我们的html5游戏平台之旅.
JQuery 基础教程.
JQuery Mobile 網頁切換 靜宜大學 資管系 楊子青.
網路程式設計-期末專案 資工二B B975701 2 8 黃首翰 ~Rock your life~
DREAMWEVAER MX 2004入门 楼斌 BBS ID:lou 生命科学学院
第8章 CSS基础知识 【学习目标】 对于一个网页设计者来说,对HTML语言一定不感到陌生,因为它是网页制作的基础,但是如果希望网页能够美观、大方,并且升级维护方便,那么仅仅知道HTML还是不够的,还需要了解CSS。了解CSS基础知识,可以为后面的学习打下基础。 本章主要内容包括: 为什么在网页中加入CSS。
2 HTML5與CSS3 2-1 HTML5的頁面結構 2-2 HTML5的文字編排標籤 2-3 HTML5的圖片與超連結標籤
5 工具列與ListView清單 5-1 巡覽工具列 5-2 標準工具列 5-3 基本ListView清單 5-4 進階ListView清單.
使用HTML製作個人網頁 柴惠敏 台灣大學 物理治療學系.
JQuery Mobile基礎 (開發跨平台行動裝置網頁)
RWD網頁設計實務 李欣螢 以誠研發有限公司.
DreamWeaver MX (V) 林偉川.
标准规范 2.自己偏好习惯 3.讨论/建议 永远遵循同一套编码规范 -- 不管多少人同时参与编码,所有代码都应该看上去像是一个人编写的一样。
Ch01 HTML 5 資料格式 網頁程式設計.
JQuery Mobile简介 唐瑶 Write less, do more.
JQuery Mobile 網頁切換 靜宜大學 資管系 楊子青.
Ch.13 HTML網頁實作.
第3章 图像和其他媒体.
作者:different(D姐),前端工程师 博客: 新浪微博:inline_block
Happy Designer 第四次聚會 課程內容分享 2008/11/20.
增加影音與圖片 多媒體設計.
Web前端开发技术与实践 第6章:多媒体 阮晓龙 /
Web前端开发技术与实践 第3章:初识HTML5 阮晓龙 /
What’s New in HTML5.
Web前端开发技术与实践 第10章:盒子模型 阮晓龙 /
Web前端开发技术与实践 第11章:背景与边框 阮晓龙 /
網頁切換移轉 JS vs. ASP.NET.
JQuery Mobile 網頁切換 靜宜大學 資管系 楊子青.
Android App簡介及 App Inventor 2體驗 靜宜大學資管系 楊子青
系統設定 IE8相容性檢視
HTML & CSS.
JQuery Mobile基礎 (開發跨平台行動裝置網頁)
網頁切換移轉 JS vs. ASP.NET.
/ 第7讲:移动开发 冯顺磊 /
第2章 初识Dreamweaver CS4 Adobe Dreamweaver CS4是建立Web站点和应用程序的 专业工具。它将可视布局工具、应用程序开发功能和 代码编辑支持组合在一起,其功能强大,使得各个层 次的开发人员和设计人员都能够快速创建界面吸引人 的基于标准的网站和应用程序。从对基于CSS的设计.
網頁程式設計 本章投影片錄自HTML5、CSS3、RWD、jQuery Mobile跨裝網頁設計 陳惠貞 著 碁峰資訊股份有限公司出版
FileUpload控制項 建國科技大學 資管系 饒瑞佶 2007年.
App Inventor 2初體驗 靜宜大學資管系 楊子青
UI 软件 设计 页面布局(二).
2.2 Web界面设计 信息工程系 向模军 Tel: QQ:
JQuery Mobile简介 唐瑶 Write less, do more.
HTML 5與課程簡介 靜宜大學 資管系 楊子青.
臺中市政府 「WEB版公文製作系統」 承辦人作業.
第三章 HTML相关技术基础知识 纵观各种动态页面开发技术,无论是JSP、ASP还是PHP都无 法摆脱HTML的影子。这些动态的页面开发技术无非是在静 态HTML页面的基础上添加了动态的可以交互的内容。HTML 是所有动态页面开发技术的基础。在接下来的章节将要详 细介绍的就是HTML相关的一系列技术,包括HTML、
PowerPoint 2019/4/9.
第一個cordova project Cordova project建立與平台設定,均藉由cli(command line interface來完成 建立project請打開命令提示字元視窗應輸入下列命令 cordova create hello tw.edu.stust.mis.hello HelloWorld.
JQuery基礎與動畫、特效 靜宜大學 資管系 楊子青.
JQuery基礎與動畫、特效 靜宜大學 資管系 楊子青 網路參考資源:
HTML – 超連結與圖片 資訊教育.
網頁程式概論 建國科技大學資管系 饒瑞佶 2015/9 V1 2016/4 V2 2016/9 V3.
讓Emulator可以 使用Android Market
網站HOLMES DATA監測代碼.
JQuery Mobile基礎 (開發跨平台行動裝置網頁)
UI 软件 设计 页面布局(一).
《网页设计与制作》.
IIS Internet Information Services
數位相本製作(二) 軟體:3D-Album 主講:王志強.
JQuery Mobile基礎 (開發跨平台行動裝置網頁)
Unity回傳統計資訊程式說明: 填寫回傳資訊網址(theUrl)。
Video 影像 (VideoPlayer 影像播放器、Camcorder 錄影機) 靜宜大學資管系 楊子青
JQuery 標籤操作 建國科技大學 資管系 饒瑞佶 2013/4 V1.
程式移植.
從HTML表格到CSS 靜宜大學 資管系 楊子青.
Dreamweaver 進階網頁製作 B 許天彰.
專案建置與封裝程式 建國科技大學 資管系 饒瑞佶.
Activity的生命週期: 播放音樂與影片 靜宜大學資管系 楊子青
NFC (近場通訊, Near Field Communication) 靜宜大學資管系 楊子青
Jquery Mobile開發須知 周季賢.
Presentation transcript:

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 jQuery Mobile Library http://jquery.com/download/ 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

開始設計

一個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網頁 <head> <body> <div data-role=page> <div data-role=header> <div data-role=content> <div data-role=footer> jQuery控制的部份 在div上直接給定義 其他都是html語法

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 一定是跳到jQuery的頁面才行 跳到外部網頁或是一般網頁都沒效果 可以的效果有: slide slideup slidedown pop fade flip 一定是跳到jQuery的頁面才行 跳到外部網頁或是一般網頁都沒效果

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

按鈕 預設就是有圓角的 可以把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>  

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

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

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 後呢?

整合jQuery <head>加入 <body>加入 <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 試試其他檔案類型 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"' />

後續 http://jquerymobile.com/ http://view.jquerymobile.com/1.3.0/