Dijit is a powerful framework that we can use to create an introduction and professional interface. Sometimes, that means we need a menu with options to bring us a desktop app experience. With wijit/menu, we have a powerful tool area that is easy to use to create these interfaces.
Difficulty: Beginner
Dojo version: 1.8
Author: Dylan schiann
Leslie (yurychika@gmail.com)
Menus with options are very familiar in the UI field. Different menus have different shapes and sizes, from the horizontal menu bar to the drop-down menu, and then to the context or context menu to perform context-related operations. The native control functions provided by HTML are limited, and simple HTML/CSS combinations are slightly embarrassing and subject to functions and availability. The dijit/menu * series controls solve these problems.
StartDijit/menu documentation summarizes menu types and their usage methods. This document and API documentation are both good places to learn. We will refer to these resources and develop a set of menus for a simple task management application.
We will take a simple dijit/menu-a vertical control for menu items. Just like all dijit controls, dijit/menu can be used in declarative styles. We can configure our controls in labels or program them.
Use JavaScript code to explicitly configure and create instances. For demonstration, we create the simplest menus in each style, including edit, view, and task options.
These code instances assume that you have created a page to load the dojo toolkit and Claro topics. You can visit previoustutorials to review previous knowledge.
Declarative Style<body class="claro"> <script> // Require the Menu and MenuItem class, and the dojo/parser, // and make sure the DOM is ready require([ "dijit/Menu", "dijit/MenuItem", "dojo/parser", "dojo/ready" ], function(Menu, MenuItem, parser, ready){ ready(function(){ parser.parse(); }); }); </script> <div id="mainMenu" data-dojo-type="dijit/Menu"> <div id="edit" data-dojo-type="dijit/MenuItem">Edit</div> <div id="view" data-dojo-type="dijit/MenuItem">View</div> <div id="task" data-dojo-type="dijit/MenuItem">Task</div> </div></body>
View demo
Programming style<body class="claro"> <div id="mainMenu"></div> <script> // Require the Menu and MenuItem class // Make sure the DOM is ready require([ "dijit/Menu", "dijit/MenuItem", "dojo/ready" ], function(Menu, MenuItem, ready){ ready(function(){ // create the Menu container var menu = new Menu({ }, "mainMenu"); // create and add child item widgets // for each of "edit", "view", "task" menu.addChild( new MenuItem({ id: "edit", label: "Edit" }) ); menu.addChild( new MenuItem({ id: "view", label: "View" }) ); menu.addChild( new MenuItem({ id: "task", label: "Task" }) ); menu.startup(); }); }); </script></body>
View demo
When dijit/menu is used, a menu style consists of a series of menu items. Each menu is a control instance, and each menu item is its own control instance. A menu contains menu items, and independent menu items can be associated with a single sub-dish. In the preceding example, a general dijit/menuitem control class is used to represent the menu items in the menu. However, a series of menu items can contain delimiters and menu items that contain sub-menus. Each of these special menu items has its own widget class ).
Dijit/menuitem
Menu items in a vertical menu. Supports the combination of optional icons (via CSS) and optional shortcuts (shortcut keys. Dijit/menuitem and the inherited controls can be clicked and selected through the keyboard, and support full keyboard navigation. The menu item sets the disabled flag to set the visual and functional disabled.
Dijit/menubaritem
An extension based on dijit/menuitem is used to represent a horizontal menu that contains visual and usability changes.
Dijit/popupmenuitem
An extension based on dijit/menuitem indicates a menu item with a sub menu. Sub-menus can be accessed by clicking, pausing a menu item, or using a keyboard with a shortcut key.
Dijit/popupmenubaritem
Dijit/popupmenuitem of a horizontal version
Dijit/menuseparator
A splitter between non-interactive menu items
Menu structure
It is useful to imagine how our menu structure is correlated with the internal structure of dijit/menu. Finally, the sub-menu is only the pop-up attribute of dijit/popupmenuitem. When a menu is created programmatically, a menu instance is assigned a menu item's popup attribute for hierarchical menu creation. When a menu is created in a declarative manner, the hierarchical relationship of the menu can be expressed through element embedding. To create a menu with sub-menus, we can simply embed a menu in a menu item; the first element (usually a </span>) used to indicate the annotation of menu items.
Declarative Style
<body class="claro"> <script> // Require dependencies require([ "dijit/Menu", "dijit/MenuItem", "dijit/PopupMenuItem", "dojo/parser", "dojo/domReady!" ], function(Menu, MenuItem, PopupMenuItem, parser){ parser.parse(); }); </script> <div id="mainMenu" data-dojo-type="dijit.Menu"> <div id="edit" data-dojo-type="dijit.MenuItem">Edit</div> <div id="view" data-dojo-type="dijit.MenuItem">View</div> <div id="task" data-dojo-type="dijit.PopupMenuItem"> <span>Task</span> <div id="taskMenu" data-dojo-type="dijit.Menu"> <div id="complete" data-dojo-type="dijit.MenuItem"> Mark as Complete </div> <div id="cancel" data-dojo-type="dijit.MenuItem"> Cancel </div> <div id="begin" data-dojo-type="dijit.MenuItem"> Begin </div> </div> </div><!-- end of sub-menu --> </div></body>
View demo
Programming style
<body class="claro"> <div id="mainMenu"></div> <script> // Require dependencies require([ "dijit/Menu", "dijit/MenuItem", "dijit/PopupMenuItem", "dojo/domReady!" ], function(Menu, MenuItem, PopupMenuItem){ // create the Menu container var mainMenu = new Menu({ }, "mainMenu"); // create Menu container and child MenuItems // for our sub-menu (no srcNodeRef; we will // add it under a PopupMenuItem) var taskMenu = new Menu({ id: "taskMenu" }); // define the task sub-menu items taskMenu.addChild( new MenuItem({ id: "complete", label: "Mark as Complete" }) ); taskMenu.addChild( new MenuItem({ id: "cancel", label: "Cancel" }) ); taskMenu.addChild( new MenuItem({ id: "begin", label: "Begin" }) ); // create and add main menu items mainMenu.addChild( new MenuItem({ id: "edit", label: "Edit" }) ); mainMenu.addChild( new MenuItem({ id: "view", label: "View" }) ); // make task menu item open the sub-menu we defined above mainMenu.addChild( new PopupMenuItem({ id: "task", label: "Task", popup: taskMenu }) ); mainMenu.startup(); taskMenu.startup(); }); </script></body>
View demo
In the programming style example, The only magic is to resolve an element in the menu item to the label of the menu item. Then embedded menus are automatically considered as menu items.
We have mentioned that a sub-menu is only a popup attribute of a menu item. This means that the relationship between menus is dynamically changed, and it is possible that multiple menu items reference the same menu instance as their submenus. Based on the above example, we can allocate the taskmenu to another pop-up menu of dijit/popupmenuitem in a completely different UI part.
This is not mentioned in the preceding example, but a task that is completely feasible in programming is to re-allocate sub-menus at runtime. To complete this task, you can simply reset the popup attribute on dijit/popupmenuitem.
To point to a new sub-menu. In addition, you can delete/destroy the original popupmenuitem (if it is no longer used, you can also delete the sub menu) and insert a new appropriate popup value.
Menu accessibilityAll menu series share the same accessibility provided by dijit. This means that the correct Aria role is used to provide auxiliary technologies to inform users of the control they are interacting with and how they are using it. Keyboard accessibility is used to help users with low vision and no mouse. The tab key moves the focus in the menu key, and the direction key is used to move the focus in the menu and the sub-menu.
Menu iconJust like dijit/form/button and its subclass, The dijit/menuitem instance has an iconclass attribute. This can be used to add a special CSS attribute to a menu item template to display icons in the menu. The following is a simple example of how to implement icons. Examples of declarative and programming styles are also provided.
Declarative Style<script> // Require dependencies require([ "dijit/MenuItem", "dojo/parser", "dojo/domReady!" ], function(MenuItem, parser){ parser.parse(); });</script><div id="task" data-dojo-type="dijit.MenuItem" data-dojo-props="iconClass: 'taskIcon'"> Task</div>Programming style
// Require dependenciesrequire([ "dijit/MenuItem", "dojo/domReady!"], function(MenuItem){ new MenuItem({ id: "task", label: "Task", iconClass: "taskIcon" });});
The iconclass attribute points to a CSS class. We can define this class in our stylesheet -- for example:
<style> .taskIcon { background: url("./icons/task.png"); width: 24px; height: 24px; }</style>
View demo
Menu ExtensionSo far, the djijit/menu we use is called "navigation menu"-that is, it is statically placed on the page. We can easily change this menu to a context pop-up menu.
require([ "dijit/Menu", "dojo/domReady!"], function(Menu){ var mainMenu = new Menu({ id: "mainMenu", contextMenuForWindow: true });});
This provides us with a context menu. You can configure the up and down menus for certain elements by passing in the DOM nodes array or passing in the targetnodeids attribute we set when creating the menu.
require([ "dijit/Menu", "dojo/domReady!"], function(Menu){ var taskMenu = new Menu({ id: "taskMenu", targetNodeIds: ["task_0", "task_1", "task_2"] });});
If you need to update the binding relationship between the menu and elements after creating the menu, you can use the binddomnode and unbinddomnode methods on the menu widget.
Our next demo provides a global context menu and another context menu exclusive to a task items.
View demo
In the demo, you can notice that there is also a "task" pop-up menu in the Global Context (reuse the context menu of task items ). Even so, until you click a task item, otherwise there is no "current" item task-for this reason, this menu item was invalid at the beginning, then it is valid when the user selects an item.
require(["dijit/registry"], function(registry){ registry.byId("task").set("disabled", false);}Declarative Style
<body class="claro"> <script> // Require dependencies require([ "dijit/Menu", "dijit/MenuItem", "dijit/MenuBar", "dijit/MenuBarItem", "dijit/PopupMenuBarItem", "dojo/parser", "dojo/domReady!" ], function(Menu, MenuItem, MenuBar, MenuBarItem, PopupMenuBarItem, parser){ parser.parse; }); </script> <div id="mainMenu" data-dojo-type="dijit.MenuBar"> <div id="edit" data-dojo-type="dijit.MenuBarItem">Edit</div> <div id="view" data-dojo-type="dijit.MenuBarItem">View</div> <div id="task" data-dojo-type="dijit.PopupMenuBarItem"> <span>Task</span> <div id="taskMenu" data-dojo-type="dijit.Menu"> <div id="complete" data-dojo-type="dijit.MenuItem"> Mark as Complete </div> <div id="cancel" data-dojo-type="dijit.MenuItem"> Cancel </div> <div id="begin" data-dojo-type="dijit.MenuItem"> Begin </div> </div> </div><!-- end of sub-menu --> </div></body>
View demo
Programming style<body class="claro"> <div id="mainMenu"></div> <script> // Require dependencies require([ "dijit/Menu", "dijit/MenuItem", "dijit/MenuBar", "dijit/MenuBarItem" "dijit/PopupMenuBarItem", "dojo/domReady!" ], function(Menu, MenuItem, MenuBar, MenuBarItem, PopupMenuBarItem){ // create the Menu container var mainMenu = new MenuBar({ }, "mainMenu"); // create Menu container and child MenuItems // for our sub-menu (no srcNodeRef; we will //add it under a PopupMenuItem) var taskMenu = new Menu({ id: "taskMenu" }); // define the task sub-menu items taskMenu.addChild( new MenuItem({ id: "complete", label: "Mark as Complete" }) ); taskMenu.addChild( new MenuItem({ id: "cancel", label: "Cancel" }) ); taskMenu.addChild( new MenuItem({ id: "begin", label: "Begin" }) ); // create and add main menu items mainMenu.addChild( new MenuBarItem({ id: "edit", label: "Edit" }) ); mainMenu.addChild( new MenuBarItem({ id: "view", label: "View" }) ); // make task menu item open the sub-menu we defined above mainMenu.addChild( new PopupMenuBarItem({ id: "task", label: "Task", popup: taskMenu }) ); mainMenu.startup(); taskMenu.startup(); }); </script></body>
View demo
Menu in the controlThere are a series of mixed controls in dijit with menus. These include dijit/form/combobutton and dijit/form/dropdownbutton. These principles are very similar to how we create embedded menus. For example, we can create a combobutton as follows:
<body class="claro"> <script> // Require dependencies require([ "dijit/Menu", "dijit/MenuItem", "dijit/form/ComboButton", "dojo/parser", "dojo/domReady!" ], function(Menu, MenuItem, ComboButton, parser){ parser.parse; }); </script> <div id="comboButton" data-dojo-type="dijit.form.ComboButton"> <span>Do Something</span> <div data-dojo-type="dijit.Menu"> <div data-dojo-type="dijit.MenuItem">Edit</div> <div data-dojo-type="dijit.MenuItem">View</div> <div data-dojo-type="dijit.MenuItem">Task</div> </div> </div></body>
Programming style
<body class="claro"> <div id="comboBtn"></div> <script> // Require dependencies require([ "dijit/Menu", "dijit/MenuItem", "dijit/form/ComboButton", "dojo/domReady!" ], function(Menu, MenuItem, ComboButton) { var menu = new Menu({ id: "mainMenu" }); menu.addChild( new MenuItem({ label: "Edit" }) ); menu.addChild( new MenuItem({ label: "View" }) ); menu.addChild( new MenuItem({ label: "Task" }) ); // create a ComboButton and add the Menu var comboBtn = new ComboButton({ label: "Do Something", dropDown: menu }, "comboBtn"); menu.startup(); comboBtn.startup(); }); </script></body>
View demo
Further steps
There are countless ways to use menus, and each method has its own use scenario. Dijit provides you with a robust menu class and a series of common UI modes. You can interact with menus and configure and change the appearance of menu items. Many other events are not covered in this tutorial, but you can familiarize yourself with them:
Onitemhover
It is called when the user's pointer has moved the menu item.
Onitemunhover
When the user's pointer leaves menuitem, it is called.
Onitemclick
Called when a menu item is clicked. This is essentially an optional method to connect to the onclick of each menu item.
Onopen
Called when the menu is displayed or opened.
Onclose
It is called when the menu is hidden or disabled.
View the API documentation to obtain more details about the menu control. Just like any other dijit widget, when your requirements cannot be met, dijit/menu and other associated classes can be expanded.
Conclusion
Menus in dijit allow us to easily create and interact with menus and submenus. We have seen how to create various menus by declaring styles and programming styles. This is only a small part of the dijit arsenal. dijit is committed to creating a better user experience.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
