快速入门:添加分级 (HTML)
[ 本文适用于编写 Windows 运行时应用的 Windows 8.x 和 Windows Phone 8.x 开发人员。如果你要针对 Windows 10 进行开发,请参阅 最新文档 ]
Rating 控件允许用户通过单击代表分级的图标对某些内容进行分级。本快速入门展示如何向使用 JavaScript 的 Windows 应用商店应用添加 Rating 控件。
先决条件
我们假设你可以创建使用 WinJS 控件的基本 Windows 应用商店应用(采用 JavaScript)。有关如何开始使用 WinJS 控件的说明,请参阅快速入门:添加 WinJS 控件和样式。
创建分级控件
若要创建 Rating 控件,请创建一个 div 元素并将它的 data-win-control 属性设置为 "WinJS.UI.Rating"。下面是有关如何创建基本分级控件的示例:
<div id="ratingControl" data-win-control="WinJS.UI.Rating"></div>
注意 为了对该控件进行实例化,你的页面必须包括 WinJS JavaScript 文件,而且必须在代码中调用 WinJS.UI.processAll 函数。有关详细信息,请参阅快速入门:添加 WinJS 控件和样式。
设置平均分级和最大分级
averageRating 属性指定要对其进行分级的项目的平均分级。(如何确定项目的平均分级由你来做主。) 如果你设置了 averageRating 属性,Rating 控件将一直显示,直到用户选择了自己的分级。 以下示例将 averageRating 设置为 3.4。
<div id="ratingControl" data-win-control="WinJS.UI.Rating"
data-win-options="{averageRating : 3.4}"></div>
maxRating 属性指定可能的最大分级。默认值为 5。下一个示例将 maxRating 设置为 7;当该控件显示时,它将显示 7 颗星(而不是 5 颗)。
<div id="ratingControl" data-win-control="WinJS.UI.Rating"
data-win-options="{averageRating : 3.4, maxRating : 7}"></div>
获取用户的分级
当用户选取某个分级时,它会触发 change 事件。你可以通过获取 userRating 属性的值来获取用户的分级。
以下示例使用起始页的 activated 事件处理程序将 change 事件处理程序添加到 Rating 控件中。(有关附加事件的最佳位置的详细信息,请参阅快速入门:添加控件和处理事件。)
(function () {
"use strict";
var app = WinJS.Application;
// This function responds to all application activations.
app.onactivated = function (eventObject) {
if (eventObject.detail.kind === Windows.ApplicationModel.Activation.ActivationKind.launch) {
// TODO: Initialize your application here.
WinJS.UI.processAll()
.done(function () {
// Get the rating control
var ratingControl = document.getElementById("ratingControl").winControl;
ratingControl.addEventListener("change", changeRating);
});
}
};
app.start();
})();
示例事件处理程序函数 changeRating
检索用户分级并存储它。
function changeRating(ev) {
var ratingControl = ev.target.winControl;
if (ratingControl) {
if (ratingControl.userRating != 0) {
// Put your code here to save user rating and re-calculate average rating.
WinJS.Application.sessionState.userRating = ratingControl.userRating;
var appData = Windows.Storage.ApplicationData.current;
var roamingValues = appData.roamingSettings.values;
// Write a setting
roamingValues.insert("userRating", ratingControl.userRating);
} else {
// Put your code here to delete user rating.
}
}
}
下一个示例修改前面所显示的 activated 事件处理程序,以便它检索所存储的用户分级并使用该分级设置 Rating 控件。
(function () {
"use strict";
var app = WinJS.Application;
// This function responds to all application activations.
app.onactivated = function (eventObject) {
if (eventObject.detail.kind === Windows.ApplicationModel.Activation.ActivationKind.launch) {
// TODO: Initialize your application here.
WinJS.UI.processAll()
.done(function () {
// Get the rating control
var ratingControl = document.getElementById("ratingControl").winControl;
// Retrieve stored state info
var appData = Windows.Storage.ApplicationData.current;
var roamingValues = appData.roamingSettings.values;
// Read a setting
var currentRating = parseFloat(roamingValues.lookup("userRating"));
if (currentRating > 0) {
ratingControl.userRating = currentRating;
}
ratingControl.addEventListener("change", changeRating);
});
}
};
function changeRating(ev) {
var ratingControl = ev.target.winControl;
if (ratingControl) {
if (ratingControl.userRating != 0) {
// Put your code here to save user rating and re-calculate average rating.
WinJS.Application.sessionState.userRating = ratingControl.userRating;
var appData = Windows.Storage.ApplicationData.current;
var roamingValues = appData.roamingSettings.values;
// Write a setting
roamingValues.insert("userRating", ratingControl.userRating);
} else {
// Put your code here to delete user rating.
}
}
}
app.start();
})();
摘要和后续步骤
你学习了如何创建 Rating 控件以及如何存储和检索它的 userRating。接着,可阅读分级控件指南和清单,学习如何以最佳方式使用分级控件。