Menubar: Add support for non-menu items, adding a 'About' button to each menubar in the demo

Author: jzaefferer

demos/menubar/default.html

@@ -55,6 +55,7 @@
 
 <div class="demo">
 <ul id="bar1" class="menubar">
+	<li><a href="#About">About</a></li>
 	<li>
 		<a href="#File">File</a>
 		<ul>
@@ -101,6 +102,7 @@
 </ul>
 
 <ul id="bar2" class="menubar-icons">
+	<li><a href="#About">About</a></li>
 	<li>
 		<a href="#File">File</a>
 		<ul>
@@ -147,6 +149,7 @@
 </ul>
 
 <div id="bar3" class="menubar">
+	<div class="menubarItem"><a href="#About">About</a></div>
 	<div class="menubarItem">
 		<a href="#File">File</a>
 		<div class="menuElement">

ui/jquery.ui.menubar.js

@@ -86,60 +86,63 @@ $.widget( "ui.menubar", {
 				// TODO menu var is only used on two places, doesn't quite justify the .each
 				menu = input.next( that.options.menuElement );
 
-			input.bind( "click.menubar focus.menubar mouseenter.menubar", function( event ) {
-				// ignore triggered focus event
-				if ( event.type === "focus" && !event.originalEvent ) {
-					return;
-				}
-				event.preventDefault();
-				// TODO can we simplify or extractthis check? especially the last two expressions
-				// there's a similar active[0] == menu[0] check in _open
-				if ( event.type === "click" && menu.is( ":visible" ) && that.active && that.active[0] === menu[0] ) {
-					that._close();
-					return;
-				}
-				if ( ( that.open && event.type === "mouseenter" ) || event.type === "click" || that.options.autoExpand ) {
-					if( that.options.autoExpand ) {
-						clearTimeout( that.closeTimer );
+			// might be a non-menu button
+			if ( menu.length ) {
+				input.bind( "click.menubar focus.menubar mouseenter.menubar", function( event ) {
+					// ignore triggered focus event
+					if ( event.type === "focus" && !event.originalEvent ) {
+						return;
 					}
-
-					that._open( event, menu );
-				}
-			})
-			.bind( "keydown", function( event ) {
-				switch ( event.keyCode ) {
-				case $.ui.keyCode.SPACE:
-				case $.ui.keyCode.UP:
-				case $.ui.keyCode.DOWN:
-					that._open( event, $( this ).next() );
 					event.preventDefault();
-					break;
-				case $.ui.keyCode.LEFT:
-					that.previous( event );
-					event.preventDefault();
-					break;
-				case $.ui.keyCode.RIGHT:
-					that.next( event );
-					event.preventDefault();
-					break;
-				}
-			})
-			.addClass( "ui-button ui-widget ui-button-text-only ui-menubar-link" )
-			.attr( "role", "menuitem" )
-			.attr( "aria-haspopup", "true" )
-			.wrapInner( "<span class='ui-button-text'></span>" );
+					// TODO can we simplify or extractthis check? especially the last two expressions
+					// there's a similar active[0] == menu[0] check in _open
+					if ( event.type === "click" && menu.is( ":visible" ) && that.active && that.active[0] === menu[0] ) {
+						that._close();
+						return;
+					}
+					if ( ( that.open && event.type === "mouseenter" ) || event.type === "click" || that.options.autoExpand ) {
+						if( that.options.autoExpand ) {
+							clearTimeout( that.closeTimer );
+						}
 
-			// TODO review if these options are a good choice, maybe they can be merged
-			if ( that.options.menuIcon ) {
-				input.addClass( "ui-state-default" ).append( "<span class='ui-button-icon-secondary ui-icon ui-icon-triangle-1-s'></span>" );
-				input.removeClass( "ui-button-text-only" ).addClass( "ui-button-text-icon-secondary" );
-			}
+						that._open( event, menu );
+					}
+				})
+				.bind( "keydown", function( event ) {
+					switch ( event.keyCode ) {
+					case $.ui.keyCode.SPACE:
+					case $.ui.keyCode.UP:
+					case $.ui.keyCode.DOWN:
+						that._open( event, $( this ).next() );
+						event.preventDefault();
+						break;
+					case $.ui.keyCode.LEFT:
+						that.previous( event );
+						event.preventDefault();
+						break;
+					case $.ui.keyCode.RIGHT:
+						that.next( event );
+						event.preventDefault();
+						break;
+					}
+				})
+				.attr( "aria-haspopup", "true" );
 
-			if ( !that.options.buttons ) {
-				// TODO ui-menubar-link is added above, not needed here?
-				input.addClass( "ui-menubar-link" ).removeClass( "ui-state-default" );
+				// TODO review if these options (menuIcon and buttons) are a good choice, maybe they can be merged
+				if ( that.options.menuIcon ) {
+					input.addClass( "ui-state-default" ).append( "<span class='ui-button-icon-secondary ui-icon ui-icon-triangle-1-s'></span>" );
+					input.removeClass( "ui-button-text-only" ).addClass( "ui-button-text-icon-secondary" );
+				}
 			}
 
+			input
+				.addClass( "ui-button ui-widget ui-button-text-only ui-menubar-link" )
+				.attr( "role", "menuitem" )
+				.wrapInner( "<span class='ui-button-text'></span>" );
+
+			if ( that.options.buttons ) {
+				input.removeClass( "ui-menubar-link" ).addClass( "ui-state-default" );
+			}
 		});
 		that._on( {
 			keydown: function( event ) {