HTML5移动Web开发指南

HTML5 Web
Publishing House of Electronics Industry

BEIJING

HTML5 HTML5 Web Web App
Web HTML5 Web
HTML5
JavaScript jQuery MobileSencha Touch
PhoneGap Sencha Touch HTML5
HTML5
HTML5 Web
HTML HTML5
Web
HTML UI
Web
Web

JavaPHPASP.NET Web
CIP
HTML5 Web . 2012.3
ISBN 978-7-121-16083-7
. H
. HTML 5
. TP312-62
CIP 2012 028043
173 100036
787980
1/16
24
468
2012 3 1
4000
59.00
01088254888
zlts@phei.com.cn dbqq@phei.com.cn
01088258888
Web
HTML5
HTML5 2011 HTML5
GoogleMozilla Opera
HTML5 Web HTML5
Adobe Flash Web Web
HTML5 HTML5 CSS3
Web
HTML5 HTML5 HTML5
HTML5
Web
HTML5 Web
III

2011 HTML5
HTML5 HTML5
BUG
HTML5
2011 iPhoneAndroid
Web Web
Web
Web
Web
HTML5 Web
HTML5
Web
HTML5 HTML5 Web

Web App
Web Web
HTML5 Web
HTML5
CSS3Geolocation HTML5
Web
HTML5 jQuery Mobile
Sencha Touch PhoneGap
SenchaTouch HTML5
Web App HTML5
IV
HTML5 HTML5
Web HTML5
Web
HTML5
Sencha Touch demo
jQuery Mobile
PhoneGap
PhoneGap http://www.phonegap.cn
HTML5 Web
HTML HTML5
Web
HTML UI
Web
Web

JavaPHPASP.NET Web
HTML5
HTML5
Web
imsankyu@qq.com@ sankyu
VI
1
1.1
................................................................................................................. 1
1.2
................................................................................................................. 2
1.3
Web ......................................................................................................... 4
1.4
Web .............................................................................................................. 7
1.5
HTML5 Web .............................................................................................. 8
2
2.1
2.2
2.3
HTML5 ........................................................................................ 12
.................................................................................................................... 12
2.1.1
HTML5 ...................................................................................... 12
2.1.2
HTML5 ............................................................................................... 16
.............................................................................................. 16
2.2.1
............................................................................................. 17
2.2.2
HTML5 Web ............................................................. 18
................................................................................................................................. 22
VI
Web ........................................................................................ 1
HTML5 ............................................................................................ 23
3.1
.................................................................................................................... 23
3.2
localStorage ............................................................................................................................ 24
3.3
sessionStorage ........................................................................................................................ 28
3.4
Storage ................................................................................................................... 29
3.5
................................................................................................................................. 33
4
4.1
Web ................................................................................................... 34
Web ......................................................................................................................... 34
4.1.1
............................................................................................................... 34
4.1.2
............................................................................................................... 35
4.2
................................................................................................................... 35
4.3
applicationCachemanifest ................................................................................................ 36
4.4
4.3.1
manifest ............................................................................................................. 36
4.3.2
applicationCache ................................................................................ 38
................................................................................................................................. 39
HTML5 ........................................................................... 40
5.1
................................................................................................................... 40
5.2
Webinput................................................................................................... 42
5.2.1
search ........................................................................................................ 42
5.2.2
email ......................................................................................................... 43
5.2.3
number...................................................................................................... 44
5.2.4
range ......................................................................................................... 45
5.2.5
tel............................................................................................................... 45
5.2.6
url .............................................................................................................. 46
5.2.7
............................................................................................................... 46
5.3
............................................................................................................... 47
5.4
................................................................................................................................. 47
Web ....................................................................................................... 48
6.1
CSS3 ........................................................................................................................................ 48
6.2
..................................................................................................................................... 49
6.2.1
............................................................................................................... 49
6.2.2
............................................................................................................... 51
VII
6.3
6.4
.......................................................................................................................................... 53
6.3.1
box-shadow ............................................................................................................... 53
6.3.2
text-shadow ............................................................................................................... 54
.......................................................................................................................................... 54
6.4.1
background-size ........................................................................................................ 55
6.4.2
background-clip ........................................................................................................ 55
6.4.3
background-origin .................................................................................................... 55
6.4.4
background ................................................................................................................ 56
6.5
................................................................................................................................. 56
6.6
Media Queries .............................................................................................. 57
6.7
6.6.1
iPhone ........................................................................ 57
6.6.2
viewport ................................................................ 59
6.6.3
Media Queries ......................................................................................... 60
6.6.4
Media Queries ......................................................................................... 63
6.6.5
Web ............................................................... 65
................................................................................................................................. 73
Geolocation.................................................................................................. 74
7.1
................................................................................................................................. 74
7.2
.................................................................................................................... 75
7.3
Geolocation API ................................................................................................... 75
7.4
7.3.1
.................................................................................................. 75
7.3.2
.................................................................................... 77
................................................................................................................................. 78
jQuery Mobile ................................................................................. 79
8.1
jQuery Mobile................................................................................................................ 79
8.2
Hello World ........................................................................................................... 80
VIII
8.2.1
................................................................................................................... 80
8.2.2
............................................................................................................................ 81
8.3
8.4
8.5
8.6
8.7
8.8
HTML5 .............................................................................. 82
8.3.1
dataset .................................................................................................. 82
8.3.2
datasetjQuery Mobile ........................................................... 83
............................................................................................................................ 85
8.4.1
Web .............................................................................................. 85
8.4.2
...................................................................................................... 86
8.4.3
Web ....................................................................................................... 88
8.4.4
............................................................................................. 90
8.4.5
.......................................................................................................... 91
8.4.6
dialog ............................................................................................................ 92
8.4.7
................................................................................................................... 93
button .............................................................................................................................. 94
8.5.1
button................................................................................................................. 94
8.5.2
iconbutton ................................................................................... 95
8.5.3
button........................................................................................... 98
8.5.4
button .................................................................................. 99
Bar ............................................................................................................................. 102

