#flipview

  Создание простой галереи

  У элемента управления FlipView есть два ключевых свойства - itemDataSource и itemTemplate. Свойство itemDataSource ссылается на источник данных IListDataSource, который можно создать при помощи WinJS.Binding.List, а свойство itemTemplate - на шаблон для данных ItemTemplate (WinJS.Binding.Template).

Для создания FlipView, вам нужно выполнить три простых действия:

1) Создать элемент управления FlipView.

2) Добавить источник данных.

3) Определить шаблон для отображения.

Создание FlipView

Для того, чтобы создать FlipView — элемент, необходимо добавить на страницу блок div с атрибутом «data-win-control», и присвоить ему значение WinJS.UI.FlipView:

<div data-win-control="WinJS.UI.FlipView"></div>

Добавление данных в элемент управления Flipview

  Для добавления данных в элемент управления FlipView, вам нужно создать источник данных IListDataSource и определить шаблон WinJS.Binding.Template для каждой карточки. Вы можете воспользоваться объектом WinJS.Binding.List, а, при необходимости, создать свой источник данных. В качестве примера, посмотрим, как создать источник данных при помощи объекта WinJS.Binding.List. Для этого добавьте в JavaScript файл массив данных с несколькими свойствами. В данном примере это тип элемента, название и изображение.

var dataList = new WinJS.Binding.List([ { type: "item", title: "Горы", picture: "images/1.jpg" }, { type: "item", title: "Гроза", picture: "images/2.jpg" }, { type: "item", title: "Замок", picture: "images/3.jpg" }, … ]); // Делаем dataList видимым глобально WinJS.Namespace.define("DataExample", { itemList: dataList }); Для того, чтобы связать ваш список данных с элементом управления FlipView, используйте свойство itemDataSource: var flipView = document.getElementById("basicFlipView").winControl; flipView.itemDataSource = DataExample.itemList.dataSource;

Обратите внимание:

Можно объявить те же самые данные декларативно в HTML коде. Для этого внутри атрибута data-win-options присвойте свойству itemDataSource значение, равное DataExample.itemDataList.dataSource, в блоке div элемента управления FlipView.

<div id="basicFlipView" data-win-control="WinJS.UI.FlipView" data-win-options="{ itemDataSource : DataExample.itemList.dataSource }"></div>

Создание шаблона для отображения данных

  Далее, для корректного отображения данных нужно задать шаблон WinJS.Binding.Template. Это можно сделать двумя способами: определить WinJS.Binding.Template с помощью ручной разметки или же реализовать функцию, которая сделает это автоматически. Посмотрим, как создать шаблон вручную.

Добавьте блок div и присвойте атрибуту data-win-control значение WinJS.Binding.Template, в него добавьте дополнительные классы с описанием разметки для каждого свойства элемента - типа элемента, названия и изображения.

<div id="ItemTemplate" data-win-control="WinJS.Binding.Template"> <div class="overlaidItemTemplate"> <img class="image" src="#" data-win-bind="src: picture; alt: title" /> <div class="overlay"> <h2 class="ItemTitle" data-win-bind="innerText: title"></h2> </div> </div> </div>

Для того, чтобы применить шаблон элемента, внутри атрибута data-win-options присвойте свойству itemTemplate значение, равное ItemTemplate, в блоке div элемента управления FlipView.

<div id="basicFlipView" data-win-control="WinJS.UI.FlipView" data-win-options="{ itemDataSource : DataExample.itemList.dataSource, itemTemplate : ItemTemplate }"></div>

Готово! У нас получилось создать галерею для отображения фотографий.

  Стилизация FlipView

  Элемент управления FlipView вы можете стилизовать с помощью шаблона WinJS.Binding.Template, а для кнопок навигации существует отдельный набор CSS классов.

Ниже дана схема компонентов элемента управления FlipView, к которым можно применить стили.

· .win-navbottom Задает стиль кнопки навигации вниз.

· .win-navbutton Задает стиль всех кнопок навигации.

· .win-navleft Задает стиль кнопки навигации влево.

· .win-navright Задает стиль кнопки навигации вправо.

· .win-navtop Задает стиль кнопки навигации вверх.

