CODEWITHSUNDEEP
javascriptwidgetdojo
Basel Shishani
Basel Shishani

Reputation: 8197

Controlling dijit.MenuBar with MouseOver events

In Dojo, is it possible to configure dijit.MenuBar so that the menus are triggered by MouseOver and MouseOut events? Actually this behavior is available already, but it is switched on or off by initial or successive mouse click events - so initially, MouseOver would not cause menu popup, but if the user clicks on a menu item, the menubar then becomes responsive to MouseOver events. A successive mouse click would again switch off this behavior.

What I would like to have is menus and sub-menus popping up based on MouseOver events without interference from click events. Please check the examples at http://dojotoolkit.org/reference-guide/dijit/MenuBar.html to see what I mean.

Upvotes: 1

Views: 1662

Answers (2)

Tariq
Tariq

Reputation: 2871

Here is an example that extends the solution of 'Hugomg' to case of unhovering the menu and the sub-menu:
[enter link description here][1]

[1]: http://jsfiddle.net/vg10c9md/2/

Upvotes: 0

hugomg
hugomg

Reputation: 69994

Your question piqued my interest enough to make a working solution.

I checked the dijit._MenuBase source code at dijit/Menu.js and apparently there is a this.isActive flag that is checked before proceeding. So I created a subclass that just sets this flag as true beforehand:

_ActivateOnMouseoverMixin = dojo.declare(null, {
    onItemHover: function(item){
        if(!this.isActive){
            this._markActive();
        }
        this.inherited(arguments);
    }
});

ActiveMenuBar = dojo.declare([dijit.MenuBar, _ActivateOnMouseoverMixin], {});

As a bonus, you can also modify the delay with the popupDelay variable (I changed it to be faster in the example)

I have no idea if there is another, more sane, way to do the same thing.

Upvotes: 2

Related Questions