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 ...
随机推荐
- P359 usestock2.cpp
IDE Qt Creator 4.0.3 stock.h #ifndef STOCK_H #define STOCK_H #include <string> class Stock //类 ...
- Python Scrapy 爬取煎蛋网妹子图实例（一）
前面介绍了爬虫框架的一个实例,那个比较简单,这里在介绍一个实例 爬取 煎蛋网 妹子图,遗憾的是 上周煎蛋网还有妹子图了,但是这周妹子图变成了 随手拍, 不过没关系,我们爬图的目的是为了加强实战应用,管 ...
- Java 访问RabbitMQ
一.概述 前面学过ActiveMQ.ActiveMQ主要是实现的JMS规范,而RabbitMQ就是AMQP的一个具体实现. RabbitMQ里面有几个概念:生产者.消费者.消息.交换器.路由键.队列. ...
- Axure 设置条件的操作
登录的三种场景: 1.用户名为空,只输入密码时,执行三个动作:跳出提示内容(用户名为空).光标定位在用户名的文本框中.清空密码的文本框: 2.密码为空,只输入用户名,执行两个操作:跳出提示内容(密码为 ...
- 一个使用Jmeter做接口性能测试的实战案例
1 安装并配置Jmeter Jmeter的安装不在这里阐述,安装步骤非常简单. 直接进入主题 1.1 数据库连接配置 由于测试过程需要调用数据库获取响应部署数据,因此需要先建立与数据库的连接. 如果不 ...
- 20165327 预备作业3 Linux安装及学习
20165327 预备作业3 Linux安装及学习 一.学习基于VirtualBox虚拟机安装Ubuntu图文教程,在自己笔记本上安装Linux操作系统,注意尽量选用最新版本的VirtualBox和U ...
- PHP操作MySQL数据库--PHP的应用
一.Apache服务器的安装 <1>安装版(计算机相关专业所用软件---百度云链接下载)-直接install<2>非安装版(https://www.apachehaus.com ...
- 20170928xlVBA自定义分类汇总
SubtotalByCQL Range("A1:E100").Value, "Select 1,2,Sum(4),Count(4) GroupBy 1,2", ...
- uva10564
路径条数很好找.记录最小路径,就记录到各点的最小字符串,存储起来. #include <iostream> #include <cstdio> #include <cma ...
- 2.1 uml序言
UML Unified Modeling Language 统一建模语言 模型的定义 建模 modeling 重要的研发成果常常产自类比(analogy): 把不太理解的东西和一些已经较为理解.且十分 ...