Suche senden
Hochladen
HTML5移动WEB应用程序开发(PhoneGap)
•
Als PPT, PDF herunterladen
•
0 gefällt mir
•
679 views
A
amd6400
Folgen
HTML5移动WEB应用程序开发(PhoneGap) 作者博客www.nonb.cn
Weniger lesen
Mehr lesen
Melden
Teilen
Melden
Teilen
1 von 27
Jetzt herunterladen
Empfohlen
Html5移动web应用开发(PhoneGap)
Html5移动web应用开发(PhoneGap)
amd6400
让我们的页面跑得更快
让我们的页面跑得更快
li qiang
Html5移动web应用开发(PhoneGap)
Html5移动web应用开发(PhoneGap)
amd6400
My autobiography
My autobiography
sapphiregurl90
Lunar_presentation_02
Lunar_presentation_02
Ryo Ishihara
京都婚活In岡崎2
京都婚活In岡崎2
Tae Niwa
岡崎クイズ
岡崎クイズ
Tae Niwa
岡崎クイズ
岡崎クイズ
Tae Niwa
Empfohlen
Html5移动web应用开发(PhoneGap)
Html5移动web应用开发(PhoneGap)
amd6400
让我们的页面跑得更快
让我们的页面跑得更快
li qiang
Html5移动web应用开发(PhoneGap)
Html5移动web应用开发(PhoneGap)
amd6400
My autobiography
My autobiography
sapphiregurl90
Lunar_presentation_02
Lunar_presentation_02
Ryo Ishihara
京都婚活In岡崎2
京都婚活In岡崎2
Tae Niwa
岡崎クイズ
岡崎クイズ
Tae Niwa
岡崎クイズ
岡崎クイズ
Tae Niwa
Bfp website advice
Bfp website advice
Ryo Ishihara
京都婚活In岡崎2
京都婚活In岡崎2
Tae Niwa
Lunar_presentation_01
Lunar_presentation_01
Ryo Ishihara
Thomas Corporate Presentation[1]
Thomas Corporate Presentation[1]
ChrisBosworth
Privateschool consulting 01
Privateschool consulting 01
Ryo Ishihara
make the Japanese NPO sales tool better
make the Japanese NPO sales tool better
Ryo Ishihara
Privateschool consulting 02
Privateschool consulting 02
Ryo Ishihara
Thomas corporate presentation 2011 pdf
Thomas corporate presentation 2011 pdf
ChrisBosworth
Agile Coach Professional
Agile Coach Professional
Mauricio Sanches
Scaffolding workshop notes from 18/8/11
Scaffolding workshop notes from 18/8/11
angietoppan
My professional and educational portfolio (1)
My professional and educational portfolio (1)
Yves Simon
Ajax Transportation Methods
Ajax Transportation Methods
yiditushe
HTML5概览
HTML5概览
Adam Lu
唐俊开-Html5 mobile web app浅谈
唐俊开-Html5 mobile web app浅谈
Webrebuild
Html5 mobile web app浅谈
Html5 mobile web app浅谈
sankyu Tang
揭秘Html5和Css3
揭秘Html5和Css3
Adam Lu
揭秘Html5和Css3 ---- 鲁超伍
揭秘Html5和Css3 ---- 鲁超伍
裕波 周
Html5css3 go.yeefe.com
Html5css3 go.yeefe.com
tellyeefe
关于Js的跨域操作
关于Js的跨域操作
王 承石
Javascript Training
Javascript Training
beijing.josh
Yid chart
Yid chart
fangdeng
行動商務實務 - PhoneGap Advance
行動商務實務 - PhoneGap Advance
My own sweet home!
Weitere ähnliche Inhalte
Andere mochten auch
Bfp website advice
Bfp website advice
Ryo Ishihara
京都婚活In岡崎2
京都婚活In岡崎2
Tae Niwa
Lunar_presentation_01
Lunar_presentation_01
Ryo Ishihara
Thomas Corporate Presentation[1]
Thomas Corporate Presentation[1]
ChrisBosworth
Privateschool consulting 01
Privateschool consulting 01
Ryo Ishihara
make the Japanese NPO sales tool better
make the Japanese NPO sales tool better
Ryo Ishihara
Privateschool consulting 02
Privateschool consulting 02
Ryo Ishihara
Thomas corporate presentation 2011 pdf
Thomas corporate presentation 2011 pdf
ChrisBosworth
Agile Coach Professional
Agile Coach Professional
Mauricio Sanches
Scaffolding workshop notes from 18/8/11
Scaffolding workshop notes from 18/8/11
angietoppan
My professional and educational portfolio (1)
My professional and educational portfolio (1)
Yves Simon
Andere mochten auch
(11)
Bfp website advice
Bfp website advice
京都婚活In岡崎2
京都婚活In岡崎2
Lunar_presentation_01
Lunar_presentation_01
Thomas Corporate Presentation[1]
Thomas Corporate Presentation[1]
Privateschool consulting 01
Privateschool consulting 01
make the Japanese NPO sales tool better
make the Japanese NPO sales tool better
Privateschool consulting 02
Privateschool consulting 02
Thomas corporate presentation 2011 pdf
Thomas corporate presentation 2011 pdf
Agile Coach Professional
Agile Coach Professional
Scaffolding workshop notes from 18/8/11
Scaffolding workshop notes from 18/8/11
My professional and educational portfolio (1)
My professional and educational portfolio (1)
Ähnlich wie HTML5移动WEB应用程序开发(PhoneGap)
Ajax Transportation Methods
Ajax Transportation Methods
yiditushe
HTML5概览
HTML5概览
Adam Lu
唐俊开-Html5 mobile web app浅谈
唐俊开-Html5 mobile web app浅谈
Webrebuild
Html5 mobile web app浅谈
Html5 mobile web app浅谈
sankyu Tang
揭秘Html5和Css3
揭秘Html5和Css3
Adam Lu
揭秘Html5和Css3 ---- 鲁超伍
揭秘Html5和Css3 ---- 鲁超伍
裕波 周
Html5css3 go.yeefe.com
Html5css3 go.yeefe.com
tellyeefe
关于Js的跨域操作
关于Js的跨域操作
王 承石
Javascript Training
Javascript Training
beijing.josh
Yid chart
Yid chart
fangdeng
行動商務實務 - PhoneGap Advance
行動商務實務 - PhoneGap Advance
My own sweet home!
javascript的分层概念 --- 阿当
javascript的分层概念 --- 阿当
裕波 周
YUI ─ 阿大
YUI ─ 阿大
taobao.com
Windows Mobile Widget 開發
Windows Mobile Widget 開發
Chui-Wen Chiu
Using google appengine_1027
Using google appengine_1027
Wei Sun
Anroid development part.1
Anroid development part.1
RANK LIU
Web base 吴志华
Web base 吴志华
FLASH开发者交流会
從 Web Site 到 Web Application,從 Web Services 到 Mobile Services
從 Web Site 到 Web Application,從 Web Services 到 Mobile Services
Kuo-Chun Su
TBAD F2E 2010 review
TBAD F2E 2010 review
leneli
Using google appengine (2)
Using google appengine (2)
Wei Sun
Ähnlich wie HTML5移动WEB应用程序开发(PhoneGap)
(20)
Ajax Transportation Methods
Ajax Transportation Methods
HTML5概览
HTML5概览
唐俊开-Html5 mobile web app浅谈
唐俊开-Html5 mobile web app浅谈
Html5 mobile web app浅谈
Html5 mobile web app浅谈
揭秘Html5和Css3
揭秘Html5和Css3
揭秘Html5和Css3 ---- 鲁超伍
揭秘Html5和Css3 ---- 鲁超伍
Html5css3 go.yeefe.com
Html5css3 go.yeefe.com
关于Js的跨域操作
关于Js的跨域操作
Javascript Training
Javascript Training
Yid chart
Yid chart
行動商務實務 - PhoneGap Advance
行動商務實務 - PhoneGap Advance
javascript的分层概念 --- 阿当
javascript的分层概念 --- 阿当
YUI ─ 阿大
YUI ─ 阿大
Windows Mobile Widget 開發
Windows Mobile Widget 開發
Using google appengine_1027
Using google appengine_1027
Anroid development part.1
Anroid development part.1
Web base 吴志华
Web base 吴志华
從 Web Site 到 Web Application,從 Web Services 到 Mobile Services
從 Web Site 到 Web Application,從 Web Services 到 Mobile Services
TBAD F2E 2010 review
TBAD F2E 2010 review
Using google appengine (2)
Using google appengine (2)
HTML5移动WEB应用程序开发(PhoneGap)
1.
HTML5 移动
Web 应用开发 - 浅谈 Phone Gap v1.0 框架
2.
什么是 Phone Gap
?
3.
什么是 Phone Gap
? 如何工作的?
4.
5.
WEB APP
界面布局介绍
6.
7.
8.
9.
UI 布局介绍 弹性布局实例分析
# main { /* 盒子模型显示 */ display : -moz-box; display : -webkit-box; display : box; /* 纵向排列 */ -moz-box-orient : vertical; -webkit-box-orient : vertical; box-orient : vertical; } box-flex:1 box-flex:7 box-flex:1
10.
UI 布局介绍 弹性布局实例分析
.Box { // 盒子模型显示 display : -moz-box; display : -webkit-box; display : box; // 横向排列 -moz-box-orient : horizional; -webkit-box-orient : horizional; box-orient : horizional; } Nav { -moz-box-flex : 1; -webkit-box-flex : 1; box-flex : 1; } nav nav nav
11.
其它 有了 CSS3
使 WEB APP 更加丰富 手机上支持 css3 动画特性:移动的方格, ( 请看附件 DEMO 效果 ) animation: myfirst 5s; -moz-animation: myfirst 5s; /* Firefox */ -webkit-animation: myfirst 5s; /* Safari and Chrome */ @ keyframes myfirst { 0% {background: red; left:0px; top:0px;} 25% {background :yellow; left:200px; top:0px;} 50% {background :blue; left:200px; top:200px;} 75% {background :green; left:0px; top:200px;} 100% {background :red; left:0px; top:0px;} }
12.
Phone Gap API
介绍 官方网站 : http://www.phonegap.com
13.
14.
Phone Gap
简介 Phone Gap For Android * 在 # /asset/www/ 目录下开发 web 应用程序 生成 APP 应用
15.
Phone Gap “Hello
World” App document.addEventListener(" deviceready ", onDeviceReady, false); function onDeviceReady() { showAlert(); } function showAlert() { navigator. notification.alert ( ‘Hello World’, // 信息 alertDismissed, // 回调函数 ‘ Hello’, // 标题 ‘ Done’ // 按钮名称 ); } 第一个 Phone Gap 的应用程序
16.
Phone Gap Device
// 获取操作系统,版本, ID, 分辨率 function onDeviceReady() { var element = document.getElementById('deviceProperties'); element.innerHTML = ' Device Name: ' + device.name + '<br />' + ' Device PhoneGap: ' + device.phonegap + '<br />' + ' Device Platform: ' + device.platform + '<br />' + ' Device UUID: ' + device.uuid + '<br />' + ' Device Version: ' + device.version + '<br />'; } 获取手机的基本信息 Device 函数
17.
18.
19.
20.
21.
Phone Gap Notification
Notification 提醒 notification.alert 弹出框 notification.confirm 确认框 notification.beep 声音提醒 notification.vibrate 震动提醒 // Beep three times function playBeep() { navigator. notification.beep (3); } // Vibrate for 2 seconds // function vibrate() { navigator. notification.vibrate (2000); }
22.
Phone Gap Geolocation
Geolocation GPS 位置定位 navigator. geolocation.getCurrentPosition (onSuccess, onError);
23.
Phone Gap Accelerometer
Accelerometer 设备坐标 Captures device motion in the x, y, and z direction. 获取设备 x,y,z 轴的坐标 function onSuccess(acceleration) { alert(' Acceleration X: ' + acceleration.x + '' + ' Acceleration Y: ' + acceleration.y + '' + ' Acceleration Z: ' + acceleration.z + '' + 'Timestamp: ' + acceleration.timestamp''); }; function onError() { alert('onError!'); }; navigator. accelerometer.getCurrentAcceleration (onSuccess, onError);
24.
Phone Gap Camera
Camera 调用摄像头 navigator. camera.getPicture (onSuccess, onFail, { quality: 50, destinationType: Camera .DestinationType.FILE_URI }); function onSuccess(imageURI) { var image = document.getElementById('myImage'); image.src = imageURI; } function onFail(message) { alert('Failed because: ' + message); }
25.
Phone Gap Debug
程序调试 console.log(“”);
26.
最后 Phone Gap
相关网址 http://www.w3schools.com / W3C 官网 http ://docs.phonegap.com / 在线手册 http:// www.phonegap.com/start#android 开发环境搭建 http:// groups.google.com/group/phonegap?pli=1 Google PhoneGap 开发群组
27.
谢 谢 王振
[email_address]
Jetzt herunterladen