8.6.1
.................................................................................................... 103
8.6.2
Header .......................................................................... 104
8.6.3
Footer ........................................................................................ 107
8.6.4
........................................................................................................ 109
8.6.5
fixed.................................................................................................... 113
8.6.6
.................................................................................................... 114
............................................................................................................. 114
8.7.1
................................................................................................................. 114
8.7.2
9 .............................................................................. 120
8.7.3
............................................................................................................. 122
8.7.4
.............................................................................. 124
Form .............................................................................................................................. 125

8.8.1
....................................................................................... 126
IX
8.8.2
HTML5 ............................................................................................. 126
8.8.3
HTML5 .................................................................................... 127
8.8.4
Slider ............................................................................................................... 128
8.8.5 Toggle .............................................................................................................. 129
8.9
8.8.6
........................................................................................................ 130
8.8.7
............................................................................................................. 133
8.8.8
........................................................................................................ 135
List ................................................................................................................................. 144

8.9.1
........................................................................................................ 145
8.9.2
........................................................................................................ 147
8.9.3
.................................................................................................... 149
8.9.4
........................................................................................................ 151
8.9.5
................................................................................................................. 153
8.9.6
.................................................................................................... 154
8.9.7
........................................................................................................ 155
8.9.8
.................................................................................................... 157
8.9.9
....................................................................................... 159
8.9.10
................................................................... 160
8.9.11
..................................................................................... 162
8.9.12
..................................................................................... 163
8.9.13
............................................................................................................... 164
8.9.14
.................................................................................................. 166
8.10
............................................................................................................................. 166
8.11
Event ........................................................................................................................... 170
8.12
8.11.1
...................................................................................................... 171
8.11.2
...................................................................................................... 171
............................................................................................................... 173
8.12.1
............................................................................................. 174
8.12.2
............................................................................................................... 176
8.12.3
............................................................................................. 177
8.12.4
loading/ ................................................................................................ 184
8.13
............................................................................................................................ 185
8.14
............................................................................................................................ 186
9
9.1
9.2
9.3
Sencha Touch .......................................................................... 187
Sencha Touch ............................................................................................................... 187

9.1.1
................................................................................................................. 187
9.1.2
............................................................................................................. 188
Hello World ......................................................................................................... 190

9.2.1
................................................................................................................. 190
9.2.2
................................................................................................................. 190
9.2.3
................................................................................................................. 192
9.2.4
................................................................................................................. 192
............................................................................................................................... 194
9.3.1
............................................................................................................. 194
9.3.2
............................................................................................................. 195
9.3.3 Touch ...................................................................................................... 196

9.3.4
9.4
9.5
9.6
9.7
Ext.EventManager............................................................................ 197
.......................................................................................................................... 199
9.4.1
Ext.lib.Component ................................................................................................. 199
9.4.2
............................................................................................... 200
Toolbar ..................................................................................................................... 210

9.5.1
..................................................................... 211
9.5.2
..................................................................... 212
9.5.3
..................................................................... 214
9.5.4
.................................................................................................... 216
Tabs ........................................................................................................................... 219

9.6.1
TabPanelTab......................................................................... 219
9.6.2
............................................................................................................. 220
Carousel................................................................................................................................. 222
XI
9.8
Overlays ................................................................................................................... 224

9.8.1
Alert ............................................................................................... 224
9.8.2
Confirm ..................................................................................... 226
9.8.3 Prompt ........................................................................................... 227
9.9
9.10
9.11
9.12
9.13
9.8.4
ActionSheet ....................................................................................... 229
9.8.5
Overlay ................................................................................. 232
Picker ........................................................................................................................ 234

9.9.1
....................................................................................... 235
9.9.2
..................................................................... 236
List .............................................................................................................................. 238

9.10.1
......................................................................................... 238
9.10.2
......................................................................................... 240
9.10.3
Ajax ................................................................................ 242
9.10.4
XTemplate ....................................................................................... 245
HTML5 ................................................................................................ 249

9.11.1
HTML5 .................................................................................. 249
9.11.2
HTML5 ....................................................................................... 249
9.11.3
GeoLocation....................................................................... 252
9.11.4
.................................................................................................. 255
9.11.5
...................................................................................................... 257
MVC................................................................................................................... 258
9.12.1
MVC .............................................................................................................. 258
9.12.2
application ................................................................................... 259
9.12.3
Model ................................................................................................... 262
9.12.4
View .......................................................................................................... 267
9.12.5
setActiveItem ...................................................................................... 268
9.12.6
Controller ........................................................................................ 270
............................................................................................................................. 272
10
XII
PhoneGap .............................................................................. 273
10.1
PhoneGap ................................................................................................................... 273
10.2
PhoneGap ................................................................................................. 274

