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

    main方法是程序的入口点,程序从这里开始,也是从这里结束. 执行过程:程序在执行编译的过程中先找main方法,然后执行main‘{’下的第一行代码,以此执行,如果遇到main方法中有调用其他的方法时 ...

  2. tensorflow学习笔记一------下载安装，配置环境(基于ubuntu16.04 pycharm)

    一,安装TensorFlow 安装所有必备工具 sudo apt-get install python-pip python-dev python-virtualenv 安装TensorFlow su ...

  3. 学习笔记1—python基础

    1.安装pip: python -m pip install -U pip (打开命令行窗口:Anaconda Prompt) 升级:python -m pip install --upgrade p ...

  4. JavaScript学习第一天（一）

    JavaScript介绍 JavaScript一种直译式脚本语言,是一种动态类型.弱类型.基于原型的语言,内置支持类型.它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本 ...

  5. java读取ACCESS数据库的简单示例

    java读取ACCESS数据库的简单示例 虽然简单,对初学者来说,如果没有一段可以成功执行的代码供参考,还真难调试 先用ACCESS建一个数据库 DB1.MDB,里面有一表"table1&q ...

  6. 用where导致group by分组字段的索引失效

    把两个单独的索引合并成一个组合索引,即把where条件字段的索引和group by的分组字段索引组合成一个. 如果分组的字段需要用函数处理,可以用索引函数 Generated Column(函数索引) ...

  7. Django ModelForm 组件的应用

    ModelForm组件的应用 ModelForm 组件的创建: 1.创建一个类,该类继承 forms.ModelForm  2.大致组成部分 class ModelNameModelForm(form ...

  8. php算法，冒泡排序

    冒泡排序 /*** *从小到大排列 * 逻辑分析 假设数组 $arr=[a,b,c,d]; * 总数=4; * 比较对象 第几个元素 比较次数 * a 1 3 * b 2 2 * c 3 1 **/ ...

  9. Docker 只要一小时，零基础入门Docker（转）

    转自:https://zhuanlan.zhihu.com/p/23599229 推荐:https://hijiangtao.github.io/2018/04/17/Docker-in-Action ...

  10. Pandas读取文件

    如何使用pandas的read_csv模块以及其他读取文件的模块?? 一起来看一看 Pandas中read_csv和read_table的区别 注:使用pandas读取文件格式为pandas特有的da ...