Menubar: Allow structures other than just UL/LI

3 files changed, 73 insertions, 15 deletions

diff --git a/demos/menubar/default.html b/demos/menubar/default.html
index 5e9ca2145..718b4a1bf 100644
--- a/demos/menubar/default.html
+++ b/demos/menubar/default.html
@@ -35,6 +35,15 @@
 			},
 			select: select
 		});
+
+		$("#bar3").menubar({
+			position: {
+				within: $("#demo-frame").add(window).first()
+			},
+			select: select,
+			items: ".menubarItem",
+			menuElement: ".menuElement"
+		});
 	});
 	</script>
 	<style>
@@ -136,6 +145,52 @@
 	</li>
 </ul>
 
+<div id="bar3" class="menubar">
+	<div class="menubarItem">
+		<a href="#File">File</a>
+		<div class="menuElement">
+			<div><a href="#Open...">Open...</a></div>
+			<div class="ui-state-disabled">Open recent...</div>
+			<div><a href="#Save">Save</a></div>
+			<div><a href="#Save as...">Save as...</a></div>
+			<div><a href="#Close">Close</a></div>
+			<div><a href="#Quit">Quit</a></div>
+		</div>
+	</div>
+	<div class="menubarItem">
+		<a href="#Edit">Edit</a>
+		<div class="menuElement">
+			<div><a href="#Copy">Copy</a></div>
+			<div><a href="#Cut">Cut</a></div>
+			<div class="ui-state-disabled">Paste</div>
+		</div>
+	</div>
+	<div class="menubarItem">
+		<a href="#View">View</a>
+		<div class="menuElement">
+			<div><a href="#Fullscreen">Fullscreen</a></div>
+			<div><a href="#Fit into view">Fit into view</a></div>
+			<div>
+				<a href="#Encoding">Encoding</a>
+				<div class="menuElement">
+					<div class="ui-state-disabled"><a href="#Auto-detect">Auto-detect</a></div>
+					<div><a href="#UTF-8">UTF-8</a></div>
+					<div>
+					  <a href="#UTF-16">UTF-16</a>
+				      <div class="menuElement">
+				         <div><a href="#Option 1">Option 1</a></div>
+				         <div><a href="#Option 2">Option 2</a></div>
+				         <div class="ui-state-disabled"><a href="#Option 3">Option 3</a></div>
+				         <div><a href="#Option 4">Option 4</a></div>
+				      </div>
+				   </div>
+				</div>
+			</div>
+			<div><a href="#Customize...">Customize...</a></div>
+		</div>
+	</div>
+</div>
+
 <div class="ui-widget" style="margin-top:2em; font-family:Arial">
 	Log:
 	<div id="log" style="height: 100px; width: 300px; overflow: auto;" class="ui-widget-content"></div>
diff --git a/themes/base/jquery.ui.menu.css b/themes/base/jquery.ui.menu.css
index c616cf2c5..33a9498fb 100644
--- a/themes/base/jquery.ui.menu.css
+++ b/themes/base/jquery.ui.menu.css
@@ -14,7 +14,7 @@
 .ui-menu .ui-menu-item a.ui-state-focus,
 .ui-menu .ui-menu-item a.ui-state-active { font-weight: normal; margin: -1px; }
 
-.ui-menu li.ui-state-disabled { font-weight: normal; padding: .0em .4em; margin: .4em 0 .2em; line-height: 1.5; }
+.ui-menu .ui-state-disabled { font-weight: normal; padding: .0em .4em; margin: .4em 0 .2em; line-height: 1.5; }
 
 /* icon support */
 .ui-menu-icons { position: relative; }
diff --git a/ui/jquery.ui.menubar.js b/ui/jquery.ui.menubar.js
index 673493366..3c564d461 100644
--- a/ui/jquery.ui.menubar.js
+++ b/ui/jquery.ui.menubar.js
@@ -22,6 +22,8 @@ $.widget( "ui.menubar", {
 	options: {
 		autoExpand: false,
 		buttons: false,
+		items: "li",
+		menuElement: "ul",
 		menuIcon: false,
 		position: {
 			my: "left top",
@@ -30,7 +32,7 @@ $.widget( "ui.menubar", {
 	},
 	_create: function() {
 		var that = this;
-		var items = this.items = this.element.children( "li" )
+		var items = this.items = this.element.children( this.options.items )
 			.addClass( "ui-menubar-item" )
 			.attr( "role", "presentation" )
 			.children( "button, a" );
@@ -42,7 +44,7 @@ $.widget( "ui.menubar", {
 			.attr( "role", "menubar" );
 		this._focusable( items );
 		this._hoverable( items );
-		items.next( "ul" )
+		items.siblings( this.options.menuElement )
 			.menu({
 				position: {
 					within: this.options.position.within
@@ -53,7 +55,8 @@ $.widget( "ui.menubar", {
 					// TODO what is this targetting? there's probably a better way to access it
 					$(event.target).prev().focus();
 					that._trigger( "select", event, ui );
-				}
+				},
+				items: that.options.menuElement
 			})
 			.hide()
 			.attr({
@@ -78,7 +81,7 @@ $.widget( "ui.menubar", {
 		items.each(function() {
 			var input = $(this),
 				// TODO menu var is only used on two places, doesn't quite justify the .each
-				menu = input.next( "ul" );
+				menu = input.next( that.options.menuElement );
 
 			input.bind( "click.menubar focus.menubar mouseenter.menubar", function( event ) {
 				// ignore triggered focus event
@@ -166,7 +169,7 @@ $.widget( "ui.menubar", {
 	},
 
 	_destroy : function() {
-		var items = this.element.children( "li" )
+		var items = this.element.children( this.options.items )
 			.removeClass( "ui-menubar-item" )
 			.removeAttr( "role" )
 			.children( "button, a" );
@@ -243,7 +246,7 @@ $.widget( "ui.menubar", {
 			}, this.options.position ) )
 			.removeAttr( "aria-hidden" )
 			.attr( "aria-expanded", "true" )
-			.menu("focus", event, menu.children( "li" ).first() )
+			.menu("focus", event, menu.children( ".ui-menu-item" ).first() )
 			// TODO need a comment here why both events are triggered
 			.focus()
 			.focusin();
@@ -253,44 +256,44 @@ $.widget( "ui.menubar", {
 	// TODO refactor this and the next three methods
 	_prev: function( event, button ) {
 		button.attr( "tabIndex", -1 );
-		var prev = button.parent().prevAll( "li" ).children( ".ui-button" ).eq( 0 );
+		var prev = button.parent().prevAll( this.options.items ).children( ".ui-button" ).eq( 0 );
 		if ( prev.length ) {
 			prev.removeAttr( "tabIndex" )[0].focus();
 		} else {
-			var lastItem = this.element.children( "li:last" ).children( ".ui-button:last" );
+			var lastItem = this.element.children( this.options.items ).last().children( ".ui-button:last" );
 			lastItem.removeAttr( "tabIndex" )[0].focus();
 		}
 	},
 
 	_next: function( event, button ) {
 		button.attr( "tabIndex", -1 );
-		var next = button.parent().nextAll( "li" ).children( ".ui-button" ).eq( 0 );
+		var next = button.parent().nextAll( this.options.items ).children( ".ui-button" ).eq( 0 );
 		if ( next.length ) {
 			next.removeAttr( "tabIndex")[0].focus();
 		} else {
-			var firstItem = this.element.children( "li:first" ).children( ".ui-button:first" );
+			var firstItem = this.element.children( this.options.items ).first().children( ".ui-button:first" );
 			firstItem.removeAttr( "tabIndex" )[0].focus();
 		}
 	},
 
 	// TODO rename to parent
 	_left: function( event ) {
-		var prev = this.active.parent().prevAll( "li:eq(0)" ).children( ".ui-menu" ).eq( 0 );
+		var prev = this.active.parent().prevAll( this.options.items ).first().children( ".ui-menu" ).eq( 0 );
 		if ( prev.length ) {
 			this._open( event, prev );
 		} else {
-			var lastItem = this.element.children( "li:last" ).children( ".ui-menu:first" );
+			var lastItem = this.element.children( this.options.items ).last().children( ".ui-menu:first" );
 			this._open( event, lastItem );
 		}
 	},
 
 	// TODO rename to child (or something like that)
 	_right: function( event ) {
-		var next = this.active.parent().nextAll( "li:eq(0)" ).children( ".ui-menu" ).eq( 0 );
+		var next = this.active.parent().nextAll( this.options.items ).first().children( ".ui-menu" ).eq( 0 );
 		if ( next.length ) {
 			this._open( event, next );
 		} else {
-			var firstItem = this.element.children( "li:first" ).children( ".ui-menu:first" );
+			var firstItem = this.element.children( this.options.items ).first().children( ".ui-menu:first" );
 			this._open( event, firstItem );
 		}
 	}