zoukankan html css js c++ java

[转载][翻译]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%;

}
view raw custom.css This Gist brought to you by GitHub.

第一行给应用背景添加纱化图片和box-shadow，这让整体设计有些深度。我们也改变了背景颜色。做过许多IOs应用，圆角有一点过度使用了（但这是个人口味），因此本教程改变所有jQuery Mobile过重的0.6em圆角为更谨慎的0.2em半径的圆角。然后改变活动按钮的蓝色渐变为棕色。

最后部分是响应式图片技巧，使得他们很好的表现在各种浏览器上。

首页样式

应用首页应该有一个特别的风格。首页必须给用户的一个好印象才愿意停留。现在我们需要用一个精致的logo作为应用的标识。如下是效果图

First page styled

让我们看一下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;
}
view raw custom.css This Gist brought to you by GitHub. 

正如你所见，我们用众所周知的技巧使标识的文本元素消失同时用logo取代。我们也用漂亮的图片加入h1问句的样式，然后加一些空白到列表元素他们将以图片居中。

第二页样式

如下是第二页效果：

Second page styled

下面是我们的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;
}
view raw custom.css This Gist brought to you by GitHub. 

我们再次使用文本替换技巧使标题文字消失然后放上标识图片。标题栏背景也变为棕色渐变，同样返回按钮也是如此。我们再添加图片到问句的样式。这里最后的#choisir_ville .ui-listview-filter是阻止过滤器的清除按钮下落而重置top padding。

第三页样式：选择餐厅

这是页面效果

Third page styled

下面是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;

}
view raw custom.css This Gist brought to you by GitHub.

这里有趣的部分是星级显示的技巧。我们仅用一张包含四颗星的图片作为背景。奥义是改变这个元素的宽度，所以一，二还是三星的显示取决于类。我们也隐藏了文本。

最后一页样式：餐厅详细信息

最多的工作是在这个页面是

Last page styled

如下是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;

}
view raw custom.css This Gist brought to you by GitHub.

第一行只是基本的样式使屏幕画面更美观。值得注意的是.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);
});
view raw addstarscript.js This Gist brought to you by GitHub. 

$( ‘#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" />
view raw index.html This Gist brought to you by GitHub. 

你必须为不同设备和分辨率各提供一个57，72和114px宽度的图片。

总结

今天我们看到如何创建一个漂亮的近似原生应用的HTML5 jQuery Mobile web应用。当然这只是前端部分;你还必须添加服务器端部分，来保存数据，生成每个城镇的页面等等。但这让你很好的了解jQuery Mobile是如何工作的，以及你可以用它做什么。

如果你想要看到更多jQuerey Mobile网站，可以看一下JqmGallery,一个用jQuery Mobile建立的web应用和网站的展示。