").text("Selected: " + ui.item.text()).appendTo("#log"); } }); - + $(".menubar-icons").menubar({ menuIcon: true, buttons: true, @@ -34,39 +34,8 @@ }); }); - diff --git a/themes/base/jquery.ui.base.css b/themes/base/jquery.ui.base.css index 9a18856c1..a359c2ba4 100644 --- a/themes/base/jquery.ui.base.css +++ b/themes/base/jquery.ui.base.css @@ -15,6 +15,7 @@ @import url("jquery.ui.datepicker.css"); @import url("jquery.ui.dialog.css"); @import url("jquery.ui.menu.css"); +@import url("jquery.ui.menubar.css"); @import url("jquery.ui.progressbar.css"); @import url("jquery.ui.resizable.css"); @import url("jquery.ui.selectable.css"); diff --git a/themes/base/jquery.ui.menu.css b/themes/base/jquery.ui.menu.css index ed4b4a13a..c616cf2c5 100644 --- a/themes/base/jquery.ui.menu.css +++ b/themes/base/jquery.ui.menu.css @@ -7,38 +7,14 @@ * * http://docs.jquery.com/UI/Menu#theming */ -.ui-menu { - list-style:none; - padding: 2px; - margin: 0; - display:block; - outline: none; -} -.ui-menu .ui-menu { - margin-top: -3px; -} -.ui-menu .ui-menu-item { - margin:0; - padding: 0; - zoom: 1; - width: 100%; -} -.ui-menu .ui-menu-item a { - text-decoration:none; - display:block; - padding: 2px .4em; - line-height:1.5; - zoom:1; - font-weight: normal; -} +.ui-menu { list-style:none; padding: 2px; margin: 0; display:block; outline: none; } +.ui-menu .ui-menu { margin-top: -3px; position: absolute; } +.ui-menu .ui-menu-item { margin: 0; padding: 0; zoom: 1; width: 100%; } +.ui-menu .ui-menu-item a { text-decoration: none; display: block; padding: 2px .4em; line-height: 1.5; zoom: 1; font-weight: normal; } .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 .ui-menu-item a.ui-state-active { font-weight: normal; margin: -1px; } -/* nested menus */ -.ui-menu .ui-menu { position: absolute; } +.ui-menu li.ui-state-disabled { font-weight: normal; padding: .0em .4em; margin: .4em 0 .2em; line-height: 1.5; } /* icon support */ .ui-menu-icons { position: relative; } @@ -48,4 +24,4 @@ .ui-menu .ui-icon { position: absolute; top: .2em; left: .2em; } /* right-aligned */ -.ui-menu .ui-menu-icon { position: static; float: right; } \ No newline at end of file +.ui-menu .ui-menu-icon { position: static; float: right; } diff --git a/themes/base/jquery.ui.menubar.css b/themes/base/jquery.ui.menubar.css new file mode 100644 index 000000000..95c42ae9e --- /dev/null +++ b/themes/base/jquery.ui.menubar.css @@ -0,0 +1,15 @@ +/* + * jQuery UI Menubar @VERSION + * + * Copyright 2011, AUTHORS.txt (http://jqueryui.com/about) + * Dual licensed under the MIT or GPL Version 2 licenses. + * http://jquery.org/license + */ +.ui-menubar { list-style: none; margin: 0; padding-left: 0; } + +.ui-menubar-item { float: left; } + +.ui-menubar .ui-button { float: left; font-weight: normal; border-top-width: 0 !important; border-bottom-width: 0 !important; margin: 0; outline: none; } +.ui-menubar .ui-menubar-link { border-right: 1px dashed transparent; border-left: 1px dashed transparent; } + +.ui-menubar .ui-menu { width: 200px; position: absolute; z-index: 9999; } -- cgit v1.2.3 From 40aa8f57151b0a01f33389482e5676725fd50ae7 Mon Sep 17 00:00:00 2001 From: kborchers Date: Thu, 7 Jul 2011 09:29:50 -0500 Subject: Menubar: Added the autoExpand option and modified the default demo to show functionality --- demos/menubar/default.html | 1 + ui/jquery.ui.menubar.js | 23 ++++++++++++++++++++++- 2 files changed, 23 insertions(+), 1 deletion(-) (limited to 'demos/menubar/default.html') diff --git a/demos/menubar/default.html b/demos/menubar/default.html index 57a3209ce..6bd67b64a 100644 --- 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 39e75924e..3df6d9a53 100644 --- 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( "" ); + + 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 ) { -- cgit v1.2.3 From 7856b264a297d78762f599611580804b92afd1c0 Mon Sep 17 00:00:00 2001 From: Jörn Zaefferer Date: Wed, 13 Jul 2011 11:03:25 -0400 Subject: Menubar: Trigger select event after running all other methods. Allows the select-handler to destroy the widget without errors. --- demos/menubar/default.html | 14 ++++++++------ ui/jquery.ui.menubar.js | 6 +++--- 2 files changed, 11 insertions(+), 9 deletions(-) (limited to 'demos/menubar/default.html') diff --git a/demos/menubar/default.html b/demos/menubar/default.html index 6bd67b64a..adee4afc9 100644 --- a/demos/menubar/default.html +++ b/demos/menubar/default.html @@ -13,13 +13,17 @@ diff --git a/ui/jquery.ui.menubar.js b/ui/jquery.ui.menubar.js index 3df6d9a53..e28ea3e3c 100644 --- a/ui/jquery.ui.menubar.js +++ b/ui/jquery.ui.menubar.js @@ -49,10 +49,10 @@ $.widget( "ui.menubar", { }, select: function( event, ui ) { ui.item.parents( "ul.ui-menu:last" ).hide(); - that._trigger( "select", event, ui ); that._close(); // TODO what is this targetting? there's probably a better way to access it $(event.target).prev().focus(); + that._trigger( "select", event, ui ); } }) .hide() @@ -94,7 +94,7 @@ $.widget( "ui.menubar", { if( that.options.autoExpand ) { clearTimeout( that.timer ); } - + that._open( event, menu ); } }) @@ -120,7 +120,7 @@ $.widget( "ui.menubar", { .attr( "role", "menuitem" ) .attr( "aria-haspopup", "true" ) .wrapInner( "" ); - + if ( that.options.autoExpand ) { input.bind( "mouseleave.menubar", function( event ) { that.timer = setTimeout( function() { -- cgit v1.2.3