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 ...
随机推荐
- 力扣（LeetCode）412. Fizz Buzz
写一个程序,输出从 1 到 n 数字的字符串表示. 如果 n 是3的倍数,输出"Fizz": 如果 n 是5的倍数,输出"Buzz": 3.如果 n 同时是3和 ...
- linux修改网卡名为eth0
方法1: 1.编辑网卡的配置文件 vi /etc/sysconfig/network-scripts/ifcfg-ens33 将里面的NAME和DEVICE项修改为eth0,ONBOOT修改为yes. ...
- python中的面向对象学习以及类的多态
接下来类的第三个重要的特性:多态(一种接口,多种实现) 多态性(polymorphisn)是允许你将父对象设置成为和一个或更多的他的子对象相等的技术,赋值之后,父对象就可以根据当前赋值给它的子对象的特 ...
- stm32复位引脚NRST
STM32F的NRST是异步复位脚. 当NRST输入低电平的时候,MCU处于复位状态,重设所有的内部寄存器,及片内几十KB的SRAM. 当NRST从低电平变高时,PC指针从0开始. 但是复位的时候不会 ...
- java ----> 类转换异常
com.rr.domain.Department_$$_javassist_5 cannot be cast to javassist.util.proxy.Proxy 两个原因: 1.懒加载 在we ...
- Django使用admin管理后台管理数据库表
1.在admin.py文件中注册需要创建的表,例: from .models import * # Register your models here. admin.site.register(Use ...
- p2751 Job Processing
如果单单只安排过程1的时间最短,很容易算出来.用优先队列取最小,加上增量后再放回就行.对过程2也进行这样的操作.将过程1第一个完成的在过程2最后一个完成.以样例来说,过程1:1,1,2,2,3,过程2 ...
- 关于ActionBar 左侧添加完返回后 点击无效的问题
ActionBar actionBar =getSupportActionBar(); if(actionBar!=null){ actionBar.setHomeAsUpIndicator(R.mi ...
- apiCloud 三方分享，微信好友分享，微信朋友圈分享，QQ分享，微博分享
首先查看我的这篇有关三方登录的博客,地址是http://www.cnblogs.com/gqx-html/p/8303567.html,配置完三方数据后可以从上一篇文章中的链接跳转到各个登录查看api ...
- 走起 ~私有gitlab
1.创建gitlab 账号,创建一个项目名称 地址:http://git.limikeji.com 2.配置git环境 用git命令上传代码 3.配置gitlab ssh 4.使用git命令上传代码 ...