dijit 菜单教程

Dijit 菜单

Dijit 是一个强大的框架，我们可以用来创建简介，专业的界面。有时，那意味着我们需要一个带有选项的菜单，带来我们像桌面应用一般的体验。有了wijit/Menu, 我们有了一个易于使用的强大的工具区创建这些界面。

介绍

带有选项的菜单在UI领域是很熟悉的概念。不同的菜单有不同的形状大小，从水平菜单栏到下拉菜单，再到上下文或者右键菜单进行上下文相关操作。HTML提供的原生控件功能有限，并且简单的HTML/CSS 组合略显尴尬并且受制于功能和可用性。dijit/Menu*系列控件解决了这些问题。

 

开始

dijit/Menu documentation 概括了菜单的种类和使用它们的方法。这个文档和API documentation 都是学习的好地方。我们将会参照这些资源并展开以此为一个简单的任务管理应用开发一套菜单。

我们将从简单的dijit/Menu——一个垂直的管理菜单项的控件。就像所有Dijit控件那样，dijit/Menu能够以声明风格来使用，我们在标签中配置我们的控件，又或者用编程的方式
用JavaScript代码显式地配置和创建实例。为了演示，我们以此用每种风格创建最简单的菜单，这些菜单以此包括edit，view和任务选项。

这些代码实例将假设你已经创建了一个页面用来载入Dojo toolkit和Claro主题。你可以访问previoustutorials回顾之前的知识。

 

声明风格

[html] view plain copy
  1. <body class="claro">  
  2.     <script>  
  3.         // Require the Menu and MenuItem class, and the dojo/parser,  
  4.         // and make sure the DOM is ready  
  5.         require([  
  6.             "dijit/Menu",  
  7.             "dijit/MenuItem",  
  8.             "dojo/parser",  
  9.             "dojo/ready"  
  10.         ], function(Menu, MenuItem, parser, ready){  
  11.             ready(function(){  
  12.                 parser.parse();  
  13.             });  
  14.         });  
  15.     </script>  
  16.     <div id="mainMenu" data-dojo-type="dijit/Menu">  
  17.         <div id="edit" data-dojo-type="dijit/MenuItem">Edit</div>  
  18.         <div id="view" data-dojo-type="dijit/MenuItem">View</div>  
  19.         <div id="task" data-dojo-type="dijit/MenuItem">Task</div>  
  20.     </div>  
  21. </body>  

View Demo

 

编程风格

[html] view plain copy
  1. <body class="claro">  
  2.     <div id="mainMenu"></div>  
  3.    
  4.     <script>  
  5.         // Require the Menu and MenuItem class  
  6.         // Make sure the DOM is ready  
  7.         require([  
  8.             "dijit/Menu",  
  9.             "dijit/MenuItem",  
  10.             "dojo/ready"  
  11.         ], function(Menu, MenuItem, ready){  
  12.             ready(function(){  
  13.                 // create the Menu container  
  14.                 var menu = new Menu({  
  15.                     }, "mainMenu");  
  16.    
  17.                 // create and add child item widgets  
  18.                 // for each of "edit", "view", "task"  
  19.    
  20.                 menu.addChild( new MenuItem({  
  21.                     id: "edit",  
  22.                     label: "Edit"  
  23.                 }) );  
  24.    
  25.                 menu.addChild( new MenuItem({  
  26.                     id: "view",  
  27.                     label: "View"  
  28.                 }) );  
  29.    
  30.                 menu.addChild( new MenuItem({  
  31.                     id: "task",  
  32.                     label: "Task"  
  33.                 }) );  
  34.    
  35.                 menu.startup();  
  36.             });  
  37.         });  
  38.     </script>  
  39. </body>  

View Demo

当使用dijit/Menu时，一个菜单式有一系列的菜单项组成。每个菜单都是一个控件实例，并且每个菜单项都是它自己的控件实例。菜单包含菜单项，并且独立的菜单项能够与一个子菜单相关联。在上面的例子中，我们使用了一般的dijit/MenuItem控件类去表示在菜单中的菜单项。尽管如此，一系列的菜单项能够包含分隔符和包含子菜单的菜单项。这些特殊类型的菜单项中的每一种都有自己专属的控件类型(Widget Class)。

dijit/MenuItem

