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




default.html
<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8" />
      <title>Recipe4.8</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.8 references -->
      <link href="/css/default.css" rel="stylesheet" />
      <script src="/js/default.js"></script>
   </head>
   <body class="win-type-body">
      <div class="basicToolbar" data-win-control="WinJS.UI.ToolBar">
         <!-- Primary commands -->
         <button data-win-control="WinJS.UI.Command" data-win-options="{
            id:'cmdAdd',
            label:'add',
            section:'primary',
            type:'button',
            icon: 'add',
            onclick: recipes.clickcommand}"></button>
         <button data-win-control="WinJS.UI.Command" data-win-options="{
            id:'cmdEdit',
            label:'Edit',
            section:'primary',
            type:'button',
            icon: 'edit',
            onclick: recipes.clickcommand}"></button>
         <button data-win-control="WinJS.UI.Command" data-win-options="{
            id:'cmdDelete',
            label:'delete',
            section:'primary',
            type:'button',
            icon: 'delete',
            onclick: recipes.clickcommand}"></button>
         <!-- Secondary command -->
         <button data-win-control="WinJS.UI.Command" data-win-options="{
            id:'cmdShare',
            label:'share',
            section:'secondary',
            type:'button',
            onclick: recipes.clickcommand}"></button>
      </div>
   </body>
</html>

В файле default.js добавим следующий код перед строкой
args.setPromise(WinJS.UI.processAll());
WinJS.Namespace.define("recipes", {
    clickcommand: WinJS.UI.eventHandler(function(ev) {
        var command = ev.currentTarget;
        if (command.winControl) {
            var message = Windows.UI.Popups.MessageDialog(command.
            winControl.label);
            message.showAsync();
        }
    })
});


Теги: