实现主页面和分类页面的之后，最后来看一下菜肴页面的实现，这个页面用于详细介绍某项菜肴或主食，如名称、图片和具体做法等。在pages文件夹里面添加一个名为foodDetail的文件夹，并在foodDetail文件夹里添加一个"页面控制"项，将其命名为foodDetail。

打开默认生成的foodDetail.html文件，向文件的body元素中添加一个div元素，在div元素内部添加一个button元素和一个h1元素，其中button元素是回退按钮，h1元素用于显示类别名称，接着再在此div元素中嵌套添加一个div元素，并在刚添加的div元素内部添加一个h2元素、一个img控件和一个class属性值为"item-content"的div元素，其中h2元素用于显示菜肴名称，img控件用于显示菜肴图片，而div元素用于显示菜肴的做法，相关代码如下所示：

<body>

<div class="foodDetail fragment">

<header aria-label="Header content" role="banner">

<!--定义回退按钮-->

<button class="win-backbutton" aria-label="Back" ></button>

<!--显示类别名称-->

<h1 class="titlearea win-type-ellipsis">

<span class="pagetitle"></span>

</h1>

</header>

<div class="content" aria-label="Main content" role="main">

<article>

<header>

<!--显示菜肴名称-->

<h2 class="item-title"></h2>

</header>

<!--显示图片-->

<img class="item-image" src="#" />

<!--显示菜肴的具体做法-->

<div class="item-content"></div>

</article>

</div>

</div>

</body>

为了控制菜肴页面的显示外观，在foodDetail.css文件中设置相应的外观属性，相关代码如下所示：

/*设置菜肴的整体布局，包括位置和大小等*/

.foodDetail .content {

-ms-grid-row: 2;

position: relative;

height: 100%;

width: 100%;

display: block;

overflow-x: auto;

z-index: 0;

}

/*进一步设置菜肴的列宽、所占据的空间和边距等*/

.foodDetail .content article {

column-fill: auto;

column-gap: 80px;

column-width: 480px;

height: calc(100% - 50px);

width: 480px;

margin-left: 120px;

margin-top: 5px;

}

/*进一步设置菜肴名称的边距*/

.foodDetail .content article header .item-title {

margin-bottom: 20px;

margin-top: 0;

}

/*进一步设置菜肴图片的大小和边距*/

.foodDetail .content article .item-image {

height: 240px;

width: 460px;

margin-bottom: 3px;

}

/*设置菜肴做法的边距和对齐方式*/

.foodDetail .content article .item-content {

margin-bottom: 20px;

margin-right: 20px;

vertical-align: baseline;

}

定义了前台页面样式之后，打开foodDetail.js文件，在ready函数内添加如下代码，为界面元素设置数据源。

ready: function (element, options) {

//根据传递的参数来获取某项菜肴。如果没有传递参数，则获取第一项菜肴

var item = options && options.item ? menuData.resolveItemReference(options.item) : menuData.items.getAt(0);

//设置菜肴的类别名称

element.querySelector(".pagetitle").textContent = item.group.title;

//设置菜肴的名称

element.querySelector(".item-title").textContent = item.title;

//设置菜肴的图片

element.querySelector(".item-image").src = item.backgroundImage;

//设置菜肴的描述信息（即菜肴的具体作法）

element.querySelector(".item-content").innerHTML = item.content;

}

上面代码中，在ready函数里对options 和options.item进行判断，当参数options和options.item都不为空时，调用menuData命名空间里的resolveItemReference函数来根据某项菜肴的标识获取该项菜肴并赋值给变量item；否则获取第一项菜肴同样赋值给变量item。接下来调用element.querySelector函数来获取class属性为"pagetitle"的h1元素和class属性值为"item-title"的h2元素，并分别设置这两个元素的textContent属性值为item.group.title和item.title，用于显示菜肴类别名称和菜肴名称。然后使用element.querySelector函数来获取class属性为"item-image"的img控件，设置其src属性值为"item.backgroundImage"用于显示菜肴的图片。最后调用element.querySelector函数来获取class属性为"item-content"的div元素，设置其innerHTML属性值为item.content用于显示菜肴的做法信息。

启动调试，当点击某项菜肴时，如点击"红烧肉"这项菜肴，就会跳转到红烧肉详细页面，得到的效果如图19-36所示：

图19-36详细介绍红烧肉的页面