在一个垂直菜单中的菜单项。支持可选图标（通过CSS），并且可选的快捷方式（快捷键）组合。 dijit/MenuItem和继承与此的控件能够通过键盘被点击和选中，并且支持全键盘导航。菜单项通过设置disabled标志位来设置视觉和功能上的disabled.

dijit/MenuBarItem

 基于dijit/MenuItem的一个扩展，被用来表示水平菜单，包含有视觉和可用性的改变。

dijit/PopupMenuItem

基于dijit/MenuItem的一个扩展，表示拥有子菜单的一个菜单项。子菜单能够通过点击或者在菜单项上停顿，亦或者通过带有快捷键的键盘访问。

dijit/PopupMenuBarItem

一个水平方向版本的dijit/PopupMenuItem

dijit/MenuSeparator

一个非交互式的菜单项间的分隔器

 

 

菜单结构

将我们如何想象我们的菜单结构与dijit/Menu的内部结构相互关联是非常有用的。最终，子菜单也仅仅是dijit/PopupMenuItem的弹出属性。当编程式地创建一个菜单，我们将一个菜单实例非配给一个菜单项的popup属性以便层级地创建菜单。当申明式地创建一个菜单时，可以通过元素内嵌来表示菜单的层级关系。为了创建一个有子菜单的菜单，我们可以简单地在一个菜单项中内嵌一个菜单；第一个元素（通常是一个</span>）被用来表示菜单项的标注。

声明风格

[html] view plain copy
  1. <body class="claro">  
  2.     <script>  
  3.         // Require dependencies  
  4.         require([  
  5.             "dijit/Menu",  
  6.             "dijit/MenuItem",  
  7.             "dijit/PopupMenuItem",  
  8.             "dojo/parser",  
  9.             "dojo/domReady!"  
  10.         ], function(Menu, MenuItem, PopupMenuItem, parser){  
  11.             parser.parse();  
  12.         });  
  13.     </script>  
  14.     <div id="mainMenu" data-dojo-type="dijit.Menu">  
  15.         <div id="edit" data-dojo-type="dijit.MenuItem">Edit</div>  
  16.         <div id="view" data-dojo-type="dijit.MenuItem">View</div>  
  17.         <div id="task" data-dojo-type="dijit.PopupMenuItem">  
  18.             <span>Task</span>  
  19.             <div id="taskMenu" data-dojo-type="dijit.Menu">  
  20.                 <div id="complete" data-dojo-type="dijit.MenuItem">  
  21.                     Mark as Complete  
  22.                 </div>  
  23.                 <div id="cancel" data-dojo-type="dijit.MenuItem">  
  24.                     Cancel  
  25.                 </div>  
  26.                 <div id="begin" data-dojo-type="dijit.MenuItem">  
  27.                     Begin  
  28.                 </div>  
  29.             </div>  
  30.         </div><!-- end of sub-menu -->  
  31.     </div>  
  32. </body>  

View Demo

 

编程风格

[html] view plain copy
  1. <body class="claro">  
  2.     <div id="mainMenu"></div>  
  3.     <script>  
  4.         // Require dependencies  
  5.         require([  
  6.             "dijit/Menu",  
  7.             "dijit/MenuItem",  
  8.             "dijit/PopupMenuItem",  
  9.             "dojo/domReady!"  
  10.         ], function(Menu, MenuItem, PopupMenuItem){  
  11.             // create the Menu container  
  12.             var mainMenu = new Menu({  
  13.             }, "mainMenu");  
  14.    
  15.             // create Menu container and child MenuItems  
  16.             // for our sub-menu (no srcNodeRef; we will  
  17.             // add it under a PopupMenuItem)  
  18.             var taskMenu = new Menu({  
  19.                 id: "taskMenu"  
  20.             });  
  21.    
  22.             // define the task sub-menu items  
  23.             taskMenu.addChild( new MenuItem({  
  24.                 id: "complete",  
  25.                 label: "Mark as Complete"  
  26.             }) );  
  27.    
  28.             taskMenu.addChild( new MenuItem({  
  29.                 id: "cancel",  
  30.                 label: "Cancel"  
  31.             }) );  
  32.    
  33.             taskMenu.addChild( new MenuItem({  
  34.                 id: "begin",  
  35.                 label: "Begin"  
  36.             }) );  
  37.    
  38.             // create and add main menu items  
  39.             mainMenu.addChild( new MenuItem({  
  40.                 id: "edit",  
  41.                 label: "Edit"  
  42.             }) );  
  43.    
  44.             mainMenu.addChild( new MenuItem({  
  45.                 id: "view",  
  46.                 label: "View"  
  47.             }) );  
  48.    
  49.             // make task menu item open the sub-menu we defined above  
  50.             mainMenu.addChild( new PopupMenuItem({  
  51.                 id: "task",  
  52.                 label: "Task",  
  53.                 popup: taskMenu  
  54.             }) );  
  55.    
  56.             mainMenu.startup();  
  57.             taskMenu.startup();  
  58.         });  
  59.     </script>  
  60. </body>  

View Demo

可以注意到在编程风格的例子中，唯一的一个“魔法”是将菜单项中的一个元素解析为菜单项的label。然后内嵌的菜单会被自动的认为是菜单项的弹出菜单。

我们已经提到一个子菜单仅仅是菜单项的一个popup属性。这意味这动态改变菜单之间的关系，并且多个菜单项引用同一个菜单实例作为他们的子菜单是可能的。根据上面的例子，我们可以在一个完全不同的UI的部分额外地将taskMenu分配为另一个dijit/PopupMenuItem的弹出菜单。

以上例子中并未提到，但使用编程方法完全可行的一个任务是在运行时重新分配子菜单。要完成这个任务，你可以简单地在dijit/PopupMenuItem上重新设置popup属性

以便指向一个新的子菜单。此外，你可以删除/摧毁原先的PopupMenuItem（如果不再使用，你也可以删除子菜单）并且插入一个新的合适的popup值。

 

 

菜单可访问性

所有的菜单系列共享相同的由Dijit提供的相同的可访问性。这意味这正确的ARIA角色被用来提供辅助技术来告知用户他们正在与何种控制相互，进而告诉他们如何使用。键盘可访问性被用来帮助低视力的，没有鼠标的用户。Tab键在菜单键移动焦点，并且方向键被用来在菜单和子菜单间移动。

菜单图标

就像dijit/form/Button和他的子类，dijit/MenuItem的实例拥有一个iconClass属性。这能够被用来增加一个特殊的CSS属性到一个菜单项的模板，以便在菜单中显示图标。以下是一个简单的，关于如何实现图标的例子，同时提供声明风格和编程风格示例。

声明风格

[html] view plain copy
  1. <script>  
  2.     // Require dependencies  
  3.     require([  
  4.         "dijit/MenuItem",  
  5.         "dojo/parser",  
  6.         "dojo/domReady!"  
  7.     ], function(MenuItem, parser){  
  8.         parser.parse();  
  9.     });  
  10. </script>  
  11. <div id="task"  
  12.         data-dojo-type="dijit.MenuItem"  
  13.         data-dojo-props="iconClass: 'taskIcon'">  
  14.     Task  
  15. </div>  

编程风格

[html] view plain copy
  1. // Require dependencies  
  2. require([  
  3.     "dijit/MenuItem",  
  4.     "dojo/domReady!"  
  5. ], function(MenuItem){  
  6.     new MenuItem({  
  7.         id: "task",  
  8.         label: "Task",  
  9.         iconClass: "taskIcon"  
  10.     });  
  11. });  

iconClass属性指向一个CSS类，我们可以在我们的stylesheet中定义此类——例如：

[css] view plain copy
  1. <style>  
  2.     .taskIcon {  
  3.         background: url("./icons/task.png");  
  4.         width: 24px;  
  5.         height: 24px;  
  6.     }  
  7. </style>  


View Demo

 

菜单扩展

至今，我们所使用的djijit/Menu被称为“导航菜单”——也就是说，静态地放置在页面上。我们可以非常简单地将这种菜单转变为上下文弹出菜单。

[javascript] view plain copy
  1. require([  
  2.     "dijit/Menu",  
  3.     "dojo/domReady!"  
  4. ], function(Menu){  
  5.     var mainMenu = new Menu({  
  6.         id: "mainMenu",  
  7.         contextMenuForWindow: true  
  8.     });  
  9. });  

这给我们提供了一个上下文菜单。我们可以通过传入DOM nodes数组或者传入我们创建菜单时设置的targetNodeIds属性得到的IDs为某些元素配置上下菜单。

[javascript] view plain copy
  1. require([  
  2.     "dijit/Menu",  
  3.     "dojo/domReady!"  
  4. ], function(Menu){  
  5.     var taskMenu = new Menu({  
  6.         id: "taskMenu",  
  7.         targetNodeIds: ["task_0", "task_1", "task_2"]  
  8.     });  
  9. });  

如果你需要在菜单创建后更新菜单与元素之间的绑定关系，可以在menu widget上使用bindDomNode和unBindDomNode方法

我们的下一个demo提供了一个全局的上下文菜单和另一个专属与某一个task items的上下文菜单。

View Demo

在demo中，你可以注意到在全局上下文中也有一个“Task”弹出菜单（重用了task items的上下文菜单）。尽管如此，直到你点击了某一个task item，不然没有“当前”item task——因为这个原因，我们刚开始时是这个菜单项无效，然后当用户选择了item时使之有效。

 

[javascript] view plain copy
  1. require(["dijit/registry"], function(registry){  
  2.     registry.byId("task").set("disabled", false);  
  3. }  

声明风格

[html] view plain copy
  1. <body class="claro">  
  2.     <script>  
  3.         // Require dependencies  
  4.         require([  
  5.             "dijit/Menu",  
  6.             "dijit/MenuItem",  
  7.             "dijit/MenuBar",  
  8.             "dijit/MenuBarItem",  
  9.             "dijit/PopupMenuBarItem",  
  10.             "dojo/parser",  
  11.             "dojo/domReady!"  
  12.         ], function(Menu, MenuItem, MenuBar, MenuBarItem,  
  13.             PopupMenuBarItem, parser){  
  14.             parser.parse;  
  15.         });  
  16.     </script>  
  17.    
  18.     <div id="mainMenu" data-dojo-type="dijit.MenuBar">  
  19.         <div id="edit" data-dojo-type="dijit.MenuBarItem">Edit</div>  
  20.         <div id="view" data-dojo-type="dijit.MenuBarItem">View</div>  
  21.         <div id="task" data-dojo-type="dijit.PopupMenuBarItem">  
  22.             <span>Task</span>  
  23.             <div id="taskMenu" data-dojo-type="dijit.Menu">  
  24.                 <div id="complete" data-dojo-type="dijit.MenuItem">  
  25.                     Mark as Complete  
  26.                 </div>  
  27.                 <div id="cancel" data-dojo-type="dijit.MenuItem">  
  28.                     Cancel  
  29.                 </div>  
  30.                 <div id="begin" data-dojo-type="dijit.MenuItem">  
  31.                     Begin  
  32.                 </div>  
  33.             </div>  
  34.         </div><!-- end of sub-menu -->  
  35.     </div>  
  36. </body>  

 View Demo

 

编程风格

[html] view plain copy
  1. <body class="claro">  
  2.     <div id="mainMenu"></div>  
  3.    
  4.     <script>  
  5.         // Require dependencies  
  6.         require([  
  7.             "dijit/Menu",  
  8.             "dijit/MenuItem",  
  9.             "dijit/MenuBar",  
  10.             "dijit/MenuBarItem"  
  11.             "dijit/PopupMenuBarItem",  
  12.             "dojo/domReady!"  
  13.         ], function(Menu, MenuItem, MenuBar, MenuBarItem,  
  14.             PopupMenuBarItem){  
  15.             // create the Menu container  
  16.             var mainMenu = new MenuBar({  
  17.             }, "mainMenu");  
  18.    
  19.             // create Menu container and child MenuItems  
  20.             // for our sub-menu (no srcNodeRef; we will  
  21.             //add it under a PopupMenuItem)  
  22.             var taskMenu = new Menu({  
  23.                 id: "taskMenu"  
  24.             });  
  25.    
  26.             // define the task sub-menu items  
  27.             taskMenu.addChild( new MenuItem({  
  28.                 id: "complete",  
  29.                 label: "Mark as Complete"  
  30.             }) );  
  31.    
  32.             taskMenu.addChild( new MenuItem({  
  33.                 id: "cancel",  
  34.                 label: "Cancel"  
  35.             }) );  
  36.    
  37.             taskMenu.addChild( new MenuItem({  
  38.                 id: "begin",  
  39.                 label: "Begin"  
  40.             }) );  
  41.    
  42.             // create and add main menu items  
  43.             mainMenu.addChild( new MenuBarItem({  
  44.                 id: "edit",  
  45.                 label: "Edit"  
  46.             }) );  
  47.    
  48.             mainMenu.addChild( new MenuBarItem({  
  49.                 id: "view",  
  50.                 label: "View"  
  51.             }) );  
  52.    
  53.             // make task menu item open the sub-menu we defined above  
  54.             mainMenu.addChild( new PopupMenuBarItem({  
  55.                 id: "task",  
  56.                 label: "Task",  
  57.                 popup: taskMenu  
  58.             }) );  
  59.    
  60.             mainMenu.startup();  
  61.             taskMenu.startup();  
  62.         });  
  63.     </script>  
  64. </body>  


View Demo

 

控件中的菜单

在采用菜单的Dijit中有一系列的混合控件。这些包括dijit/form/ComboButton和dijit/form/DropDownButton。这些原则与我们如何创建内嵌菜单非常相似。例如，我们可以按照如下的方式创建一个ComboButton:

声明风格

[html] view plain copy
  1. <body class="claro">  
  2.     <script>  
  3.         // Require dependencies  
  4.         require([  
  5.             "dijit/Menu",  
  6.             "dijit/MenuItem",  
  7.             "dijit/form/ComboButton",  
  8.             "dojo/parser",  
  9.             "dojo/domReady!"  
  10.         ], function(Menu, MenuItem, ComboButton, parser){  
  11.             parser.parse;  
  12.         });  
  13.     </script>  
  14.    
  15.     <div id="comboButton" data-dojo-type="dijit.form.ComboButton">  
  16.         <span>Do Something</span>  
  17.         <div data-dojo-type="dijit.Menu">  
  18.             <div data-dojo-type="dijit.MenuItem">Edit</div>  
  19.             <div data-dojo-type="dijit.MenuItem">View</div>  
  20.             <div data-dojo-type="dijit.MenuItem">Task</div>  
  21.         </div>  
  22.     </div>  
  23. </body>  

编程风格

[html] view plain copy
  1. <body class="claro">  
  2.     <div id="comboBtn"></div>  
  3.    
  4.     <script>  
  5.         // Require dependencies  
  6.         require([  
  7.             "dijit/Menu",  
  8.             "dijit/MenuItem",  
  9.             "dijit/form/ComboButton",  
  10.             "dojo/domReady!"  
  11.         ], function(Menu, MenuItem, ComboButton) {  
  12.             var menu = new Menu({ id: "mainMenu" });  
  13.    
  14.             menu.addChild( new MenuItem({  
  15.                 label: "Edit"  
  16.             }) );  
  17.    
  18.             menu.addChild( new MenuItem({  
  19.                 label: "View"  
  20.             }) );  
  21.    
  22.             menu.addChild( new MenuItem({  
  23.                 label: "Task"  
  24.             }) );  
  25.    
  26.             // create a ComboButton and add the Menu  
  27.             var comboBtn = new ComboButton({  
  28.                 label: "Do Something",  
  29.                 dropDown: menu  
  30.             }, "comboBtn");  
  31.    
  32.             menu.startup();  
  33.             comboBtn.startup();  
  34.         });  
  35.     </script>  
  36. </body>  

View Demo

更进一步

我们有数不胜数的方式去使用菜单，并且每一种使用方式都有自己的使用场景。Dijit给你提供了一种健壮的菜单类和一系列常用的UI模式的实现。你可以与菜单交互并且配置与改变菜单项的外观。这里有许多其他事件我们没有在这篇教程中涵盖，但是你可以自己去熟悉：

 

onItemHover

当用户的指针移过菜单项时被调用。

onItemUnHover

当用户的指针离开MenuItem是被调用。

onItemClick

当菜单项被点击时被调用。这本质上是连接到每一个菜单项的onClick的一个可选方法。

onOpen

当菜单显示或者被打开时被调用。

onClose

当菜单被隐藏或者被关时被调用。

查看API文档以获取过多关于菜单控件的细节。就像任何其他Dijit widget, 当你的需求无法被满足是,dijit/Menu和其他关联的类都是可以可扩展的。

 

结论

Dijit中的菜单使我们能够方便的创建菜单栏和子菜单并与之交互。我们已经看到了如何通过声明风格和编程风格创建各种菜单。这仅仅是Dijit武器库中的一小部分，Dijit致力于创建更加杰出的用户体验。

posted on 2017-01-03 11:04  Sharpest  阅读(710)  评论(0)  编辑  收藏  举报
Copyright © 2024 Sharpest
Powered by .NET 8.0 on Kubernetes Powered by: 博客园