[翻译]jQuery Mobile教程-创建一个订餐web应用(下)
原文作者Stephanie Walter
我们已经完成了jQuery Mobile教程的应用构建部分，现在我们必须再用一点样式使应用更耀眼。
自定义CSS:样式化我们的jQuery Mobile应用
你可以在.zip文件中找到所有使用的样式文件。你允许以演示目的使用它们，但不能以商业目的使用。要样式化jQuery Mobile应用，有两个方案：删除jquery.mobile-1.0.1.css 文件然后重新写一个自己的，或者添加第三个css文件来替换某些jQuery Mobile样式。这里我们采取第二方案，因为jQuery Mobile基础设计大多符合本应用的要求。你也能使用jQuery Mobile Theme roller创建自定义主题而不必写太多的css。
一些全局样式
这部分css改变了某些jQuery Mobile全局样式。
/*** general styling */
.ui-page.ui-body-c
{
background
:
url(images/bg.png)
;
box
-
shadow
:
0px
0px
30px
5px
rgba
(
107
,
105
,
105
,
0
.
3
)
inset
,
0px
0px
0px
1px
rgba
(
107
,
105
,
105
,
0
.
4
)
inset
;
}
.ui-icon.ui-icon-arrow-r
{
background-color
:
rgb
(
136
,
111
,
110
);
}
.ui-corner-all
,
.ui-corner-top
,
.ui-corner-bottom
,
.ui-corner-tl
,
.ui-corner-tr
,
.ui-corner-bl
,
.ui-header
.ui-btn-corner-all
,
.ui-listview-filter
.ui-btn-corner-all
,
#restau_infos
.ui-btn-corner-all
,
#contact_buttons
.ui-btn-corner-all
,
#notation
.ui-btn-corner-all
{
border
-
radius
:
0.2em
;
}
.ui-btn-active
{
background
:
#654644
;
/* Old browsers */
background
:
-
moz
-
linear
-
gradient
(
top
,
#654644
0
%,
#331c1b
100
%
);
/* FF3.6+ */
background
:
-
webkit
-
gradient
(
linear
,
left
top
,
left
bottom
,
color
-
stop
(
0
%,
#654644
)
,
color
-
stop
(
100
%,
#331c1b
));
/* Chrome,Safari4+ */
background
:
-
webkit
-
linear
-
gradient
(
top
,
#654644
0
%,
#331c1b
100
%
);
/* Chrome10+,Safari5.1+ */
background
:
-
o
-
linear
-
gradient
(
top
,
#654644
0
%,
#331c1b
100
%
);
/* Opera 11.10+ */
background
:
-
ms
-
linear
-
gradient
(
top
,
#654644
0
%,
#331c1b
100
%
);
/* IE10+ */
background
:
linear
-
gradient
(
top
,
#654644
0
%,
#331c1b
100
%
);
/* W3C */
color
:
#fff
!important
;
}
.ui-content
.choice_list
.ui-btn-active
.ui-link-inherit
,
.ui-btn-down-c
a
.ui-link-inherit
,
#home
.ui-btn-down-c
a
.ui-link-inherit
{
color
:
#fff
!important
;
}
img
{
max-width
:
100
%
;
height
:
auto
;
width
:
auto
;
-
webkit
-
box
-
sizing
:
border
-
box
;
-
moz
-
box
-
sizing
:
border
-
box
;
box
-
sizing
:
border
-
box
;
}
.ui-grid-a
.ui-block-a
,
.ui-grid-a
.ui-block-b
{
width
:
48
%
;
padding
:
1
%
;
}
第一行给应用背景添加纱化图片和box-shadow，这让整体设计有些深度。我们也改变了背景颜色。做过许多IOs应用，圆角有一点过度使用了（但这是 个人口味），因此本教程改变所有jQuery Mobile过重的0.6em圆角为更谨慎的0.2em半径的圆角。然后改变活动按钮的蓝色渐变为棕色。
最后部分是响应式图片技巧，使得他们很好的表现在各种浏览器上。
首页样式
应用首页应该有一个特别的风格。首页必须给用户的一个好印象才愿意停留。现在我们需要用一个精致的logo作为应用的标识。如下是效果图
让我们看一下css
/*** home **/
#branding
{
background
:
url(images/logo.png)
no-repeat
;
width
:
322px
;
height
:
165px
;
text-indent
:-
999px
;
font-size
:
0px
;
margin
:-
10px
auto
0
auto
;
border-bottom
:
1px
solid
rgba
(
65
,
38
,
37
,
0
.
6
);
}
.choice_list
h1
{
margin-top
:
30px
;
font-size
:
18px
;
color
:
rgb
(
65
,
38
,
37
);
font-weight
:
normal
;
font-style
:
italic
;
padding
:
5px
0
6px
50px
;
background
:
url(images/pagination.png)
no-repeat
;
}
#home
.choice_list
h1
{
background-position
:
0
-16px
;
}
#home
.choice_list
h3
{
padding-top
:
10px
;
color
:
rgb
(
63
,
41
,
39
);
}
#home
.choice_list
.ui-btn-active
a
.ui-link-inherit
h3
{
color
:
#fff
;
}
.choice_list
img
{
padding
:
3px
;
}
正如你所见，我们用众所周知的技巧使标识的文本元素消失同时用logo取代。我们也用漂亮的图片加入h1问句的样式，然后加一些空白到列表元素他们将以图片居中。
第二页样式
如下是第二页效果：
下面是我们的css代码。
/* title bar */
.ui-header.ui-bar-a
{
background
:
url(images/header_bg.png)
;
}
.ui-header
.ui-title
{
text-indent
:-
9999px
;
font-size
:
0px
;
background
:
url(images/header_logo.png)
no-repeat
69
%
5px
;
height
:
33px
;
padding
:
5px
0
5px
50px
;
margin
:
0px
;
}
.ui-header
.ui-btn-up-a
{
background
:
rgba
(
255
,
255
,
255
,
0
.
1
);
box
-
shadow
:
none
;
}
.ui-header
.ui-btn-hover-a
{
background
:
rgba
(
0
,
0
,
0
,
0
.
3
);
box
-
shadow
:
none
;
}
我们再次使用文本替换技巧使标题文字消失然后放上标识图片。标题栏背景也变为棕色渐变，同样返回按钮也是如此。我们再添加图片到问句的样式。这里最后的#choisir_ville .ui-listview-filter是阻止过滤器的清除按钮下落而重置top padding。
第三页样式：选择餐厅
这是页面效果
下面是css代码
/** choix du restaurant **/
#choisir_restau
.choice_list
h1
{
background-position
:
0
-132px
;
margin
:
10px
auto
20px
auto
;
}
#choisir_restau
.choice_list
a
{
padding-top
:
10px
;
color
:
rgb
(
63
,
41
,
39
);
}
#choisir_restau
.classement
{
display
:
inline
-
bloc
;
background
:
url(images/pagination.png)
no-repeat
0
-182px
;
height
:
22px
;
text-indent
:-
999px
;
font-size
:
0px
;
}
#choisir_restau
.one
{
width
:
30px
;
}
#choisir_restau
.two
{
width
:
55px
;
}
#choisir_restau
.three
{
width
:
75px
;
}
#choisir_restau
.four
{
width
:
99px
;
}
这里有趣的部分是星级显示的技巧。我们仅用一张包含四颗星的图片作为背景。奥义是改变这个元素的宽度，所以一，二还是三星的显示取决于类。我们也隐藏了文本。
最后一页样式：餐厅详细信息
最多的工作是在这个页面是
如下是css代码。
/** restau **/
#restau_infos
,
#contact_infos
{
color
:
rgb
(
63
,
41
,
39
);
font-size
:
14px
;
}
#restau_infos
h1
,
#contact_infos
h2
,
#notation
h2
{
color
:
rgb
(
63
,
41
,
39
);
font-size
:
18px
;
margin
:
0
auto
5px
auto
;
}
#restau_infos
p
,
#restau_infos
ul
,
#contact_infos
p
{
margin
:
2px
auto
5px
auto
;
}
#restau_infos
ul
{
padding
:
0
0
0
10px
;
}
#restau_infos
ul
li
{
list-style-type
:
square
;
margin-left
:
5px
;
}
#restau_infos
.ui-block-b
.ui-btn
{
font-size
:
12px
;
}
#restau_infos
.ui-block-b
.ui-btn-inner
{
padding
:
5px
;
}
#contact_buttons
a
{
color
:
rgb
(
63
,
41
,
39
);
}
.ui-icon-maps
{
background
:
rgb
(
63
,
41
,
39
)
url(images/maps.png)
no-repeat
;
}
.ui-icon-tel
{
background
:
rgb
(
63
,
41
,
39
)
url(images/phone.png)
no-repeat
;
}
/** add the stars to the drop down */
#note_utilisateur-menu
a
{
padding-left
:
100px
;
position
:
relative
;
}
#note_utilisateur-button
span
.ui-btn-text
{
background
:
url(images/pagination.png)
no-repeat
;
}
#note_utilisateur-button
span
.ui-btn-inner
{
padding-left
:
5px
;
}
#note_utilisateur-menu
li
a
:before
{
content
:
" "
;
display
:
inline
-
block
;
width
:
115px
;
height
:
20px
;
background
:
url(images/pagination.png)
no-repeat
;
position
:
absolute
;
left
:
0px
;
}
.one
#note_utilisateur-button
span
.ui-btn-text
,
#note_utilisateur-menu
li
a
:before
{
background-position
:
-75px
-182px
;
}
.two
#note_utilisateur-button
span
.ui-btn-text
,
#note_utilisateur-menu
li
+
li
a
:before
{
background-position
:
-52px
-182px
;
}
.three
#note_utilisateur-button
span
.ui-btn-text
,
#note_utilisateur-menu
li
+
li
+
li
a
:before
{
background-position
:
-27px
-182px
;
}
.four
#note_utilisateur-button
span
.ui-btn-text
,
#note_utilisateur-menu
li
+
li
+
li
+
li
a
:before
{
background-position
:
-2px
-182px
;
}
第一行只是基本的样式使屏幕画面更美观。值得注意的是.ui-icon-maps和.ui-icon-tel。记得我们给按钮添加一个特定的data-icon类，创建并使用这些类，我们可以方便的给按钮添加自定义图标，只需改变背景图案。
最 后部分的技巧是添加星形选择框。星型放在pagination.png图片里。但这里，我们不能使用上一页的宽度技巧。相反我们用一个固定宽度的伪类，靠 把背景位置左移来“隐藏”不要显示的星星。因为我们的选择项没有指定任何特别的类，不得不用+号选择器来定位每个li元素，从第一个到第四个。
最 后的关键是添加星级到列表选定项。不幸的是我们不能用纯css来完成，因此不得不在这里用一点JavaScript（实际是一些jQuery）代码。这段 脚本背后的主要想法是，当页面载入和选项改变时，获取选定项的类（记得我们在HTML代码里给他们赋了类），然后把这个类到应用到选择框，这样我们能动态 的改变星级。
如下是脚本代码
$
(
'#restau'
).
live
(
'pageinit'
,
function
(
event
){
var
SelectedOptionClass
=
$
(
'option:selected'
).
attr
(
'class'
);
$
(
'div.ui-select'
).
addClass
(
SelectedOptionClass
);
$
(
'#note_utilisateur'
).
live
(
'change'
,
function
(){
$
(
'div.ui-select'
).
removeClass
(
SelectedOptionClass
);
SelectedOptionClass
=
$
(
'option:selected'
).
attr
(
'class'
);
$
(
'div.ui-select'
).
addClass
(
SelectedOptionClass
);
});
$( ‘#restau’ ).live( ‘pageinit’,function(event){ 在jQuery Mobile相当于document.ready。我们分两种情况。一个是当页面载入，另一个是当触发选择改变，也就是当选择另一个评 级。脚本给#note_utilisateur-button添加星级的类，和上面css相同原理。
最后一个小技巧
最后我们可做的一件事，给这个web应用加一个触控手段，为iOS设备添加图标。在iOS设备上，用户能为应用创建一个快捷方式到“桌面”。如下代码添加到html头部
<link
rel=
"apple-touch-icon"
href=
"images/launch_icon_57.png"
/>
<link
rel=
"apple-touch-icon"
sizes=
"72x72"
href=
"images/launch_icon_72.png"
/>
<link
rel=
"apple-touch-icon"
sizes=
"114x114"
href=
"images/launch_icon_114.png"
/>
你必须为不同设备和分辨率各提供一个57，72和114px宽度的图片。
总结
今天我们看到如何创建一个漂亮的近似原生应用的HTML5 jQuery Mobile web应用。当然这只是前端部分;你还必须添加服务器端部分，来保存数据，生成每个城镇的页面等等。但这让你很好的了解jQuery Mobile是如何工作的，以及你可以用它做什么。
如果你想要看到更多jQuerey Mobile网站，可以看一下JqmGallery,一个用jQuery Mobile建立的web应用和网站的展示。
原文作者Stephanie Walter
我们已经完成了jQuery Mobile教程的应用构建部分，现在我们必须再用一点样式使应用更耀眼。
自定义CSS:样式化我们的jQuery Mobile应用
你可以在.zip文件中找到所有使用的样式文件。你允许以演示目的使用它们，但不能以商业目的使用。要样式化jQuery Mobile应用，有两个方案：删除jquery.mobile-1.0.1.css 文件然后重新写一个自己的，或者添加第三个css文件来替换某些jQuery Mobile样式。这里我们采取第二方案，因为jQuery Mobile基础设计大多符合本应用的要求。你也能使用jQuery Mobile Theme roller创建自定义主题而不必写太多的css。
一些全局样式
这部分css改变了某些jQuery Mobile全局样式。
/*** general styling */
.ui-page.ui-body-c
{
background
:
url(images/bg.png)
;
box
-
shadow
:
0px
0px
30px
5px
rgba
(
107
,
105
,
105
,
0
.
3
)
inset
,
0px
0px
0px
1px
rgba
(
107
,
105
,
105
,
0
.
4
)
inset
;
}
.ui-icon.ui-icon-arrow-r
{
background-color
:
rgb
(
136
,
111
,
110
);
}
.ui-corner-all
,
.ui-corner-top
,
.ui-corner-bottom
,
.ui-corner-tl
,
.ui-corner-tr
,
.ui-corner-bl
,
.ui-header
.ui-btn-corner-all
,
.ui-listview-filter
.ui-btn-corner-all
,
#restau_infos
.ui-btn-corner-all
,
#contact_buttons
.ui-btn-corner-all
,
#notation
.ui-btn-corner-all
{
border
-
radius
:
0.2em
;
}
.ui-btn-active
{
background
:
#654644
;
/* Old browsers */
background
:
-
moz
-
linear
-
gradient
(
top
,
#654644
0
%,
#331c1b
100
%
);
/* FF3.6+ */
background
:
-
webkit
-
gradient
(
linear
,
left
top
,
left
bottom
,
color
-
stop
(
0
%,
#654644
)
,
color
-
stop
(
100
%,
#331c1b
));
/* Chrome,Safari4+ */
background
:
-
webkit
-
linear
-
gradient
(
top
,
#654644
0
%,
#331c1b
100
%
);
/* Chrome10+,Safari5.1+ */
background
:
-
o
-
linear
-
gradient
(
top
,
#654644
0
%,
#331c1b
100
%
);
/* Opera 11.10+ */
background
:
-
ms
-
linear
-
gradient
(
top
,
#654644
0
%,
#331c1b
100
%
);
/* IE10+ */
background
:
linear
-
gradient
(
top
,
#654644
0
%,
#331c1b
100
%
);
/* W3C */
color
:
#fff
!important
;
}
.ui-content
.choice_list
.ui-btn-active
.ui-link-inherit
,
.ui-btn-down-c
a
.ui-link-inherit
,
#home
.ui-btn-down-c
a
.ui-link-inherit
{
color
:
#fff
!important
;
}
img
{
max-width
:
100
%
;
height
:
auto
;
width
:
auto
;
-
webkit
-
box
-
sizing
:
border
-
box
;
-
moz
-
box
-
sizing
:
border
-
box
;
box
-
sizing
:
border
-
box
;
}
.ui-grid-a
.ui-block-a
,
.ui-grid-a
.ui-block-b
{
width
:
48
%
;
padding
:
1
%
;
}
第一行给应用背景添加纱化图片和box-shadow，这让整体设计有些深度。我们也改变了背景颜色。做过许多IOs应用，圆角有一点过度使用了（但这是 个人口味），因此本教程改变所有jQuery Mobile过重的0.6em圆角为更谨慎的0.2em半径的圆角。然后改变活动按钮的蓝色渐变为棕色。
最后部分是响应式图片技巧，使得他们很好的表现在各种浏览器上。
首页样式
应用首页应该有一个特别的风格。首页必须给用户的一个好印象才愿意停留。现在我们需要用一个精致的logo作为应用的标识。如下是效果图
让我们看一下css
/*** home **/
#branding
{
background
:
url(images/logo.png)
no-repeat
;
width
:
322px
;
height
:
165px
;
text-indent
:-
999px
;
font-size
:
0px
;
margin
:-
10px
auto
0
auto
;
border-bottom
:
1px
solid
rgba
(
65
,
38
,
37
,
0
.
6
);
}
.choice_list
h1
{
margin-top
:
30px
;
font-size
:
18px
;
color
:
rgb
(
65
,
38
,
37
);
font-weight
:
normal
;
font-style
:
italic
;
padding
:
5px
0
6px
50px
;
background
:
url(images/pagination.png)
no-repeat
;
}
#home
.choice_list
h1
{
background-position
:
0
-16px
;
}
#home
.choice_list
h3
{
padding-top
:
10px
;
color
:
rgb
(
63
,
41
,
39
);
}
#home
.choice_list
.ui-btn-active
a
.ui-link-inherit
h3
{
color
:
#fff
;
}
.choice_list
img
{
padding
:
3px
;
}
正如你所见，我们用众所周知的技巧使标识的文本元素消失同时用logo取代。我们也用漂亮的图片加入h1问句的样式，然后加一些空白到列表元素他们将以图片居中。
第二页样式
如下是第二页效果：
下面是我们的css代码。
/* title bar */
.ui-header.ui-bar-a
{
background
:
url(images/header_bg.png)
;
}
.ui-header
.ui-title
{
text-indent
:-
9999px
;
font-size
:
0px
;
background
:
url(images/header_logo.png)
no-repeat
69
%
5px
;
height
:
33px
;
padding
:
5px
0
5px
50px
;
margin
:
0px
;
}
.ui-header
.ui-btn-up-a
{
background
:
rgba
(
255
,
255
,
255
,
0
.
1
);
box
-
shadow
:
none
;
}
.ui-header
.ui-btn-hover-a
{
background
:
rgba
(
0
,
0
,
0
,
0
.
3
);
box
-
shadow
:
none
;
}
我们再次使用文本替换技巧使标题文字消失然后放上标识图片。标题栏背景也变为棕色渐变，同样返回按钮也是如此。我们再添加图片到问句的样式。这里最后的#choisir_ville .ui-listview-filter是阻止过滤器的清除按钮下落而重置top padding。
第三页样式：选择餐厅
这是页面效果
下面是css代码
/** choix du restaurant **/
#choisir_restau
.choice_list
h1
{
background-position
:
0
-132px
;
margin
:
10px
auto
20px
auto
;
}
#choisir_restau
.choice_list
a
{
padding-top
:
10px
;
color
:
rgb
(
63
,
41
,
39
);
}
#choisir_restau
.classement
{
display
:
inline
-
bloc
;
background
:
url(images/pagination.png)
no-repeat
0
-182px
;
height
:
22px
;
text-indent
:-
999px
;
font-size
:
0px
;
}
#choisir_restau
.one
{
width
:
30px
;
}
#choisir_restau
.two
{
width
:
55px
;
}
#choisir_restau
.three
{
width
:
75px
;
}
#choisir_restau
.four
{
width
:
99px
;
}
这里有趣的部分是星级显示的技巧。我们仅用一张包含四颗星的图片作为背景。奥义是改变这个元素的宽度，所以一，二还是三星的显示取决于类。我们也隐藏了文本。
最后一页样式：餐厅详细信息
最多的工作是在这个页面是
如下是css代码。
/** restau **/
#restau_infos
,
#contact_infos
{
color
:
rgb
(
63
,
41
,
39
);
font-size
:
14px
;
}
#restau_infos
h1
,
#contact_infos
h2
,
#notation
h2
{
color
:
rgb
(
63
,
41
,
39
);
font-size
:
18px
;
margin
:
0
auto
5px
auto
;
}
#restau_infos
p
,
#restau_infos
ul
,
#contact_infos
p
{
margin
:
2px
auto
5px
auto
;
}
#restau_infos
ul
{
padding
:
0
0
0
10px
;
}
#restau_infos
ul
li
{
list-style-type
:
square
;
margin-left
:
5px
;
}
#restau_infos
.ui-block-b
.ui-btn
{
font-size
:
12px
;
}
#restau_infos
.ui-block-b
.ui-btn-inner
{
padding
:
5px
;
}
#contact_buttons
a
{
color
:
rgb
(
63
,
41
,
39
);
}
.ui-icon-maps
{
background
:
rgb
(
63
,
41
,
39
)
url(images/maps.png)
no-repeat
;
}
.ui-icon-tel
{
background
:
rgb
(
63
,
41
,
39
)
url(images/phone.png)
no-repeat
;
}
/** add the stars to the drop down */
#note_utilisateur-menu
a
{
padding-left
:
100px
;
position
:
relative
;
}
#note_utilisateur-button
span
.ui-btn-text
{
background
:
url(images/pagination.png)
no-repeat
;
}
#note_utilisateur-button
span
.ui-btn-inner
{
padding-left
:
5px
;
}
#note_utilisateur-menu
li
a
:before
{
content
:
" "
;
display
:
inline
-
block
;
width
:
115px
;
height
:
20px
;
background
:
url(images/pagination.png)
no-repeat
;
position
:
absolute
;
left
:
0px
;
}
.one
#note_utilisateur-button
span
.ui-btn-text
,
#note_utilisateur-menu
li
a
:before
{
background-position
:
-75px
-182px
;
}
.two
#note_utilisateur-button
span
.ui-btn-text
,
#note_utilisateur-menu
li
+
li
a
:before
{
background-position
:
-52px
-182px
;
}
.three
#note_utilisateur-button
span
.ui-btn-text
,
#note_utilisateur-menu
li
+
li
+
li
a
:before
{
background-position
:
-27px
-182px
;
}
.four
#note_utilisateur-button
span
.ui-btn-text
,
#note_utilisateur-menu
li
+
li
+
li
+
li
a
:before
{
background-position
:
-2px
-182px
;
}
第一行只是基本的样式使屏幕画面更美观。值得注意的是.ui-icon-maps和.ui-icon-tel。记得我们给按钮添加一个特定的data-icon类，创建并使用这些类，我们可以方便的给按钮添加自定义图标，只需改变背景图案。
最 后部分的技巧是添加星形选择框。星型放在pagination.png图片里。但这里，我们不能使用上一页的宽度技巧。相反我们用一个固定宽度的伪类，靠 把背景位置左移来“隐藏”不要显示的星星。因为我们的选择项没有指定任何特别的类，不得不用+号选择器来定位每个li元素，从第一个到第四个。
最 后的关键是添加星级到列表选定项。不幸的是我们不能用纯css来完成，因此不得不在这里用一点JavaScript（实际是一些jQuery）代码。这段 脚本背后的主要想法是，当页面载入和选项改变时，获取选定项的类（记得我们在HTML代码里给他们赋了类），然后把这个类到应用到选择框，这样我们能动态 的改变星级。
如下是脚本代码
$
(
'#restau'
).
live
(
'pageinit'
,
function
(
event
){
var
SelectedOptionClass
=
$
(
'option:selected'
).
attr
(
'class'
);
$
(
'div.ui-select'
).
addClass
(
SelectedOptionClass
);
$
(
'#note_utilisateur'
).
live
(
'change'
,
function
(){
$
(
'div.ui-select'
).
removeClass
(
SelectedOptionClass
);
SelectedOptionClass
=
$
(
'option:selected'
).
attr
(
'class'
);
$
(
'div.ui-select'
).
addClass
(
SelectedOptionClass
);
});
$( ‘#restau’ ).live( ‘pageinit’,function(event){ 在jQuery Mobile相当于document.ready。我们分两种情况。一个是当页面载入，另一个是当触发选择改变，也就是当选择另一个评 级。脚本给#note_utilisateur-button添加星级的类，和上面css相同原理。
最后一个小技巧
最后我们可做的一件事，给这个web应用加一个触控手段，为iOS设备添加图标。在iOS设备上，用户能为应用创建一个快捷方式到“桌面”。如下代码添加到html头部
<link
rel=
"apple-touch-icon"
href=
"images/launch_icon_57.png"
/>
<link
rel=
"apple-touch-icon"
sizes=
"72x72"
href=
"images/launch_icon_72.png"
/>
<link
rel=
"apple-touch-icon"
sizes=
"114x114"
href=
"images/launch_icon_114.png"
/>
你必须为不同设备和分辨率各提供一个57，72和114px宽度的图片。
总结
今天我们看到如何创建一个漂亮的近似原生应用的HTML5 jQuery Mobile web应用。当然这只是前端部分;你还必须添加服务器端部分，来保存数据，生成每个城镇的页面等等。但这让你很好的了解jQuery Mobile是如何工作的，以及你可以用它做什么。
如果你想要看到更多jQuerey Mobile网站，可以看一下JqmGallery,一个用jQuery Mobile建立的web应用和网站的展示。