Например, для того, чтобы задать стиль правой кнопки навигации для элемента управления FlipView, нужно переопределить класс CSS win-navright.

.win-flipview .win-navright { background-color: rgba(0,0,255, 0.8); width: 50px; height: 650px; margin-left: -50px; margin-top: -402px; margin-right: 10px; }

Создание галереи для отображения товаров в интернет магазине

  Мы уже познакомились с тем, как добавлять изображения в элемент управления FlipView. Давайте посмотрим, как создать галерею для отображения товаров в интернет магазине. Сделать это очень просто. Создайте файл с данными, где у каждого элемента будет четыре свойства – тип, картинка, название и описание. Основное изменение по сравнению с предыдущим шаблоном связано с определением CSS стилей.

Разделите экран на несколько частей – для этого определите для объекта overlaidItemTemplate свойство -ms-grid-rows. Обратите внимание, что для относительного позиционирования элементов в FlipView удобно использовать Grid Layout.

В своем примере я предпочла разделить экран на две равные части. На одной будет отображаться картинка с названием, на другой – описание товара. Для того, чтобы задать CSS стили нижней части экрана, я определила класс для .overlaidItemTemplate .ItemDescription. Все ограничивается только вашей фантазией! У меня, например, получился макет интернет магазина по продаже телевизоров.

Для того, чтобы сделать страницу, на которой элементы будут иди списком, просто добавьте в атрибут data-win-option свойство orientation со значением 'vertical'.

Вот такие настройки использовались для стилизации мини-магазина.

/*CSS стили для всего шаблона*/ .overlaidItemTemplate { display: -ms-grid; -ms-grid-columns: 1fr; -ms-grid-rows: 1fr 1fr; width: 100%; height: 100%; } /*CSS стили для нижней части шаблона */ .overlaidItemTemplate .ItemDescription { color: black; font-family: 'Segoe UI Mono'; font-size: 15pt; padding-top: 8px; padding-left: 8px; -ms-grid-row-align: stretch; background-color: rgba(255, 255, 255, 0.4863); background-position-y: 50%; position: relative; z-index: 2; -ms-grid-row: 2; }

Давайте немного модифицируем задачу. Пусть теперь нам необходимо каким-то образом отметить некоторые товары, допустим, выделить новые модели. Разберемся с тем, как это сделать.

· Добавляем в массив данных новое свойство - isNew, принимающее значение true или false в зависимости от того, является товар «новым» или нет:

var dataArray = [ { type: "item", title: "Feel", picture: "images/Cliff.jpg", description: "Тип экрана", isNew: true }, … { type: "item", title: "Grape", picture: "images/Grapes.jpg", description: "Тип экрана", isNew: false }, ];

· Используя WinJS.Binding.converter, создаем конвертер, при помощи которого мы добавляем поверх значок со стикером.

var converters = { convertToPic: WinJS.Binding.converter(function(showSticker) { if (showSticker) return '/images/star.png'; else return ""; }) }; WinJS.Namespace.define("Data", {"Converters": converters });

· Вставляем изображение в шаблон

<div class="imageBackgroundnew"><img data-win-bind="src: isNew Data.Converters. convertToPic" /></div>

Создание элемента управления контекстом

  Очень часто элементы управления, аналогичные FlipView, используются на страницах веб-сайтов для того, чтобы реализовать с отображение текущей позиции и навигации по элементам. Посмотрим, как сделать тоже самое при помощи FlipView.

В элементе управления FlipView есть методы и события, которые дают пользователю представление о текущей позиции в галерее и об общем количестве элементов. Давайте добавим кнопки, с помощью которых можно реализовать возможность перехода к любому элементу. Синхронизация кнопок переключения с FlipView поддерживается с помощью событий pageselected и pagevisibilitychanged.

Вам нужно описать события нажатия на кнопку и перелистывания страницы в javascript файле вашего проекта. Общий план такой:

1. Создание элемента управления переключением страниц.

2. Создание кнопок переключения между страницами и добавление событий нажатия на кнопку.

3. Определение начала переключения страницы и блокировка последующих переключений до завершения перемещения на соседнюю страницу.

4. Описание события переключения страницы.

5. Добавление созданного элемента управления в DOM.

