Menubar: Added the autoExpand option and modified the default demo to show functionality

diff --git a/demos/menubar/default.html b/demos/menubar/default.html
index 57a3209ceb1668a1f8ee5cb163cf34af4cd98369..6bd67b64af62f38a43379a6efef7ad845774c66d 100644 (file)
--- a/demos/menubar/default.html
+++ b/demos/menubar/default.html
@@ -23,6 +23,7 @@
                });
 
                $(".menubar-icons").menubar({
+                       autoExpand: true,
                        menuIcon: true,
                        buttons: true,
                        position: {

diff --git a/ui/jquery.ui.menubar.js b/ui/jquery.ui.menubar.js
index 39e75924eaf307e2b0001a142edaf4de6d24e38d..3df6d9a53df793e03e094d02a9b1356fc17064d9 100644 (file)
--- a/ui/jquery.ui.menubar.js
+++ b/ui/jquery.ui.menubar.js
@@ -20,6 +20,7 @@
 $.widget( "ui.menubar", {
        version: "@VERSION",
        options: {
+               autoExpand: false,
                buttons: false,
                menuIcon: false,
                position: {
@@ -89,7 +90,11 @@ $.widget( "ui.menubar", {
                                        that._close();
                                        return;
                                }
-                               if ( ( that.open && event.type == "mouseenter" ) || event.type == "click" ) {
+                               if ( ( that.open && event.type == "mouseenter" ) || event.type == "click" || that.options.autoExpand ) {
+                                       if( that.options.autoExpand ) {
+                                               clearTimeout( that.timer );
+                                       }
+                                       
                                        that._open( event, menu );
                                }
                        })
@@ -115,6 +120,22 @@ $.widget( "ui.menubar", {
                        .attr( "role", "menuitem" )
                        .attr( "aria-haspopup", "true" )
                        .wrapInner( "<span class='ui-button-text'></span>" );
+                       
+                       if ( that.options.autoExpand ) {
+                               input.bind( "mouseleave.menubar", function( event ) {
+                                       that.timer = setTimeout( function() {
+                                               that._close();
+                                       }, 150 );
+                               });
+                               menu.bind( "mouseleave.menubar", function( event ) {
+                                       that.timer = setTimeout( function() {
+                                               that._close();
+                                       }, 150 );
+                               })
+                               .bind( "mouseenter.menubar", function( event ) {
+                                       clearTimeout( that.timer );
+                               });
+                       }
 
                        // TODO review if these options are a good choice, maybe they can be merged
                        if ( that.options.menuIcon ) {