10.2.1
AndroidPhoneGap ........................................... 275
10.2.2
iOSPhoneGap .................................................................... 280
.................................................................................................................... 283
10.3
10.3.1
Accelerometer ............................................................................ 283
10.3.2
Compass ......................................................................... 286
10.3.3
connection ................................................................. 289
10.3.4
File ...................................................................................... 290
10.3.5
Device ........................................................... 307
............................................................................................................................ 309
10.4
10.4.1
Camera................................................................................ 309
10.4.2
Capture ........................................................................... 312
10.4.3
Contacts ................................................................. 317
10.4.4
...................................................................................................... 326
10.4.5
Media ............................................................................................................ 328
Events ......................................................................................................................... 328
10.5
10.5.1
............................................................................................................... 329
10.5.2
...................................................................................................... 332
10.5.3
Android ................................................................................................ 333
HTML5 ...................................................................................................................... 335
10.6
10.6.1
GeoLocation ........................................................................................ 336
10.6.2
Storage .......................................................................................................... 336
............................................................................................................................ 336
10.7
11
11.1
11.2
HTML5 Web App.................................................................. 337

............................................................................................................................. 337
11.1.1
............................................................................................................... 337
11.1.2
............................................................................................................... 339
........................................................................................................... 340
XIII
11.3
11.4
11.5
11.6
11.2.1
............................................................................................................... 340
11.2.2
...................................................................................................... 341
Model ........................................................................................................ 343

11.3.1
Model ............................................................................................... 343
11.3.2
Store ...................................................................................................... 344
View ........................................................................................................... 344

11.4.1
............................................................................................................... 344
11.4.2
............................................................................................................... 346
11.4.3
............................................................................................................... 346
11.4.4
.............................................................................................. 349
11.4.5
Sheet .................................................................................... 350
............................................................................................................................. 352
11.5.1
controller .................................................................................................. 352
11.5.2
......................................................................................... 352
11.5.3
.............................................................................................. 355
11.5.4
Geolocation ................................................................................. 355
11.5.5
.............................................................................................. 357
11.5.6
Google .................................................................................................. 358
11.5.7
Sheet............................................................................................. 360
11.5.8
................................................................................ 360
11.5.9
......................................................................................... 361
............................................................................................................................. 362
11.6.1
manifest ....................................................................................... 362
11.6.2
HTML .......................................................................................... 363
11.7
................................................................................................................ 364
11.8
............................................................................................................................. 365
12
..................................................................................................................... 366
12.1
HTML5 .............................................................................................................. 366
12.2
Web ................................................................................................... 367
XIV
12.3
........................................................................................................... 367
12.4
Web ............................................................................................................ 368
XV
Web
Web CSS3
Media Queries Web
6.1 CSS3
CSS2.1 7 7
CSS2.1 Web
CSS3 CSS2.1 HTML
HTML5 IT CSS3
CSS3 Webkit
Android iOS Apple Google
HTML5 Web CSS3 Web
CSS3 HTML
CSS3 Web
Web CSS3
Web CSS
CSS3 Web

6 Web

CSS3 Web
6.2
CSS3 CSS3
6.2.1
CSS3 HTMLCSS
CSS2 HTML
divid
4

1
div id test
id test
id
<div id="article"></div>
<style type="text/css">
[id=article]{
color:red;
}
</style>
49
HTML5 Web
[attribute*=value] attribute value

*=
div div
<div id="subarticle"></div>
<div id="article1"></div>
[id*=article]{
color:red;
}
</style>
[attribute^=value] attribute value

^=
div id article article1
[id^=article]{
color:red;
}
</style>
50
6 Web
[attribute$=value] attribute value

$=
div id subarticle
[id$=article]{
color:red;
}
</style>
6.2.2
CSS3 CSS2.1
a:linka:visiteda:hovera:active
CSS3 :
first-line
first-letter
root
not
empty
target
CSS3
Android iOS Web
1before
before
before IE8+FirefoxChromeSafariOpera
Android Browser iOS Safari
before
51
HTML5 Web
:before{
content:""
}
p.before{
content:""
}
2after
after before after
before IE8+FirefoxChromeSafariOpera
Android Browser iOS Safari
after
:after{
content:""
}
3first-child
li:first-child{
color:red;
}
4last-child
first-child last-child
li:last-child{
color:red;
}
5nth-child nth-last-child
nth-child nth-last-child
52
6 Web
// 2 li
li:nth-child(2){}
// 2 li
li:nth-last-child{}
// li
li:nth-child(even){}
// li
li:nth-child(odd){}
CSS
CSS3
6.3
CSS3
6.3.1
box-shadow
CSS3 box-shadow
box-shadow:<length> <length> <length> || color;
length length
length 4px -4px
box-shadow Firefox 3.5+Chrome 2.0+Safari 4+
Webkit Chrome Safari box-shadow

-webkit-box-shadow Firefox
-moz-box-shadow
Android iOS Web
box-shadow CSS box-shadow
53
HTML5 Web
Web
box-shadow Chrome Safari
Firefox
div{
/**/
box-shadow:3px 4px 2px #000;
/*webkit */
-webkit-box-shadow:3px 4px 2px #000;
/*Firefox */
-moz-box-shadow:3px 4px 2px #000;
padding:5px 4px;
}
</style>
6.3.2
text-shadow
text-shadow
text-shadow Safari Firefox Chrome
Opera IE8 IE Web
Web
text-shadow box-shadow
text-shadow:<length> <length> <length> || color
text-shadow
div{
text-shadow:5px -10px 5px red;
color:#666;
font-size:16px;
}
</style>
54
6 Web
6.4
CSS
CSS3 CSS3
CSS3
CSS3
6.4.1
background-size
background-size
background-size Chrome Safari Opera
Android iOS Web
background-size Web
Webkit Chrome Safari -webkit-background-size Opera
-webkit background-size
Web
background-size:10px 5px;
-webkit-background-size:10px 5px;
6.4.2
background-clip
background-clip
background-clip IE Web
background-clip:border-box | padding-box | content-box | no-clip
border-box border padding-box padding

