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

На AppBar можно размещать команды для текущей страницы или текущего выделения.





default.html
<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8" />
      <title>Recipe4.7</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.7 references -->
      <link href="/css/default.css" rel="stylesheet" />
      <script src="/js/default.js"></script>
      <script src="/js/appbarevents.js"></script>
   </head>
   <body class="win-type-body">
      <div id="appBar" data-win-control="WinJS.UI.AppBar">
         <button data-win-control="WinJS.UI.AppBarCommand"
            data-win-options="{id:'cmdAdd', label:'Add', icon:'add', section:'primary',
            tooltip:'Add'}"></button>
         <button data-win-control="WinJS.UI.AppBarCommand"
            data-win-options="{id:'cmdRemove', label:'Remove', icon:'remove',
            section:'primary', tooltip:'Remove'}"></button>
         <button data-win-control="WinJS.UI.AppBarCommand"
            data-win-options="{id:'cmdCamera', label:'Click Photo', icon:'camera',
            section:'secondary', tooltip:'click'}"></button>
      </div>
      <div id="Message"></div>
   </body>
</html>

appbarevents.js
(function() {
    "use strict";
    WinJS.UI.Pages.define("default.html", {
        ready: function(element, options) {
            element.querySelector("#cmdAdd").addEventListener("click", AddMethod, false);
            element.querySelector("#cmdRemove").addEventListener("click", RemoveMethod, false);
            element.querySelector("#cmdCamera").addEventListener("click", CameraMethod, false);
        }
    });
    // Command button functions
    function AddMethod() {
        var message = new Windows.UI.Popups.MessageDialog("Add Button Pressed");
        message.showAsync();
    }

    function RemoveMethod() {
        var message = new Windows.UI.Popups.MessageDialog("Remove button pressed");
        message.showAsync();
    }

    function CameraMethod() {
        var message = new Windows.UI.Popups.MessageDialog("Camera button pressed");
        message.showAsync();
    }
})();


Теги: