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

    环境:Win10 + GO1.9.2 1.区别 ①go build:编译go源码生成一个可执行文件:使用-o参数可以指定生成的可执行文件名称,如go build -o test.exe ②go ins ...

  2. mui 访问系统相册将图片显示到网页

    访问系统相返回值为一个对象,通过转换为字符串可以查看,path.files[0]为返回路径去除路径赋值到src 调用摄像头返回的相片的path为一个路径通过 plus.io.resolveLocalF ...

  3. sublime Text如何取消两栏窗口?

    在菜单栏里的 View->LayOut->Single,也可以用快捷键 Alt+Shift+1.如图所示.(亲测可用) &amp;lt;img src="https:// ...

  4. SpringBoot集成TkMybatis插件

    前提: 基于SpringBoot项目,正常集成Mybatis后,为了简化sql语句的编写,甚至达到无mapper.xml文件. 在本篇总结教程,不在进行SpringBoot集成Mybatis的概述. ...

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

    20165327 2017-2018-2 <Java程序设计>第8周学习总结 教材内容总结 第十二章 (一)教材学习内容总结 线程是比进程更小的执行单位.一个进程在其执行过程中,可以产生多 ...

  6. 2017-2018-2 20165303 实验二《Java面向对象程序设计》实验报告

    实验一 实验要求 参考 http://www.cnblogs.com/rocedu/p/6371315.html#SECUNITTEST 完成单元测试的学习 提交最后三个JUnit测试用例(正常情况, ...

  7. 小程序模板中data传值有无...

    A:<template is="gemSelectColor" data="{{optionData}}" />B:<template is= ...

  8. Xpath做数据解析

    xpath是一个路径表达式, xpath学习 (1)xpath节点 在XPath中,有七种类型的节点:元素,属性,文本,命名空间,处理指令,注释以及文档节点:XML文档是被作为节点树来对待的.树的根被 ...

  9. cmd下可以启动java，输入javac提示 不“存在”

    方法:手动把JDK安装目录的bin目录配置到PATH环境变量里

  10. Android BottomNavigationBar底部导航控制器的使用（包含默认postion的设置）

    转载请标明出处:http://blog.csdn.net/u010046908/article/details/50962081本文出自:[李东的博客] 最近Google在自己推出的Material ...