[翻译]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作为应用的标识。如下是效果图

First page styled

让我们看一下css

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

第二页样式

如下是第二页效果:

Second page styled

下面是我们的css代码。

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

第三页样式:选择餐厅

这是页面效果

Third page styled

下面是css代码

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

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


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


Last page styled

如下是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应用和网站的展示。

posted @ 2012-04-13 19:30 杰克知足 阅读(...) 评论(...) 编辑 收藏