[翻译]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全局样式。

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

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

首页样式

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

让我们看一下css

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

第二页样式

如下是第二页效果：

下面是我们的css代码。

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

第三页样式：选择餐厅

这是页面效果

下面是css代码

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

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

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

如下是css代码。

第一行只是基本的样式使屏幕画面更美观。值得注意的是.ui-icon-maps和.ui-icon-tel。记得我们给按钮添加一个特定的data-icon类，创建并使用这些类，我们可以方便的给按钮添加自定义图标，只需改变背景图案。

最 后部分的技巧是添加星形选择框。星型放在pagination.png图片里。但这里，我们不能使用上一页的宽度技巧。相反我们用一个固定宽度的伪类，靠 把背景位置左移来“隐藏”不要显示的星星。因为我们的选择项没有指定任何特别的类，不得不用+号选择器来定位每个li元素，从第一个到第四个。

最 后的关键是添加星级到列表选定项。不幸的是我们不能用纯css来完成，因此不得不在这里用一点JavaScript（实际是一些jQuery）代码。这段 脚本背后的主要想法是，当页面载入和选项改变时，获取选定项的类（记得我们在HTML代码里给他们赋了类），然后把这个类到应用到选择框，这样我们能动态 的改变星级。

如下是脚本代码

$( ‘#restau’ ).live( ‘pageinit’,function(event){ 在jQuery Mobile相当于document.ready。我们分两种情况。一个是当页面载入，另一个是当触发选择改变，也就是当选择另一个评 级。脚本给#note_utilisateur-button添加星级的类，和上面css相同原理。

最后一个小技巧

最后我们可做的一件事，给这个web应用加一个触控手段，为iOS设备添加图标。在iOS设备上，用户能为应用创建一个快捷方式到“桌面”。如下代码添加到html头部

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

总结

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

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