<script type="text/javascript" src="../../../ui/jquery.ui.position.js"></script>
<script type="text/javascript" src="../../../ui/jquery.ui.button.js"></script>
<script type="text/javascript" src="../../../ui/jquery.ui.menu.js"></script>
- <script type="text/javascript" src="flyoutmenu.js"></script>
<script type="text/javascript" src="menubar.js"></script>
<!--
<script type="text/javascript" src="http://jqueryui.com/themeroller/themeswitchertool/"></script>
$(".menubar").menubar({
select: function(event, ui) {
$("<div/>").text("Selected: " + ui.item.text()).appendTo("#log");
- ui.item.parents("ul:last").prev().focus()
}
});
});
<body>
<div class="menubar ui-widget-header">
+ <!--
+ <a href="#">About...</a>
+ -->
<a href="#">File</a>
<ul>
<li><a href="#">Open...</a></li>
*/
(function($) {
+// TODO take non-menubar buttons into account
$.widget("ui.menubar", {
_create: function() {
var self = this;
var items = this.element.children("button, a");
items.next("ul").each(function(i, elm) {
- $(elm).flyoutmenu({
- select: self.options.select
- }).hide().addClass("ui-menu-flyout").keydown(function(event) {
+ $(elm).menu({
+ select: function(event, ui) {
+ ui.item.parents("ul:last").hide()
+ self.options.select.apply(this, arguments);
+ }
+ }).hide().keydown(function(event) {
var menu = $(this);
if (menu.is(":hidden"))
return;
},
_open: function(event, menu) {
- this.active && this.active.flyoutmenu("hide");
- this.active = menu.flyoutmenu("show").position({
+ this.active && this.active.menu("closeAll").hide();
+ this.active = menu.show().position({
my: "left top",
at: "left bottom",
offset: "0 -1",
},
left: function(event) {
- var prev = this.active.prevAll( ".ui-menu-flyout" ).eq( 0 );
+ var prev = this.active.prevAll( ".ui-menu" ).eq( 0 );
if (prev.length) {
this._open(event, prev);
} else {
- this._open(event, this.element.children(".ui-menu-flyout:last"));
+ this._open(event, this.element.children(".ui-menu:last"));
}
},
right: function(event) {
- var next = this.active.nextAll( ".ui-menu-flyout" ).eq( 0 );
+ var next = this.active.nextAll( ".ui-menu" ).eq( 0 );
if (next.length) {
this._open(event, next);
} else {
- this._open(event, this.element.children(".ui-menu-flyout:first"));
+ this._open(event, this.element.children(".ui-menu:first"));
}
}
});