Краткое руководство: добавление элементов управления Rating (HTML)
[ Эта статья адресована разработчикам приложений среды выполнения Windows для Windows 8.x и Windows Phone 8.x. В случае разработки приложений для Windows 10 см. раздел последняя документация]
Чтобы дать возможность пользователю выставить свою оценку чему-либо посредством щелчка по значку оценки, используйте элемент управления Rating. В этом кратком руководстве показано, как добавить элемент управления оценками в свое приложение Магазина Windows с использованием JavaScript.
Предварительные требования
Предполагается, что вы умеете создавать простые приложения Магазина Windows на JavaScript с использованием элементов управления WinJS. Дополнительные инструкции для начала работы с элементами управления из библиотеки WinJS см. в статье Краткое руководство: добавление элементов управления и стилей WinJS.
Создание элемента управления оценками
Чтобы создать элемент управления Rating, создайте элемент div и задайте его свойству data-win-control значение "WinJS.UI.Rating". Вот пример создания простого элемента управления оценками:
<div id="ratingControl" data-win-control="WinJS.UI.Rating"></div>
Примечание Чтобы создать экземпляр элемента управления оценками, ваша страница должна включать файлы JavaScript библиотеки WinJS, а также необходимо вызвать функцию 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.
В этом примере активированный обработчик событий начальной страницы используется для того, чтобы добавить обработчик событий 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.
}
}
}
Следующий пример изменяет активированный обработчик событий, показанный выше, таким образом, чтобы он считывал сохраненную оценку пользователя и использовал ее для установки элемента управления 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. Теперь вы можете узнать о том, как лучше всего использовать управление оценками, в разделе Руководство и контрольный список для управления оценками.