Use the Dojo Development menu application

Background information

The menu application is the crowning touch of the Web page. When the user right-clicks in the browser, the browser pops up its own menu, displaying the available menu bars such as "View Source code", "Copy", "Paste", and so on. By using the menu from the browser, users can easily copy, paste and other operations. However, many times, web site developers will consider banning users from the menus that come with the browser, or want users to use a developer custom menu. A simple custom menu is shown in the following illustration:

Figure 1. customizing menus

The use of custom menus can make it easy for users to quickly navigate to an operation, enhance the interactivity of the user interface and improve the user experience.

Dojo provides the menu library, in addition to the implementation of the basic menu functions, but also add to the pop-up menu, icon effect, keyboard response functions such as support, to facilitate the development of the developer's menu development process. This article will first introduce the Dojo menu implementation principle, and from the creation of the simplest right-click menu, introduce the static and dynamic menu of the right menu to create two ways, and finally give an example of how to develop the context of Dojo menu, Pull-down menu, static menu three kinds of menus.

Right Key menu Implementation principle

By default, when a user right-clicks in the browser, the browser triggers the Document.oncontextmemu event, and the browser handles the event by default, pop-up the browser's menu with the right button.

The basic principle of implementing a custom right-click menu is that the menu is hidden by default, and when the Document.oncontextmemu event is triggered, use the JavaScript Action menu node's style property to display the menu, and use JavaScript to listen to the mouse The onclick event, when the event is executed, determines whether the mouse click position is in the menu area, and if not, hides the menu by manipulating the style of the menu.

Dojo's approach to implementing the right menu is also the principle, but dojo encapsulates the process of low-level events, and developers can implement complex menus directly using the simple APIs provided by dojo. See below for the specific implementation method.

Dojo menu Use

Including the right-click menu, Dojo offers three types of menus: Context menus (right-click menu and pop-up menu), Pull-down menus, and static menus. Because other menus are used in the same way as the right-click menu, this article starts by creating a simple right-click menu and then introduces the function and creation of the three menus.

Simple Right-click menu Example

The most widely used menu in the context menu, Pull-down menu, and static menu, which is supported by Dojo, is the right menu in the context menu, and the simplest right-click menu is shown in the following illustration:

Figure 2. Simple Right-click menu

User in "Please right-click on me!" Right-click to see the Cut, Copy, Paste vertical Three columns of the right menu. As you can see, the "right-click menu" created by Dojo is pretty and fits the user's habits, and the following menu is implemented in both "Static creation" and "Dynamic Creation":