WinJS-компонент FlipView

Компонент FlipView можно использовать для создании фото галереи.

js/data.js
(function() {
    "use strict";
    var Employees = new WinJS.Binding.List([{
        id: 1,
        name: "Senthil Kumar",
        designation: "Mobile Developer"
    }, {
        id: 2,
        name: "Lohith GN",
        designation: "Web Developer"
    }, {
        id: 3,
        name: "Vidyasagar",
        designation: "Game Developer"
    }]);
    WinJS.Namespace.define("recipeData", {
        Employees: Employees
    });
})();

FlipView отображает данные из источника данных реализующего интерфейс IListDataSource. Например, WinJS.Binding.List и WinJS.UI.StorageDataSource.

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8" />
      <title>Recipe4.2</title>
      <!-- WinJS references -->
      <link href="WinJS/css/ui-light.css" rel="stylesheet" />
      <script src="WinJS/js/base.js"></script>
      <script src="WinJS/js/ui.js"></script>
      <!-- Recipe4.2 references -->
      <link href="/css/default.css" rel="stylesheet" />
      <script src="/js/default.js"></script>
      <script src="/js/data.js"></script>
   </head>
   <body class="win-type-body" style="margin:20px">
      <h1>Recipe 4.2</h1>
      <div id="template" data-win-control="WinJS.Binding.Template">
         <div>
            <h4 data-win-bind="innerText: name"></h4>
            <h6 data-win-bind="innerText: designation"></h6>
         </div>
      </div>
      <div id="flipView1"
         data-win-control="WinJS.UI.FlipView"
         data-win-options="{itemTemplate: select('#template') ,
         itemDataSource : recipeData.Employees.dataSource}">
      </div>
   </body>
</html>



Теги: