Menubar: Allow structures other than just UL/LI

diff --git a/demos/menubar/default.html b/demos/menubar/default.html
index 5e9ca2145df0edcd1252fc04d9e6ba920ecc2818..718b4a1bffd68aaafe242cb1ce791a956df0e88b 100644 (file)
--- 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 c616cf2c55c202b350bde21082593e253f567e4a..33a9498fb92f4ed3b5cacdd96805f7fb1dc0d5b6 100644 (file)
--- 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 673493366d38534d7a6fcf44daf0285265bcd960..3c564d4613f4edcddbd733d11708cb1a41176a4f 100644 (file)
--- 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 );
                }
        }