55
HTML5 Web
content-box no-clip border
6.4.3
background-origin
background-origin background-position
background-origin border
content padding padding
56
6 Web
6.4.4
background
background CSS3
CSS3
background:url(background1.png) left top no-repeat,

url(background2.png) left top no-repeat;
Chrome Safari background

Webkit Android iOS Web
Web
Webkit
-webkit-gradient(<type>, <port>[, <radius>]?,<point> [, <radius>]? [, <stop>]*)
CSS3
type linear radial
background:-webkit-gradient(linear,0 0,0 100%,form(#FFF),to(#000));
0 X Y 0 100%
X Y
6.5
Web
57
HTML5 Web
CSS3 border-radius
border-radius Chrome Safari Opera

Firefox Chrome
Safari -webkit-border-radius Firefox
-moz-border-radius Opera border-radius
border-radius:10px 5px;
-moz-border-radius:10px 5px;
-webkit-border-radius:10px 5px;
border-radius:10px 5px 10px 5px;

-moz-border-radius:10px 5px 10px 5px;
-webkit-border-radius:10px 5px 10px 5px;
border-radius 0
6.6 Media Queries

Media Queries
6.6.1
iPhone
Media Queries
6-1 Google iPhone Safari
58
6 Web
6-1
Google iPhone Safari
6-1
iPhone Safari Web Safari

980px
980px 6-1
800600
iPhone 320480 iPhone

Safari Web
iPhone
Google 6-2
59
HTML5 Web
6-2
Google
Google
Google
HTML viewport Media Queries
6.6.2
viewport
1 viewport
Apple Safari viewport
viewport
Safari 980
Safari viewport
viewport
60
6 Web
Android Browser 800

IE 974
Opera 850
2 viewport
viewport meta Web
<meta name="viewport" content="width=device-width,

initial-scale=1,user-scalable=0" />
width device-width
1
device-width iPhone
320480
Apple viewport width=
device-width iPhone width=320
viewport device-width
content content 6
width
height
initial-scale
maximum-scale
minimum-scale
user-scalable
6.6.3
Media Queries
Media Queries
Media Queries Web
6-3
6-3
61
HTML5 Web
1
Logo
iPad
Logo 6
iPad 6
6-3 2 2 3
6-3
iPhone 6-3 3
Logo
2 2 3
62
6 Web
iPhone 1
1
Media Queries
Media Queries head CSS

media 600
<link rel="stylesheet" media="screen and(max-width:600px)" href="small.css"/>
small.css media
@media screen and (max-width:600px){
.demo{
background-color:#CCC;
}
}
600 900
CSS
<link rel="stylesheet"
media="screen and(min-width:600px) and(max-width:900px)" href="small.css"/>
small.css
@media screen and (min-width:600px) and(max-width:900px){
.demo{
}
}
iPhone 480 CSS
<link rel="stylesheet" media="screen and(max-device-width:480px)" href="small.css"/>
small.css
@media screen and (max-device-width:480px){
.demo{
63
HTML5 Web
}
}
iPad
portrait portrait
landscape landscape
<link rel="stylesheet" media="all and(orientation:portrait)" href="portrait.css"/>
<link rel="stylesheet" media="all and(orientation:landscape)" href="landscape.css"/>
4 Media Queries
IE
IE CSS 
Media Queries
Media Queries
6.6.4
Media Queries
Media Queries
@media [media_query] media_type and media_feature
Media Queries @media

media_query not only not
@media not screen and (max-device-width:480px)
only Media Queries Media Type
@media only screen and (max-device-width:480px)
Media Queries only Web

only Media
Queries Media Type Web only
media_query Media Queries

64
6 Web
media_type CSS2.1
6-1 media_type 10
6-1
media_type
media_type
all
aural
braille
handled
print
projection
screen
tty
tv
embossed
media_feature CSS
min/
max min-width max-width
6-2 media_feature
6-2
media_feature
min/max
width
height
480
320
device-width
480
device-height
320
orientation
portrait
landscape
aspect-radio
16:9
device-aspect-radio
16:9
color
color-index
monochrome
resolution
scan
65
HTML5 Web
progressive interlace
grid
1 0
Media Queries
IE 9 Firefox Safari Chrome Opera
IE IE8 Media Queries
Android iOS Web
Media Queries
6.6.5
Web
Web
6-4 http://www.iaround.net
6-4 5
Logo
Web
66
6 Web
6-4
1 Media Queries
HTML head Media Queries
<link rel="stylesheet" type="text/css"
media="only screen and (max-width:480px),only screen and(max-device-width:
480px)"
href="/resources/style/device.css"/>
2 HTML
HTML 6-1
6-1 HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="keywords" content=" iphone Android symbian " />
<meta name="description" content="
" />
<meta name="viewport" content="width=device-width"/>
67
HTML5 Web
<title> - </title>
<link rel="stylesheet" href="/resources/style/base.css" type="text/css" />
<link rel="stylesheet" href="/resources/style/style.css" type="text/css" />
<link rel="stylesheet" href="/resources/style/home.css" type="text/css" />


media="only screen and (max-width:480px),only screen and(max-device-width:
480px)"
href="/resources/style/device.css"/>
</head>
<body>
<header class="header">
<div class="logo">
<nav class="header-nav">
<ul>
<li class="selected2"><a href="#"></a></li>
<li><a href="download.html"></a></li>
<li><a href="faq.html"> FAQ</a></li>
<li><a href="http://bbs.iaround.net"></a></li>
</ul>
</nav>
</div>
</header>
<section class="followme">
<em></em>
<a target="_blank" href="http://weibo.com/iAround"><img width="29" height=
"29" src="/resources/images/sina.gif" title="" align="top" /></a>
<a target="_blank" href="http://t.qq.com/iAround"><img width="29" height=
"29" src="/resources/images/qqwb.gif" title="" align="top" /></a>
</section>
<section class="mobile">
<div class="d_img"></div>
<div class="d">
<img width="280" height="179" src="/resources/images/feature.jpg" />
68
6 Web
<a class="download" href="download.html"></a>

