Win10系列:JavaScript综合实例4

时间:2022-03-25 06:09:55

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

Win10系列:JavaScript综合实例4

图19-36详细介绍红烧肉的页面