Полный код реализации навигации по элементу управления FlipView смотрите здесь:

HTML код:

<div data-win-control="ContextControl"> <div class="contextControlScenario"> <div id="contextControl_ItemTemplate" data-win-control="WinJS.Binding.Template" style="display: none"> <div class="overlaidItemTemplate"> <img class="image" data-win-bind="src: picture; alt: title" /> <div class="overlay"> <h2 class="ItemTitle" data-win-bind="innerText: title"></h2> </div> </div> </div> <div> <div id="contextControl_FlipView" class="flipView" data-win-control="WinJS.UI.FlipView" data-win-options="{ itemDataSource: DefaultData.bindingList.dataSource, itemTemplate: contextControl_ItemTemplate }"> </div> <div id="ContextContainer"></div> </div> </div> </div>

JavaScript код:

(function () { "use strict"; var myFlipview = null; var page = WinJS.UI.Pages.define("default.html", { processed: function (element, options) { myFlipview = document.getElementById("contextControl_FlipView").winControl; myFlipview.count().done(countRetrieved); } }); function countRetrieved(count) { // 1) Создаем элемент управления переключением страниц var contextControl = document.createElement("div"); contextControl.className = "contextControl"; var isFlipping = false; // 2) Создаем radio кнопки для каждой страницы в FlipView и добавляем «флаг» var radioButtons = []; for (var i = 0; i < count; ++i) { // Создаем radio-кнопку var radioButton = document.createElement("input"); radioButton.setAttribute("type", "radio"); // Задаем имя для группы radio кнопок radioButton.setAttribute("name", "flipperContextGroup"); // Присваиваем каждой кнопке номер страницы radioButton.setAttribute("value", i); // Установка маркера доступности radioButton.setAttribute("aria-label", (i + 1) + " of " + count); // Добавлем обработчик события radioButton.onclick = radioButtonClicked; // Добавляем кнопки в нашу коллекцию radioButtons.push(radioButton); // Добавляем кнопки в элемент управления переключением страниц contextControl.appendChild(radioButton); } // 3) Устанавливаем связь между выбранным элементом и элементом, на котором //находится FlipView if (count > 0) { radioButtons[myFlipview.currentPage].checked = true; } // 4) Описываем события для radio кнопок function radioButtonClicked(eventObject) { if (isFlipping) { var currentPage = myFlipview.currentPage; radioButtons[currentPage].checked = true; } else { var targetPage = eventObject.srcElement.getAttribute("value"); myFlipview.currentPage = parseInt(targetPage, 10); } } // 5) Определяем начало переключения страницы для того, чтобы предотвратить // переключения страницы до завершения предыдущего переключения myFlipview.addEventListener("pagevisibilitychanged", function (eventObject) { if (eventObject.detail.visible === true) { isFlipping = true; } }, false); // 6) Подсвечиваем элемент, на котором мы находимся myFlipview.addEventListener("pageselected", function () { // Перемещение закончено, «опускаем» флаг isFlipping = false; // Устанавливаем выбранную страницу var currentPage = myFlipview.currentPage; radioButtons[currentPage].checked = true; }, false); // 7) Добавляем элемент управления в DOM var contextContainer = document.getElementById("ContextContainer"); contextContainer.appendChild(contextControl); } })();

Обратите внимание, что для стилизации кнопок переключения будем использовать radio кнопки. Для того, чтобы сделать симпатичные круглые кнопки, достаточно задать CSS свойство border-radius и указать, насколько процентов мы хотим закруглить края (по умолчанию radio кнопки прямоугольные)

input[type="radio"] { margin: 10px 5px; width: 15px; height: 15px; padding: 0px; border-radius: 50%; }

FlipView в вебе

WinJS доступен для веб-проектов в виде открытой библиотеки, а также вы можете его использовать на своих веб-страницах. Вы можете посмотреть, как выглядит элемент управления FlipView в вебе, просто перейдя по этой ссылке.

Обратите внимание на третий пример с использованием динамичного шаблона. Такую возможность мы рассмотрим в одной из следующих статей.

  Дополнительные ссылки:

Краткое руководство: добавление элемента управления FlipView (HTML)

Пример использования элемента управления FlipView, написанный на HTML