Win10系列：JavaScript综合实例4的更多相关文章

  1. Win10系列：JavaScript综合实例2

    在项目中添加一个名为pages的文件夹,并在pages文件夹里面再添加一个名为mainPage的文件夹,接着在mainPage文件夹里添加一个"页面控制"项,命名为mainPage ...

  2. Win10系列：JavaScript综合实例1

    上面几个小节讲解了使用HTML5和JavaScript语言开发Windows 应用商店应用时会用到的一些技术,本小节将前面介绍的知识融合在一起创建一个菜谱应用程序,帮助读者更进一步地理解和掌握这些知识 ...

  3. Win10系列：JavaScript综合实例3

    实现主页面的功能之后,接下来实现分类页面.分类页面中显示一种菜肴类别的详细信息,包括类别名称.图片.描述信息以及属于该类别的一些菜肴.在pages文件夹中添加一个名为classDetail的文件夹,并 ...

  4. 一步一步学Silverlight 2系列（18）：综合实例之RSS阅读器

    一步一步学Silverlight 2系列(18):综合实例之RSS阅读器   概述 Silverlight 2 Beta 1版本发布了,无论从Runtime还是Tools都给我们带来了很多的惊喜,如支 ...

  5. html5--5-16 综合实例绘制饼图

    html5--5-16 综合实例绘制饼图 实例 <!doctype html> <html> <head> <meta charset="utf-8 ...

  6. Qt Quick综合实例之文件查看器

    假设你基于Qt SDK 5.3.1来创建一个Qt Quick App项目,项目模板为你准备的main.qml文档的根元素是ApplicationWindow或Window.这次我们就以Applicat ...

  7. ReportingServies——SQLServer报表开发综合实例

    如果我们安装了sqlserver2008 R2,将会自动安装一个报表开发工具 不要以为此报表开发工具只适合于sqlserver2008,其实在sqlserver2012中也是支持的,事实上我现在项目中 ...

  8. Loadrunner 关联 web_custom_request综合实例

    Loadrunner 关联 web_custom_request综合实例 Loadrunner 关联web_custom_request,针对自带的订票系统的一个综合实例,相信看了本文大家对学习loa ...

  9. 使用VS2012 开发SharePoint 2013 声明式的action(activity) 综合实例

    本文讲述使用VS2012 开发SharePoint 2013 声明式的action 综合实例. 需求同: http://blog.csdn.net/abrahamcheng/article/detai ...

随机推荐

  1. php CLI SAPI 内置Web Server

    PHP 5.4.0起, CLI SAPI 提供了一个内置的Web服务器. 这个内置的Web服务器主要用于本地开发使用,不可用于线上产品环境. URI请求会被发送到PHP所在的的工作目录(Working ...

  2. Django表单API详解

    声明:以下的Form.表单等术语都指的的广义的Django表单. Form要么是绑定了数据的,要么是未绑定数据的. 如果是绑定的,那么它能够验证数据,并渲染表单及其数据,然后生成HTML表单.如果未绑 ...

  3. 《剑指offer》第六十八题（树中两个结点的最低公共祖先）

    // 面试题68:树中两个结点的最低公共祖先 // 题目:输入两个树结点,求它们的最低公共祖先. #include <iostream> #include "Tree.h&quo ...

  4. CC2 条理分明-----独立思考

    独立思考 前几天啊,在吃饭的时候,听到同事们在讨论某幼儿园事件,因为没有人愿意出来作证,所以很可能是造谣.前几天他们还咬牙切齿的指责这个幼儿园,现在怎么就变了.我发现人们的思维变化的太快,我自己也是的 ...

  5. word空白页怎么删除

    最简单的,直接按键盘上的BackSpace或者Delete键,来进行删除.  分页符过到.打开“编辑”-->替换-->高级-->特殊字符-->手工分页符-->“全部替换” ...

  6. 【转】 多线程之linux线程调度策略

    转自:http://blog.csdn.net/byperseverance/article/details/44522731 Linux线程的调度策略分为3个:SCHED_OTHER,SCHED_F ...

  7. caffe在solverstate的基础上继续训练模型

    以mnist数据集为例: bat训练脚本: Build\x64\Release\caffe.exe train --solver=examples/mnist/lenet_solver.prototx ...

  8. every day a practice —— morning（2）

    Two years at sea have fostered a close relationship between the two fellow sailors as they cross the ...

  9. Python自学:第二章 删除空白

    lstrip:剔除开头空白 strip:剔除两段空白 rstrip:剔除末尾空白 favorite: 最喜欢的 >>>favorite_language = "Python ...

  10. uva11552

    将字符串分为len/k块.用dp[i][j]表示第i个块必须以j结尾的最小划分.当第i块没有字符j时,dp[i][j]多计一个.如果当前块只有1种字符,那么就等于dp[i-1][j].否则对于第i块的 ...