<img class="app_tips" width="180" height="47" src="/resources/images/
app_tips.jpg" />
<ul class="app_type">
<li><a
class="app_ip"
href="http://itunes.apple.com/cn/app/
iaround-chat-with-people-nearby/id468944728?l=en&mt=8"></a></li>
<li><a class="app_az" href="/dl/iaround.apk"></a></li>
<li><a class="app_sb"></a></li>
</ul>
</div>
</section>
<section class="intro">
<div>
<header class="title"></header>
<div class="content">
<ul>
<li class="i1"><h1></h1>
</li>
15
</li>
500+</li>
</li>
</ul>
<ul>
</li>
<li class="i4"><h1></h1> iPhone Android
SymbianiPadwinPhone
</li>
</li>
</li>
</ul>
69
HTML5 Web
</div>
<footer class="footer"></footer>
</div>
</section>
<section class="friendlink">
<h1></h1>
<ul>
<!-- ->
</ul>
</section>
<footer class="footer">
<div class="bg">
<nav>
<ul>
<li><a> </a><span>|</span></li><li><a>
</a><span>|</span></li><li><a> </a><span>|</span></li><li><a>
</a></li>
</ul>
</nav>
<div class="copyright">
Guangzhou Zoega Information Technology Co., Ltd. ICP
09077414
</div>
</div>
</footer>
</body>
</html>
3device.css
device.css CSS
1 1 6-2
6-2
device.css
@media only screen and (max-width:480px),only screen and (max-device-width:480px){

.header .logo{
margin-left:0px;
position:relative;
background:url(/resources/images/device-logo.jpg) 0px 37px no-repeat;
width:100%;
70
6 Web
left:0;
height:150px;
}
.header .header-nav{
padding:0 0;
}
.header .header-nav ul{
text-align:left;
-webkit-padding-start:0;
}
.header .header-nav ul li{
display:inline-block;
}
.header .header-nav ul li a{
padding:0 0.2em;
}
section.followme {
position:relative;
left:0;
margin:0 0;
text-align:right;
width:100%;
}
.mobile{
margin:0 0;
text-align:left;
height:775px;
position: relative;
width:100%;
left:0;
background:url(/resources/images/device-mobile.jpg) left top no-repeat;
}
.mobile .d{
margin:0 0 0 -550px;
padding:270px 0 0 0;
}
.intro {
margin: 1em 0 2em 0.5em;
text-align:center;
position: relative;
width:95%;
71
HTML5 Web
left:0;
}
.intro header{
width:100%;
height:0;
background:none;
}
.intro footer {
width:100%;
height:0;
background:none;
}
.intro .content{
padding: 1em 0.6em;
border-radius:0.6em;
-webkit-border-radius:0.6em;
}
.intro ul {
display: inline-block;
width: 100%;
}
.intro ul li{
margin: 0 0 5.8em 0;
line-height: 22px;
}
.friendlink {
margin:1em 0.6em 2em 0.6em;
text-align:left;
position:relative;
width:95%;
left:0;
}
.platform {
margin:0 .4em;
width:95%;
left:0;
}
.platform ul li{
border-right:0;
72
6 Web
padding: 1.4em 3em;

}
.phoneModel {
margin:0.4em .4em;
border:1px solid #CFD1D6;
width:95%;
left:0;
}
}
CSS CSS
@media CSS
device.css
device.css iPhone Safari

6-5
73
HTML5 Web
6-5
74
6 Web
6.7
CSS3 CSS3
Media Queries
Web
75
11
HTML5
Web App
Web App Sencha Touch Web

HTML5 HTML5
Geolocation Google API
11.1
Web Geolocation Web

Web App Web
HTML5 Web
Web
HTML5 Web
11.1.1
HTML5 Web
Web App Sencha TouchGeolocation API

LocalStorage
Web App IE 9ChromeSafariFireFoxOpera iPhone
AndroidBlackBerryiPad
1Sencha Touch
Sencha Touch HTML5 Web
Sencha Touch
MVC Web
2Geolocation
Web App HTML5 Geolocation
Google
3localStorage
HTML5 LocalStorage
localStorage API Sencha Touch
LocalStorage
4
Web
HTML5
Web manifest
338
11 HTML5 Web App
Google API API

Google
Web Google
11.1.2
Web App Sencha Touch

MVC 11-1
11-1
11-1
example Web app
libresourcesindex.html app.manifestindex.html
Web App app.manifest
app Sencha Touch MVC JavaScript
Web App app
app.js Sencha Touch
controller Sencha Touch
339
HTML5 Web
model Sencha Touch Model

store Sencha Touch Store
Sencha Touch
Store Model
MVC Web App Store
JDBCJava Data Base ConnectivityJava
view Sencha Touch

Panel
lib Sencha Touch JavaScript CSS
Sencha Touch JavaScript JavaScirpt
resource Web App

