WinJS-компонент SemanticZoom для семантического масштабирования внутри ListView




default.html
<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8" />
      <title>Recipe4.6</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.6 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">
      <h1>Recipe 4.6</h1>
      <!-- Zoom In-->
      <div id="GroupHeader" data-win-control="WinJS.Binding.Template">
         <h1 data-win-bind="innerText: technology"></h1>
      </div>
      <div id="EmployeeTemplate" data-win-control="WinJS.Binding.Template">
         <h2 data-win-bind="innerText:name"></h2>
      </div>
      <!-- Zoom out-->
      <div id="TechnologyTemplate" data-win-control="WinJS.Binding.Template">
         <h6 data-win-bind="innerText: technology"></h6>
      </div>
      <div id="szEmployee" data-win-control="WinJS.UI.SemanticZoom">
         <!-- Zoom In-->
         <div id="lvEmployees" data-win-control="WinJS.UI.ListView"
            data-win-options="{
            itemTemplate: select('#EmployeeTemplate'),
            groupHeaderTemplate: select('#GroupHeader')
            }"></div>
         <!-- Zoom Out-->
         <div id="lvTechnologies" data-win-control="WinJS.UI.ListView"
            data-win-options="{
            itemTemplate: select('#TechnologyTemplate')
            }"></div>
      </div>
   </body>
</html>

data.js
(function() {
    "use strict";

    function Initialize() {
        WinJS.UI.processAll().done(function() {
            var listView1 = document.getElementById("lvEmployees").winControl;
            var listView2 = document.getElementById("lvTechnologies").winControl;
            var employeeList = new WinJS.Binding.List([{
                id: 1,
                name: "Senthil Kumar",
                technology: "Mobile"
            }, {
                id: 2,
                name: "Michael",
                technology: "Web"
            }, {
                id: 3,
                name: "Lohith",
                technology: "Web"
            }, {
                id: 4,
                name: "Stephen",
                technology: "Mobile"
            }, {
                id: 5,
                name: "Vidyasagar",
                technology: "Game"
            }, {
                id: 6,
                name: "Joseph",
                technology: "Mobile"
            }, ]);
            // Grouped Datasource
            var groupedEmployees = employeeList.createGrouped(

            function(item) {
                return item.technology;
            },

            function(item) {
                return {
                    technology: item.technology
                }
            },

            function(group1, group2) {
                return group1 > group2 ? 1 : -1;
            });
            listView1.groupDataSource = groupedEmployees.groups.dataSource;
            listView1.itemDataSource = groupedEmployees.dataSource;
            listView2.itemDataSource = groupedEmployees.groups.dataSource;
        });
    }
    document.addEventListener("DOMContentLoaded", Initialize);
})();

Теги: