Submit Search
Upload
Html5移动web应用开发(PhoneGap)
•
Download as PPT, PDF
•
2 likes
•
1,020 views
A
amd6400
Follow
Html5移动web应用开发(PhoneGap)
Read less
Read more
Education
Technology
Design
Report
Share
Report
Share
1 of 30
Download now
Recommended
HTML5移动应用开发分享会(PhoneGap)
HTML5移动应用开发分享会(PhoneGap)
amd6400
让我们的页面跑得更快
让我们的页面跑得更快
li qiang
m.taobao.com for iPhone&Android Optimization
m.taobao.com for iPhone&Android Optimization
346682530
Keep web accessibility in mind
Keep web accessibility in mind
solodxg
Phone gap android plugins
Phone gap android plugins
Simon MacDonald
Introduction to phone gap
Introduction to phone gap
Danet Krueng
Phone gap vs ionic vs intel xdk
Phone gap vs ionic vs intel xdk
رياض خليفة
Rhodes And Phone Gap
Rhodes And Phone Gap
Makoto Inoue
Recommended
HTML5移动应用开发分享会(PhoneGap)
HTML5移动应用开发分享会(PhoneGap)
amd6400
让我们的页面跑得更快
让我们的页面跑得更快
li qiang
m.taobao.com for iPhone&Android Optimization
m.taobao.com for iPhone&Android Optimization
346682530
Keep web accessibility in mind
Keep web accessibility in mind
solodxg
Phone gap android plugins
Phone gap android plugins
Simon MacDonald
Introduction to phone gap
Introduction to phone gap
Danet Krueng
Phone gap vs ionic vs intel xdk
Phone gap vs ionic vs intel xdk
رياض خليفة
Rhodes And Phone Gap
Rhodes And Phone Gap
Makoto Inoue
HTML5移动WEB应用程序开发(PhoneGap)
HTML5移动WEB应用程序开发(PhoneGap)
amd6400
Ajax Transportation Methods
Ajax Transportation Methods
yiditushe
HTML5概览
HTML5概览
Adam Lu
行動商務實務 - PhoneGap Advance
行動商務實務 - PhoneGap Advance
My own sweet home!
唐俊开-Html5 mobile web app浅谈
唐俊开-Html5 mobile web app浅谈
Webrebuild
Html5 mobile web app浅谈
Html5 mobile web app浅谈
sankyu Tang
javascript的分层概念 --- 阿当
javascript的分层概念 --- 阿当
裕波 周
Javascript Training
Javascript Training
beijing.josh
從 Web Site 到 Web Application,從 Web Services 到 Mobile Services
從 Web Site 到 Web Application,從 Web Services 到 Mobile Services
Kuo-Chun Su
YUI ─ 阿大
YUI ─ 阿大
taobao.com
Yid chart
Yid chart
fangdeng
Web base 吴志华
Web base 吴志华
FLASH开发者交流会
揭秘Html5和Css3
揭秘Html5和Css3
Adam Lu
揭秘Html5和Css3 ---- 鲁超伍
揭秘Html5和Css3 ---- 鲁超伍
裕波 周
Html5css3 go.yeefe.com
Html5css3 go.yeefe.com
tellyeefe
Windows Mobile Widget 開發
Windows Mobile Widget 開發
Chui-Wen Chiu
关于Js的跨域操作
关于Js的跨域操作
王 承石
Anroid development part.1
Anroid development part.1
RANK LIU
AngularJS training in Luster
AngularJS training in Luster
Jason Chung
Html5和css3入门
Html5和css3入门
Xiujun Ma
【国外大学文凭样本】多大毕业证认证Q/微:892798920办多伦多大学毕业证留信留服使馆公公证,多大硕士毕业证,U of T研究生毕业证,文凭,改U o...
【国外大学文凭样本】多大毕业证认证Q/微:892798920办多伦多大学毕业证留信留服使馆公公证,多大硕士毕业证,U of T研究生毕业证,文凭,改U o...
ggbob1
我了解到黑客在某些领域拥有卓越的技术能力,特别是在处理系统漏洞方面。在当前的情境下,如果我想要改变我的毕业成绩,他们的帮助或许是我唯一可行的选择。【微 t...
我了解到黑客在某些领域拥有卓越的技术能力,特别是在处理系统漏洞方面。在当前的情境下,如果我想要改变我的毕业成绩,他们的帮助或许是我唯一可行的选择。【微 t...
黑客 接单【TG/微信qoqoqdqd】
More Related Content
Similar to Html5移动web应用开发(PhoneGap)
HTML5移动WEB应用程序开发(PhoneGap)
HTML5移动WEB应用程序开发(PhoneGap)
amd6400
Ajax Transportation Methods
Ajax Transportation Methods
yiditushe
HTML5概览
HTML5概览
Adam Lu
行動商務實務 - PhoneGap Advance
行動商務實務 - PhoneGap Advance
My own sweet home!
唐俊开-Html5 mobile web app浅谈
唐俊开-Html5 mobile web app浅谈
Webrebuild
Html5 mobile web app浅谈
Html5 mobile web app浅谈
sankyu Tang
javascript的分层概念 --- 阿当
javascript的分层概念 --- 阿当
裕波 周
Javascript Training
Javascript Training
beijing.josh
從 Web Site 到 Web Application,從 Web Services 到 Mobile Services
從 Web Site 到 Web Application,從 Web Services 到 Mobile Services
Kuo-Chun Su
YUI ─ 阿大
YUI ─ 阿大
taobao.com
Yid chart
Yid chart
fangdeng
Web base 吴志华
Web base 吴志华
FLASH开发者交流会
揭秘Html5和Css3
揭秘Html5和Css3
Adam Lu
揭秘Html5和Css3 ---- 鲁超伍
揭秘Html5和Css3 ---- 鲁超伍
裕波 周
Html5css3 go.yeefe.com
Html5css3 go.yeefe.com
tellyeefe
Windows Mobile Widget 開發
Windows Mobile Widget 開發
Chui-Wen Chiu
关于Js的跨域操作
关于Js的跨域操作
王 承石
Anroid development part.1
Anroid development part.1
RANK LIU
AngularJS training in Luster
AngularJS training in Luster
Jason Chung
Html5和css3入门
Html5和css3入门
Xiujun Ma
Similar to Html5移动web应用开发(PhoneGap)
(20)
HTML5移动WEB应用程序开发(PhoneGap)
HTML5移动WEB应用程序开发(PhoneGap)
Ajax Transportation Methods
Ajax Transportation Methods
HTML5概览
HTML5概览
行動商務實務 - PhoneGap Advance
行動商務實務 - PhoneGap Advance
唐俊开-Html5 mobile web app浅谈
唐俊开-Html5 mobile web app浅谈
Html5 mobile web app浅谈
Html5 mobile web app浅谈
javascript的分层概念 --- 阿当
javascript的分层概念 --- 阿当
Javascript Training
Javascript Training
從 Web Site 到 Web Application,從 Web Services 到 Mobile Services
從 Web Site 到 Web Application,從 Web Services 到 Mobile Services
YUI ─ 阿大
YUI ─ 阿大
Yid chart
Yid chart
Web base 吴志华
Web base 吴志华
揭秘Html5和Css3
揭秘Html5和Css3
揭秘Html5和Css3 ---- 鲁超伍
揭秘Html5和Css3 ---- 鲁超伍
Html5css3 go.yeefe.com
Html5css3 go.yeefe.com
Windows Mobile Widget 開發
Windows Mobile Widget 開發
关于Js的跨域操作
关于Js的跨域操作
Anroid development part.1
Anroid development part.1
AngularJS training in Luster
AngularJS training in Luster
Html5和css3入门
Html5和css3入门
Recently uploaded
【国外大学文凭样本】多大毕业证认证Q/微:892798920办多伦多大学毕业证留信留服使馆公公证,多大硕士毕业证,U of T研究生毕业证,文凭,改U o...
【国外大学文凭样本】多大毕业证认证Q/微:892798920办多伦多大学毕业证留信留服使馆公公证,多大硕士毕业证,U of T研究生毕业证,文凭,改U o...
ggbob1
我了解到黑客在某些领域拥有卓越的技术能力,特别是在处理系统漏洞方面。在当前的情境下,如果我想要改变我的毕业成绩,他们的帮助或许是我唯一可行的选择。【微 t...
我了解到黑客在某些领域拥有卓越的技术能力,特别是在处理系统漏洞方面。在当前的情境下,如果我想要改变我的毕业成绩,他们的帮助或许是我唯一可行的选择。【微 t...
黑客 接单【TG/微信qoqoqdqd】
【創業簡報練習】當一個人吃飯會想起誰:(A)I-DOLL 陪吃娃娃|科技創業與營運實務
【創業簡報練習】當一個人吃飯會想起誰:(A)I-DOLL 陪吃娃娃|科技創業與營運實務
sardinesaying
30T.ppt【国外大学文凭样本】TWU毕业证认证Q/微:892798920办西三一大学毕业证留信留服使馆公证,TWU硕士毕业证,TWU研究生毕业证,文凭...
30T.ppt【国外大学文凭样本】TWU毕业证认证Q/微:892798920办西三一大学毕业证留信留服使馆公证,TWU硕士毕业证,TWU研究生毕业证,文凭...
ggbob1
JAWAPAN BUKU AKTIVITI BAHASA CINA TAHUN 3.pptx
JAWAPAN BUKU AKTIVITI BAHASA CINA TAHUN 3.pptx
CHANSUITNEEMoe
GPA低怎么办? | 身份黑后回复方案 | 出入境激活 身份恢复美本GPA太低了怎么办黑客服务,黑客修改大学成绩,黑客改成绩单,黑客入侵教务系统,找黑客修...
GPA低怎么办? | 身份黑后回复方案 | 出入境激活 身份恢复美本GPA太低了怎么办黑客服务,黑客修改大学成绩,黑客改成绩单,黑客入侵教务系统,找黑客修...
黑客 接单【TG/微信qoqoqdqd】
哪里可以购买日本神奈川县立保健福祉大学学位记/录取通知书可以制作吗/补办马来西亚大学文凭/CIA证书定制
哪里可以购买日本神奈川县立保健福祉大学学位记/录取通知书可以制作吗/补办马来西亚大学文凭/CIA证书定制
kathrynalvarez364
003 DSKP KSSR SEMAKAN 2017 BAHASA CINA TAHUN 3.pdf
003 DSKP KSSR SEMAKAN 2017 BAHASA CINA TAHUN 3.pdf
shanshanhui1
未毕业在线购买日本熊本县立大学学位记🏆学习成绩单电子版定制🏆克隆爱尔兰大学文凭🏆CFA证书定制
未毕业在线购买日本熊本县立大学学位记🏆学习成绩单电子版定制🏆克隆爱尔兰大学文凭🏆CFA证书定制
gravestomas0
加急代办一个日本鹿儿岛纯心女子大学学位记🌈学习成绩单电子版定制🌈仿制荷兰大学毕业证🌈日语JLPT证书定制
加急代办一个日本鹿儿岛纯心女子大学学位记🌈学习成绩单电子版定制🌈仿制荷兰大学毕业证🌈日语JLPT证书定制
bairnshajjes
Grade 6 Lesson 7 Environment Protection.pptx
Grade 6 Lesson 7 Environment Protection.pptx
PriscilleXu
Recently uploaded
(11)
【国外大学文凭样本】多大毕业证认证Q/微:892798920办多伦多大学毕业证留信留服使馆公公证,多大硕士毕业证,U of T研究生毕业证,文凭,改U o...
【国外大学文凭样本】多大毕业证认证Q/微:892798920办多伦多大学毕业证留信留服使馆公公证,多大硕士毕业证,U of T研究生毕业证,文凭,改U o...
我了解到黑客在某些领域拥有卓越的技术能力,特别是在处理系统漏洞方面。在当前的情境下,如果我想要改变我的毕业成绩,他们的帮助或许是我唯一可行的选择。【微 t...
我了解到黑客在某些领域拥有卓越的技术能力,特别是在处理系统漏洞方面。在当前的情境下,如果我想要改变我的毕业成绩,他们的帮助或许是我唯一可行的选择。【微 t...
【創業簡報練習】當一個人吃飯會想起誰:(A)I-DOLL 陪吃娃娃|科技創業與營運實務
【創業簡報練習】當一個人吃飯會想起誰:(A)I-DOLL 陪吃娃娃|科技創業與營運實務
30T.ppt【国外大学文凭样本】TWU毕业证认证Q/微:892798920办西三一大学毕业证留信留服使馆公证,TWU硕士毕业证,TWU研究生毕业证,文凭...
30T.ppt【国外大学文凭样本】TWU毕业证认证Q/微:892798920办西三一大学毕业证留信留服使馆公证,TWU硕士毕业证,TWU研究生毕业证,文凭...
JAWAPAN BUKU AKTIVITI BAHASA CINA TAHUN 3.pptx
JAWAPAN BUKU AKTIVITI BAHASA CINA TAHUN 3.pptx
GPA低怎么办? | 身份黑后回复方案 | 出入境激活 身份恢复美本GPA太低了怎么办黑客服务,黑客修改大学成绩,黑客改成绩单,黑客入侵教务系统,找黑客修...
GPA低怎么办? | 身份黑后回复方案 | 出入境激活 身份恢复美本GPA太低了怎么办黑客服务,黑客修改大学成绩,黑客改成绩单,黑客入侵教务系统,找黑客修...
哪里可以购买日本神奈川县立保健福祉大学学位记/录取通知书可以制作吗/补办马来西亚大学文凭/CIA证书定制
哪里可以购买日本神奈川县立保健福祉大学学位记/录取通知书可以制作吗/补办马来西亚大学文凭/CIA证书定制
003 DSKP KSSR SEMAKAN 2017 BAHASA CINA TAHUN 3.pdf
003 DSKP KSSR SEMAKAN 2017 BAHASA CINA TAHUN 3.pdf
未毕业在线购买日本熊本县立大学学位记🏆学习成绩单电子版定制🏆克隆爱尔兰大学文凭🏆CFA证书定制
未毕业在线购买日本熊本县立大学学位记🏆学习成绩单电子版定制🏆克隆爱尔兰大学文凭🏆CFA证书定制
加急代办一个日本鹿儿岛纯心女子大学学位记🌈学习成绩单电子版定制🌈仿制荷兰大学毕业证🌈日语JLPT证书定制
加急代办一个日本鹿儿岛纯心女子大学学位记🌈学习成绩单电子版定制🌈仿制荷兰大学毕业证🌈日语JLPT证书定制
Grade 6 Lesson 7 Environment Protection.pptx
Grade 6 Lesson 7 Environment Protection.pptx
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
动画 有了 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.
13.
其它 :JQuery Mobile
Jquery Mobile UI 演示 <div role="navigation" data-role="navbar" class="nav-glyphish-example ui-navbar" data-grid="d"> <ul class="ui-grid-d"> <li class="ui-block-a">....</li> <li class="ui-block-b">....</li> <li class="ui-block-c">....</li> </ul> </div> http://jquerymobile.com/demos/1.0b2/#/demos/1.0b2/docs/toolbars/docs-navbar.html
14.
其它 :JQuery Mobile
Jquery Mobile themes 丰富的 UI 库更有利于程序员开发 http ://jquerymobile.com/demos/1.0b2/#/demos/1.0b2/docs/api/themes.html
15.
Phone Gap API
介绍 官方网站 : http://www.phonegap.com
16.
17.
Phone Gap
简介 Phone Gap For Android * 在 # /asset/www/ 目录下开发 web 应用程序 生成 APP 应用
18.
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 的应用程序
19.
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 函数
20.
21.
22.
23.
24.
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); }
25.
Phone Gap Geolocation
Geolocation GPS 位置定位 navigator. geolocation.getCurrentPosition (onSuccess, onError);
26.
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);
27.
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); }
28.
Phone Gap Debug
程序调试 console.log(“”);
29.
最后 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 群组
30.
谢 谢 王振
[email_address]
Download now