CSS
11.2
HTML5 Web App index.html Sencha
Touch Sencha Touch MVC
app.js application Web App
11.2.1
HTML5 HTML
JavaScrip
JavaScript
CSS index.html 11-1
11-1 Sencha Touch
1 sencha-touch-debug.js Sencha Touch
JavaScript Sencha-Touch-debug.js
2app.js Web App JavaScript app.js
sencha-touch-debug.js model.jsstore.jsview.jscontroller.js
340
11 HTML5 Web App
3 MVC model.jsstore.jsview.jscontroller.js 4
controller
11-1
index.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet"type="text/css"
href="lib/sencha-touch.css" />
href="resources/style/style.css" />
<script type="text/javascript" src="lib/sencha-touch-debug.js">
</script>
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=true">
</script>
<script type="text/javascript" src="app/app.js"></script>
<script type="text/javascript" src="app/model/model.js">
</script>
<script type="text/javascript" src="app/store/store.js">
</script>
<script type="text/javascript" src="app/view/view.js">
</script>
<script type="text/javascript"
src="app/controller/controller.js">
</script>
</head>
<body>
</body>
</html>
11.2.2
1app.js
app.js app.js Sencha Touch MVC
Web App JS 11-2
341
HTML5 Web
Application name app launch
11-2
app.js
Ext.regApplication({
/* */
name : 'app',
/* */
defaultTarget : 'viewport',
/* */
launch : function(){
this.viewport = new app.views.viewport();
}
});
2 viewport
11-2 launch viewport
Ext.Panel
app.views.viewport Sencha Touch
items
Ext.Extend Panel app.views.viewport
new new
app.views.viewport()
app.views.viewport view.js
app.views.viewport = Ext.extend(Ext.Panel,{
id:'viewport',
fullscreen:true,
layout:'card',
// item
activeItem:0,
items:[
{
xtype:'listPanel'
},{
xtype:'noteForm'
},{
xtype:'viewNote'
342
11 HTML5 Web App
});
}
],
initComponent : function(){
app.views.viewport.superclass.
initComponent.apply(this,arguments);
}
fullScreenlayout viewport
id id
items xtype
xtype View
11.3 Model
Web App Sencha Touch Model
Store
11.3.1
Model
MVC model.js model note

app.models.note 11-3
11-3 proxy type
localStorage
11-3
model.js
app.models.note = Ext.regModel("note",{
fields:[
{name:'id',type:'int'},
{name:'title',type:'string'},
{name:'content',type:'string'},
{name:'position',type:'string'},
{name:'latitude',type:'string'},
{name:'longitude',type:'string'}
],
/* localStorage */
proxy : {
343
HTML5 Web
});
11.3.2
type:'localstorage',
id:'noteStorage'
Store
Store
Model Store
app.stores.noteStore
store.js 11-4
11-4
store.js
app.stores.noteStore = new Ext.data.Store({

model:'note',
id:'noteStore'
});
11.4 View
Model Store
Web App
11.4.1
Web App
viewport 11-2
344
11 HTML5 Web App
11-2
view.js
app.views.listPanel = Ext.extend(Ext.Panel,{
id:'listPanel',
layout:'card',
dockedItems:[{
xtype:'toolbar',
dock:'top',
title:'',
items:[{
xtype:'button',
text:'',
handler:function(){
app.controllers.appController.showNoteForm();
}
},{
xtype:'spacer'
},{
xtype:'button',
text:'',
handler:function(){
app.controllers.appController
345
HTML5 Web
.showNoteActionSheet();
}
}]
}],
items:[{
xtype:'noteList'
}],
app.views.listPanel.superclass.initComponent
.apply(this,arguments);
}
});
Ext.reg('listPanel',app.views.listPanel);
346
11 HTML5 Web App
11.4.2
items xtype noteList

xtype Ext.List Ext.reg
xtype
noteList view.js
app.views.noteList = Ext.extend(Ext.List,{
store : app.stores.noteStore,
cls:'noteList',
itemTpl : '<p class="title">{title}</p><p>{content}</p>',
onItemDisclosure:{
scope:this,
handler:function(record, btn, index){
}
},
app.stores.noteStore.load();
app.views.noteList.superclass
.initComponent.apply(this,arguments);
this.enableBubble('selectionchange');
}
});
Ext.reg('noteList',app.views.noteList);
initComponent
app.stores.noteStore.load();
Web
App
11.4.3
11-3
347
HTML5 Web
11-3
view.js
app.views.noteForm = Ext.extend(Ext.form.FormPanel,{
id:'noteForm',
scroll:'vertical',
dockedItems:[{
xtype:'toolbar',
dock:'top',
title:'',
items:[{
xtype:'button',
text:'',
handler:function(){
}
},{
xtype:'spacer'
},{
xtype:'button',
text:'',
handler:function(){
}
348
11 HTML5 Web App
}]
}],
items:[
{
xtype:'textfield',
name:'title',
labelWidth:'0%',
maxLength:20,
placeHolder:''
},{
xtype:'textareafield',
name:'content',
labelWidth:'0%',
maxLength : 1024,
maxRows : 10,
placeHolder:''
},{
xtype:'togglefield',
name:'isPosition',
label:'',
labelWidth:'65%',
listeners:{
change:function(slider,thumb,newValue,oldValue){
}
}
},{
xtype:'hiddenfield',
id:'latitude',
name:'latitude'
},{
id:'longitude',
name:'longitude'
}
],
app.views.listPanel.superclass.initComponent
}
});
Ext.reg('noteForm',app.views.noteForm);
349
HTML5 Web
11.4.4
Google
Google 11-4
11-4
Google
view.js
app.views.viewNote = Ext.extend(Ext.Panel,{
id:'viewNote',
tpl : new Ext.XTemplate(
'<header><h1><em></em>{title}</h1></header>',
'<p><em></em>{content}</p>'
),
350
11 HTML5 Web App
dockedItems:[{
xtype:'toolbar',
dock:'top',
title:'',
items:[{
xtype:'button',
text:'',
handler:function(){
}
},{
xtype:'spacer'
},{
xtype:'button',
text:'',
handler:function(){
}
}]
}],
items:[{
xtype:'map',
id:'map',
mapOptions:{
zoom : 14
}
},{
id:'noteId'
}],
app.views.viewNote.superclass.initComponent
}
});
11.4.5
Sheet
Sencha Touch Ext.ActionSheet

