实现主页面和分类页面的之后，最后来看一下菜肴页面的实现，这个页面用于详细介绍某项菜肴或主食，如名称、图片和具体做法等。在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. 大数据算法：kNN算法

    \一.kNN算法概述 kNN是k-Nearest Neighbour的缩写,这是一种非常简单且易于理解的分类算法.回想我们从小到大在认知事物的过程当中,我们是如何判断一种事物是属于哪种类别的?通常的一 ...

  2. display: none; 与 jq show方法之间的联系

    1. 定义四种常用隐藏元素的方式,然后调用  jq 的 show 方法显示,观察各原先隐藏元素的   display   表现,结合 jq 源码,show 方法设置 元素 display  属性值为 ...

  3. Integer与int区别

    Integer与int的区别:估计大多数人只会说道两点,一开始我也不太清楚,Ingeter是int的包装类,int的初值为0,Ingeter的初值为null.但是如果面试官再问一下Integer i ...

  4. alfred

    1.alfred怎么设置默认的搜索项. https://www.zhihu.com/question/20205127 2.

  5. Python全栈开发-Day9-线程/GIL/事件/队列

    本节内容 进程与线程的概念 Python threading 模块 GIL——global interpreter lock Mutex互斥锁(线程锁) Semaphore信号量 Events事件 Q ...

  6. 20165327 2017-2018-2 《Java程序设计》第2周学习总结

    20165327 2017-2018-2 <Java程序设计>第2周学习总结 内容:教材第2.3章 内容小结: (一)标识符由字母.下划线.美元符号和数字组成, 并且第一个字符不能是数字字 ...

  7. linux重启后进入了救援模式，无法远程登录

    卸载删除了某个文件系统分区的逻辑卷,但是没有修改fstab文件,导致系统重启异常,此时已经无法远程连接了,只能本地登录到救援模式修改

  8. c++-pimer-plus-6th-chapter04

    Chapter Review 1 a. char actors[30]; b. short betsie[100]; c. float chunk[13]; d. long double dipsea ...

  9. LeetCode--374--猜数字大小

    问题描述: 我们正在玩一个猜数字游戏. 游戏规则如下: 我从 1 到 n 选择一个数字. 你需要猜我选择了哪个数字. 每次你猜错了,我会告诉你这个数字是大了还是小了. 你调用一个预先定义好的接口 gu ...

  10. js将字符串转json

    Json格式字符串 "{"rows":[{"date":"2018-11-19","money":" ...