Win10系列：JavaScript综合实例3
实现主页面的功能之后，接下来实现分类页面。分类页面中显示一种菜肴类别的详细信息，包括类别名称、图片、描述信息以及属于该类别的一些菜肴。在pages文件夹中添加一个名为classDetail的文件夹，并在classDetail文件夹中添加一个"页面控制"项，将其命名为classDetail，与主页面一样，添加完成之后会默认生成classDetail.html、classDetail.js和classDetail.css这三个文件。
打开classDetail.html文件，在body元素中添加一个div元素，并在div元素内部添加一个button元素、一个h1元素和一个ListView控件，其中button元素是回退按钮，h1元素用于显示菜肴的类别，而ListView控件则用于显示某一类别的菜肴信息。接着再在body元素中添加两个Template控件，分别用来格式化显示类别信息和某一类别中的菜肴。在用于显示类别信息的Template控件中添加一个img控件和一个h4元素，分别用来显示菜肴类别图片和菜肴类别的描述信息；在用于显示某一类菜肴的Template控件中添加一个img控件和两个h4元素，分别用来显示菜肴的图片和描述信息，相关代码如下所示：
<div class="classDetail 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>
<section role="main">
<!--定义ListView控件，用于显示显示类别信息和菜肴-->
<div class="itemslist" data-win-control="WinJS.UI.ListView" data-win-options="{ selectionMode: 'none' }"></div>
</section>
</div>
<!--用于显示类别信息的模板-->
<div class="headerTemplate" data-win-control="WinJS.Binding.Template">
<!--将src属性与数据源中的backgroundImage字段相绑定，将alt属性与数据源中类别名称title 字段绑定-->
<img class="group-image" src="#" data-win-bind="src: backgroundImage; alt: title" />
<!--有关类别的描述信息-->
<h4 class="group-description" data-win-bind="textContent: description"></h4>
</div>
<!--用于显示菜肴的模板-->
<div class="itemTemplate" data-win-control="WinJS.Binding.Template">
<!--将src属性与数据源中的backgroundImage字段相绑定，将alt属性与数据源中菜肴名称title 字段绑定-->
<img class="item-image" src="#" data-win-bind="src: backgroundImage; alt: title" />
<div class="item-info">
<!--菜肴的名称-->
<h4 class="item-title" data-win-bind="textContent: title"></h4>
<!--菜肴的描述信息-->
<h4 class="item-description" data-win-bind="textContent: description"></h4>
</div>
</div>
</body>
为了控制类别信息和菜肴的显示外观，在classDetail.css文件中设置相应的外观属性，相关代码如下所示：
/*设置ListView控件的水平显示位置*/
.classDetail .itemslist .win-horizontal.win-viewport .win-surface {
margin-left: 120px;
margin-bottom: 20px;
}
/*设置ListView控件的大小等*/
.classDetail .itemslist {
position: relative;
height: 100%;
width: 100%;
z-index: 0;
}
/* 设置类别信息的布局、所占据的空间和边距等*/
.classDetail .itemslist .win-groupheader {
-ms-grid-columns: 1fr;
-ms-grid-rows: auto auto 1fr;
display: -ms-grid;
height: 100%;
width: 480px;
margin-left: 0px;
margin-right: 68px;
padding: 0;
}
/* 进一步设置图片的位置、大小和边距*/
.classDetail .itemslist .win-groupheader .group-image {
-ms-grid-row: 2;
height: 238px;
width: 480px;
margin: 0;
margin-bottom: 20px;
}
/* 进一步设置描述信息的位置和边距等*/
.classDetail .itemslist .win-groupheader .group-description {
-ms-grid-row: 3;
margin-bottom: 55px;
overflow: hidden;
}
/* 设置菜肴的布局，以及所占据的空间*/
.classDetail .itemslist .win-item {
-ms-grid-columns: 110px 1fr;
-ms-grid-rows: 1fr;
display: -ms-grid;
height: 110px;
width: 472px;
}
.classDetail .itemslist .win-item .item-info {
-ms-grid-column: 2;
margin-left: 10px;
}
/* 进一步设置菜肴名称的边距，以及所占据的空间等*/
.classDetail .itemslist .win-item .item-info .item-title {
margin-top: 4px;
max-height: 20px;
overflow: hidden;
}
/* 进一步设置描述信息所占据的空间*/
.classDetail .itemslist .win-item .item-info .item-description {
max-height: 60px;
overflow: hidden;
}
/* 设置列表项的背景色和边距等*/
.classDetail .itemslist .win-container {
/*背景设置成透明色*/
background-color: rgba(0, 0, 0, 0);
margin-bottom: 15px;
margin-right: 60px;
padding: 7px;
}
定义了前台页面样式之后，打开classDetail.js文件，在ready函数内添加功能代码，实现将ListView控件与数据源相绑定，以便能够显示数据，并引用模板来控制数据的显示格式，相关代码如下所示：
ready: function (element, options) {
//根据传递的参数来获取某个类别以及该类别中的所有菜肴。如果没有传递参数，则获取第一个类别和该类别中的菜肴
var group = (options && options.groupKey) ? menuData.resolveGroupReference(options.groupKey) : menuData.groups.getAt(0);
//获取该类别中的所有菜肴
this.items = menuData.getItemsFromGroup(group);
//分组菜肴并加入列表
var pageList = this.items.createGrouped(
function groupKeySelector(item) { return group.key; },
function groupDataSelector(item) { return group; }
);
//设置类别名称
element.querySelector(".pagetitle").textContent = group.title;
//获取页面中的ListView控件
var listView = element.querySelector(".itemslist").winControl;
//为类别信息和菜肴设置数据源
listView.groupDataSource = pageList.groups.dataSource;
listView.itemDataSource = pageList.dataSource;
//为类别信息设定模板，按照模板的格式显示数据
listView.groupHeaderTemplate = element.querySelector(".headerTemplate");
//为菜肴设定模板
listView.itemTemplate = element.querySelector(".itemTemplate");
//将ListView控件的布局设置成网格布局
listView.layout = new WinJS.UI.GridLayout({ groupHeaderPosition: "left" });
//给oniteminvoked事件设置处理函数
listView.oniteminvoked = this.ItemInGroupPage_Click.bind(this);
}
上面代码中，在ready函数里对options和options.groupKey进行判断，当参数options和options.groupKey不为空时，调用menuData命名空间下的resolveGroupReference函数根据参数groupKey获取该分类并赋值给变量group；否则获取第一个分类并赋值给变量group。然后调用getItemsFromGroup函数根据变量group来获取指定类别中的所有菜肴并赋值给items变量，使用items的createGrouped函数按照key和group属性值对菜肴进行分组，并把分组的结果赋值给pageList对象。接下来调用element.querySelector函数获取class属性为"pagetitle"的h1元素，将其textContent属性值设置为group.title来显示分类的标题，并通过element.querySelector函数获取class属性值为" itemslist"的ListView控件，将其赋值给listView对象。
然后将pageList对象的groups.dataSource和dataSource两个数据源分别赋值给listView对象的groupDataSource和itemDataSource属性，调用element.querySelector函数获取class属性值为"headerTemplate"和"itemTemplate"的两个Template控件，并分别赋值给listView对象的groupHeaderTemplate和itemTemplate属性。接着通过listView对象的layout属性设置ListView控件的显示布局，并为listView对象的oniteminvoked事件注册事件处理函数ItemInGroupPage_Click。
接着在ready函数后面定义事件处理函数ItemInGroupPage_Click，相关代码如下所示：
ItemInGroupPage_Click: function (args) {
var item = this.items.getAt(args.detail.itemIndex);
WinJS.Navigation.navigate("/pages/foodDetail/foodDetail.html", { item: menuData.getItemReference(item) });
}
在ItemInGroupPage_Click处理函数内，调用items的getAt函数来获取某项菜肴的索引并赋值给变量item，并通过WinJS.Navigation.navigate函数根据菜肴页面的地址和菜肴标识导航到相应的菜肴详细信息页面。
启动调试，当在主页页面上单击某个类别名称时，如"蔬菜类"，会跳转到这个类别的详细介绍页面，同时还会显示属于这个类别的一些菜肴，如拌黄瓜、红烧冬瓜和蒜香茄子等，得到的效果如图19-35所示：
图19-35 蔬菜类页面的效果
Win10系列：JavaScript综合实例3的更多相关文章
- Win10系列：JavaScript综合实例2
在项目中添加一个名为pages的文件夹,并在pages文件夹里面再添加一个名为mainPage的文件夹,接着在mainPage文件夹里添加一个"页面控制"项,命名为mainPage ...
- Win10系列：JavaScript综合实例1
上面几个小节讲解了使用HTML5和JavaScript语言开发Windows 应用商店应用时会用到的一些技术,本小节将前面介绍的知识融合在一起创建一个菜谱应用程序,帮助读者更进一步地理解和掌握这些知识 ...
- Win10系列：JavaScript综合实例4
实现主页面和分类页面的之后,最后来看一下菜肴页面的实现,这个页面用于详细介绍某项菜肴或主食,如名称.图片和具体做法等.在pages文件夹里面添加一个名为foodDetail的文件夹,并在foodDet ...
- 一步一步学Silverlight 2系列（18）：综合实例之RSS阅读器
一步一步学Silverlight 2系列(18):综合实例之RSS阅读器 概述 Silverlight 2 Beta 1版本发布了,无论从Runtime还是Tools都给我们带来了很多的惊喜,如支 ...
- html5--5-16 综合实例绘制饼图
html5--5-16 综合实例绘制饼图 实例 <!doctype html> <html> <head> <meta charset="utf-8 ...
- Qt Quick综合实例之文件查看器
假设你基于Qt SDK 5.3.1来创建一个Qt Quick App项目,项目模板为你准备的main.qml文档的根元素是ApplicationWindow或Window.这次我们就以Applicat ...
- ReportingServies——SQLServer报表开发综合实例
如果我们安装了sqlserver2008 R2,将会自动安装一个报表开发工具 不要以为此报表开发工具只适合于sqlserver2008,其实在sqlserver2012中也是支持的,事实上我现在项目中 ...
- Loadrunner 关联 web_custom_request综合实例
Loadrunner 关联 web_custom_request综合实例 Loadrunner 关联web_custom_request,针对自带的订票系统的一个综合实例,相信看了本文大家对学习loa ...
- 使用VS2012 开发SharePoint 2013 声明式的action(activity) 综合实例
本文讲述使用VS2012 开发SharePoint 2013 声明式的action 综合实例. 需求同: http://blog.csdn.net/abrahamcheng/article/detai ...
随机推荐
- 给 vue项目添加ESLint
eslint配置方式有两种: 注释配置:使用js注释来直接嵌入ESLint配置信息到一个文件里 配置文件:使用一个js,JSON或者YAML文件来给整个目录和它的子目录指定配置信息.这些配置可以写在一 ...
- docker下debian镜像开启ssh, 允许root用密码登录
用的官方python镜像做开发, 暴露端口, 用pycharm ssh进去开发. 忽然发现本来ssh能连上, 但是更了新的python镜像连不上了. 有折腾了一下, 连上了. 主要是python官网镜 ...
- HTML 标记 3 —— CSS
<style type="text/css">body { background-color: #F00;} p{ color:#0F0; } .自己定义 { colo ...
- P678-vect2.cpp
// CH1608.cpp : 定义控制台应用程序的入口点. // #include "stdafx.h" #include <string> #include < ...
- (转)Lua的table库函数insert、remove、concat、sort详细介绍
原帖链接:http://www.jb51.net/article/64711.htm#comments 有增注标识的地方为额外注释,非原帖内容. 函数列表:(增注:只能用于数组!) table.ins ...
- 雷林鹏分享：XML 元素
XML 元素 XML 文档包含 XML 元素. 什么是 XML 元素? XML 元素指的是从(且包括)开始标签直到(且包括)结束标签的部分. 一个元素可以包含: 其他元素 文本 属性 或混合以上所有. ...
- 雷林鹏分享：XML Parser
XML Parser 所有现代浏览器都有内建的 XML 解析器. XML 解析器把 XML 文档转换为 XML DOM 对象 - 可通过 JavaScript 操作的对象. 解析 XML 文档 下面的 ...
- LeetCode--303--区域和检索 - 数组不可变
问题描述: 给定一个整数数组 nums,求出数组从索引 i 到 j (i ≤ j) 范围内元素的总和,包含 i, j 两点. 示例: 给定 nums = [-2, 0, 3, -5, 2, -1 ...
- You Don't Know JS: this & Object Prototypes( 第3章 对象)
前2章探索了this绑定指向不同的对象需要函数引用的call-site. 但是什么是对象,为什么我们需要指向它们? 本章探索细节. Syntax the rules that describe ho ...
- android--------性能优化之Allocation Tracker
Allocation Tracker 能做什么? 追踪内存分配信息,按顺序排列,这样我们就能清晰看出来某一个操作的内存是如何一步一步分配出来的.比如在有内存抖动的可疑点,我们可以通过查看其内存分配轨迹 ...