351
HTML5 Web
11-5
11-5
Sheet
ActionSheet view.js
app.views.moreActionSheet = new Ext.ActionSheet({
items : [
{
text:'',
scope:this,
handler:function(){
}
},{
text:'',
scope:this,
handler:function(){
}
}
]
});
352
11 HTML5 Web App
11.5
11.4 Web App
11.5.1
controller
controller
controller.js
app.controllers.appController =
new Ext.regController('appController',{
//
});
11.5.2
View
Google
1
showListPanel
controller.js
showListPanel:function(){
Ext.getCmp("viewport").setActiveItem('listPanel',{
type:'slide',
direction:'left'
});
}
showListPanel
353
HTML5 Web
app.views.noteForm = Ext.extend(Ext.form.FormPanel,{
dockedItems:[{
xtype:'toolbar',
dock:'top',
title:'',
items:[{
xtype:'button',
text:'',
handler:function(){
app.controllers.appController.saveNote();
}
},{
xtype:'spacer'
},{
xtype:'button',
text:'',
handler:function(){
app.controllers.appController.showListPanel();
}
}]
});
app.views.viewNote = Ext.extend(Ext.Panel,{
items:[{
xtype:'button',
text:'',
handler:function(){
}
}
354
11 HTML5 Web App
});
355
HTML5 Web
showNoteForm
showNoteForm:function(){
Ext.getCmp('viewport').setActiveItem('noteForm',{
type:'slide',
direction:'left'
});
}
showNoteForm
app.views.listPanel = Ext.extend(Ext.Panel,{
dockedItems:[{
xtype:'toolbar',
dock:'top',
title:'',
items:[{
xtype:'button',
text:'',
handler:function(){
app.controllers.appController.showNoteForm();
}
}
});
3
controller.js showViewNote
showViewNote:function(){
Ext.getCmp("viewport").setActiveItem('viewNote',{
356
11 HTML5 Web App
type:'slide',
direction:'left'
});
}
11.5.3
localStorage
saveNote:function(){
var form = Ext.getCmp("noteForm");
var store = app.stores.noteStore;
var last = store.last();
var maxId = last==undefined?1:last.data.id+1;
form.submit({
waitMsg:'...',
success:function(){
}
});
var m = Ext.ModelMgr.create({id:maxId},'note');
form.updateRecord(m,false);
app.stores.noteStore.insert(maxId,m);
app.stores.noteStore.sync();
form.reset();
}
11.5.4
Geolocation
11-3
change
{
xtype:'togglefield',
name:'isPosition',
357
HTML5 Web
label:'',
labelWidth:'65%',
listeners:{
change:function(slider,thumb,newValue,oldValue){
//
if(newValue==1 && oldValue==0){
.getCurrentPosition();
}
//
if(newValue == 0){
.clearPosition();
}
}
}
}
change controller
getCurrentPosition
getCurrentPosition:function(){
var geo = new Ext.util.GeoLocation({
autoUpdate: true,
listeners: {
locationupdate: function (geo) {
Ext.getCmp('latitude')
.setValue(geo.coords.latitude);
Ext.getCmp('longitude')
.setValue(geo.coords.longitude);
},
locationerror:function(geo,
bTimeout,
bPermissionDenied,
bLocationUnavailable,
message){
}
}
});
geo.updateLocation();
}
358
11 HTML5 Web App
clearPosition
clearPosition:function(){
Ext.getCmp('latitude').setValue('');
Ext.getCmp('longitude').setValue('');
}
11.5.5
onItemDisclosure handler controller

showNote
app.views.noteList = Ext.extend(Ext.List,{
onItemDisclosure:{
scope:this,
handler:function(record, btn, index){
.showNote(record, btn, index);
}
}
});
showNote
tpl HTML
showNote controller.js
showNote:function(record, btn, index){
app.controllers.appController.showViewNote();
var data = record.data;
var viewNote = Ext.getCmp('viewNote');
if(data.latitude == "" || data.longitude == ""){
Ext.getCmp('viewNote').update(data);
Ext.getCmp('map').hide();
}else{
359
HTML5 Web
app.controllers.appController.showNoteByMap(data);
}
Ext.getCmp('noteId').setValue(data.id);
}
latitude longitude
update tpl
HTML
11.5.6
Google
Geolocation API latitude longitude
showNote latitude longitude

controller showNoteByMap
Google
showNoteByMap controller.js
showNoteByMap:function(data){
var map = Ext.getCmp('map');
map.show();
var latlng = {latitude:data.latitude,
longitude:data.longitude};
//
map.update(latlng);
//
var infowindow = new google.maps.InfoWindow({
content: '<p>'+data.title+'</p><p>'+data.content+'</p>'
});
// google
var center = new google.maps
.LatLng(data.latitude, data.longitude);
// Google
var marker = new google.maps.Marker({
position: center,
title : data.title,
map: map.map
360
11 HTML5 Web App
});
//
google.maps.event.addListener(marker,'mouseover',
function(){
infowindow.open(map,marker);
}
);
//
google.maps.event.addListener(marker, 'mouseout',
function(){
infowindow.close();
}
);
}
Google
11-4 11-6
11-6
Google
361
HTML5 Web
11.5.7
Sheet
Action Sheet
Sheet Sheet
showNoteActionSheet show
showNoteActionSheet controller.js
showNoteActionSheet:function(){
app.views.moreActionSheet.show();
}
showNoteActionSheet
{
xtype:'button',
text:'',
handler:function(){
app.controllers.appController.showNoteActionSheet();
}
}
11.5.8
Sheet
app.views.moreActionSheet = new Ext.ActionSheet({

items : [
{
text:'',
scope:this,
handler:function(){
app.controllers.appController.removeAllNote();
}
},{
362
11 HTML5 Web App
text:'',
scope:this,
handler:function(){
app.views.moreActionSheet.hide();
}
}
]
});
controller removeAllNote
Sheet hide
removeAllNote controller.js
removeAllNote:function(){
Ext.Msg.confirm("","?",function(){
var count = app.stores.noteStore.getCount();
for(var i=0;i<count;i++){
app.stores.noteStore.removeAt(0);
}
app.stores.noteStore.sync();
app.views.moreActionSheet.hide();
});
}
11.5.9
11-4
controller deleteNote
deleteNote:function(){
var noteId = Ext.getCmp('noteId').getValue();
var store = app.stores.noteStore;
var record = store.findRecord('id',noteId);
store.remove(record);
store.sync();
}
controller deleteNote
363
HTML5 Web
{
xtype:'button',
text:'',
handler:function(){
app.controllers.appController.deleteNote();
}
}
11.6
HTML5
11.6.1
manifest
manifest app.manifest
11-5
app.manifest
CACHE MANIFEST
#version 1.00
CACHE:
index.html
lib/sencha-touch-debug.js
app/app.js
app/model/model.js
app/controller/controller.js
app/store/store.js
app/view/view.js
resources/style/style.css
lib/sencha-touch.css
NETWORK:
http://maps.google.com/maps/api/js?sensor=true
http://maps.gstatic.com/intl/zh_cn/mapfiles/api-3/6/8/main.js
*
364
11 HTML5 Web App
1 manifest
app.manifest CACHE
app.manifest
manifest CACHE
CACHE #version
1.00
1.00 1.01 1.1
manifest
manifest
manifest
2 manifest
Tomcat Apache Web
manifest manifest
mime manifest
11-7
Invalid manifest mime type manifest
manifest
11-7
11.6.2
manifest
HTML
app.manifest
365
HTML5 Web
app.manifest HTML
<html manifest="app.manifest">
CACHE 11-8
11-8
CACHE
11.7
HTML5
Web localStorage
localStorage localStorage
Ajax
localStorage
366
11 HTML5 Web App
11.8
Web
Sencha Touch Panel
Sheet Web
HTML5 Web Geolocation
Google API
Google
367

HTML5移动Web开发指南

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

HTML5移动Web开发指南

Uploaded by

Copyright:

Available Formats

HTML5 Web

Publishing House of Electronics Industry

CIP 2012 028043

HTML5 HTML5 Web

HTML5 Web .............................................................................................. 8

HTML5 Web ............................................................. 18

Media Queries .............................................................................................. 57

Media Queries ......................................................................................... 60

Media Queries ......................................................................................... 63

Geolocation API ................................................................................................... 75

jQuery Mobile ................................................................................. 79

Hello World ........................................................................................................... 80

datasetjQuery Mobile ........................................................... 83

Bar ............................................................................................................................. 102

Header .......................................................................... 104

Footer ........................................................................................ 107

Form .............................................................................................................................. 125

HTML5 ............................................................................................. 126

HTML5 .................................................................................... 127

Slider ............................................................................................................... 128

8.8.5 Toggle .............................................................................................................. 129

List ................................................................................................................................. 144

Event ........................................................................................................................... 170

loading/ ................................................................................................ 184

Sencha Touch .......................................................................... 187

Sencha Touch ............................................................................................................... 187

Hello World ......................................................................................................... 190

9.3.3 Touch ...................................................................................................... 196

Ext.lib.Component ................................................................................................. 199

Toolbar ..................................................................................................................... 210

Tabs ........................................................................................................................... 219

Overlays ................................................................................................................... 224

Alert ............................................................................................... 224

Confirm ..................................................................................... 226

9.8.3 Prompt ........................................................................................... 227

ActionSheet ....................................................................................... 229

Overlay ................................................................................. 232

Picker ........................................................................................................................ 234

List .............................................................................................................................. 238

Ajax ................................................................................ 242

XTemplate ....................................................................................... 245

HTML5 ................................................................................................ 249

HTML5 .................................................................................. 249

HTML5 ....................................................................................... 249

MVC .............................................................................................................. 258

application ................................................................................... 259

Model ................................................................................................... 262

View .......................................................................................................... 267

setActiveItem ...................................................................................... 268

Controller ........................................................................................ 270

PhoneGap .............................................................................. 273

PhoneGap ................................................................................................................... 273

PhoneGap ................................................................................................. 274

AndroidPhoneGap ........................................... 275

iOSPhoneGap .................................................................... 280

Accelerometer ............................................................................ 283

Compass ......................................................................... 286

connection ................................................................. 289

File ...................................................................................... 290

Device ........................................................... 307

Capture ........................................................................... 312

Contacts ................................................................. 317

Media ............................................................................................................ 328

Events ......................................................................................................................... 328