mirror of
https://github.com/jquery/jquery-ui.git
synced 2024-11-21 11:04:24 +00:00
Menu: Overhauled menubar, again starting with Michael Lang's fork. Added
working keyboard navigation, including nested menus. Still need to properly style the menu buttons, e.g. highlight the button of the currently open menu.
This commit is contained in:
jzaefferer
parent
68c13cd6a6
commit
f8091f761c
@ -34,14 +34,17 @@ $.widget("ui.flyoutmenu", {
|
||||
}).keydown(function(event) {
|
||||
if (self.element.is(":hidden"))
|
||||
return;
|
||||
event.stopPropagation();
|
||||
switch (event.keyCode) {
|
||||
case $.ui.keyCode.LEFT:
|
||||
self.left(event);
|
||||
if (self.left(event)) {
|
||||
event.stopImmediatePropagation();
|
||||
}
|
||||
event.preventDefault();
|
||||
break;
|
||||
case $.ui.keyCode.RIGHT:
|
||||
self.right(event);
|
||||
if (self.right(event)) {
|
||||
event.stopImmediatePropagation();
|
||||
}
|
||||
event.preventDefault();
|
||||
break;
|
||||
case $.ui.keyCode.ESCAPE:
|
||||
@ -98,22 +101,18 @@ $.widget("ui.flyoutmenu", {
|
||||
at: "right top",
|
||||
of: this.activeItem
|
||||
});
|
||||
$(document).one("click", function() {
|
||||
//clicking outside menu flyouts should close all flyouts
|
||||
//$(document).find(".ui-menu-flyout").hide();
|
||||
})
|
||||
},
|
||||
_select: function(event) {
|
||||
event.stopPropagation();
|
||||
// TODO make _select cancelable?
|
||||
this._trigger( "select", event, { item: this.activeItem } );
|
||||
//this.activate(event, this.element.children("li").first());
|
||||
this.hide();
|
||||
},
|
||||
left: function(event) {
|
||||
var newItem = this.activeItem.parents("li").first();
|
||||
if (newItem.length) {
|
||||
this.activate(event, newItem);
|
||||
return true;
|
||||
}
|
||||
},
|
||||
right: function(event) {
|
||||
@ -121,6 +120,7 @@ $.widget("ui.flyoutmenu", {
|
||||
if (newItem.length) {
|
||||
this._open(newItem.parent());
|
||||
this.activate(event, newItem);
|
||||
return true;
|
||||
}
|
||||
},
|
||||
activate: function(event, item) {
|
||||
@ -135,12 +135,6 @@ $.widget("ui.flyoutmenu", {
|
||||
show: function() {
|
||||
this.active = this.element;
|
||||
this.element.show();
|
||||
if (this.element.hasClass("ui-menu-flyout")) {
|
||||
$(document).one("click", function() {
|
||||
//clicking outside menu flyouts should close all flyouts
|
||||
//$(document).find(".ui-menu-flyout").hide();
|
||||
})
|
||||
}
|
||||
},
|
||||
hide: function() {
|
||||
this.activeItem = this.element.children("li").first();
|
||||
|
||||
@ -10,7 +10,11 @@
|
||||
<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>
|
||||
-->
|
||||
<script type="text/javascript">
|
||||
$(function() {
|
||||
$.fn.themeswitcher && $('<div/>').css({
|
||||
@ -19,45 +23,24 @@
|
||||
top: 10
|
||||
}).appendTo(document.body).themeswitcher();
|
||||
|
||||
$(".menubar").children("a")
|
||||
.button()
|
||||
.click(function() {
|
||||
var button = $(this);
|
||||
var menu = button.next();
|
||||
if (menu.is(":visible")) {
|
||||
menu.hide();
|
||||
return false;
|
||||
}
|
||||
menu.parent().find(".ui-menu").not(menu).hide();
|
||||
menu.show().css({ left:0, top: 0 }).position({
|
||||
my: "left top",
|
||||
at: "left bottom",
|
||||
of: button
|
||||
});
|
||||
$(document).bind("click.menubar", function(event) {
|
||||
if ($(event.target).closest(".ui-menu")[0] == menu[0]) {
|
||||
return;
|
||||
}
|
||||
$(this).unbind(".menubar");
|
||||
menu.hide();
|
||||
});
|
||||
return false;
|
||||
})
|
||||
.each(function() {
|
||||
$(this).next().hide().menu({
|
||||
input: $(this),
|
||||
select: function(event, ui) {
|
||||
$("<div/>").text("Selected: " + ui.item.text()).appendTo("#log");
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
$(".menubar").menubar({
|
||||
select: function(event, ui) {
|
||||
$("<div/>").text("Selected: " + ui.item.text()).appendTo("#log");
|
||||
ui.item.parents("ul:last").prev().focus()
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
<style>
|
||||
body { font-size:62.5%; }
|
||||
.ui-menu { width: 200px; }
|
||||
.menubar .ui-menu { position: absolute; }
|
||||
.ui-menu { width: 200px; position: absolute; outline: none; }
|
||||
.ui-menu .ui-icon { float: right; }
|
||||
.ui-menu li.ui-state-disabled {
|
||||
font-weight: bold;
|
||||
padding: .0em .4em;
|
||||
margin: .4em 0 .2em;
|
||||
line-height: 1.5;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@ -66,6 +49,7 @@
|
||||
<a href="#">File</a>
|
||||
<ul>
|
||||
<li><a href="#">Open...</a></li>
|
||||
<li class="ui-state-disabled">Open recent...</li>
|
||||
<li><a href="#">Save</a></li>
|
||||
<li><a href="#">Save as...</a></li>
|
||||
<li><a href="#">Close</a></li>
|
||||
@ -75,12 +59,20 @@
|
||||
<ul>
|
||||
<li><a href="#">Copy</a></li>
|
||||
<li><a href="#">Cut</a></li>
|
||||
<li><a href="#">Paste</a></li>
|
||||
<li class="ui-state-disabled">Paste</li>
|
||||
</ul>
|
||||
<a href="#">View</a>
|
||||
<ul>
|
||||
<li><a href="#">Fullscreen</a></li>
|
||||
<li><a href="#">Fit into view</a></li>
|
||||
<li>
|
||||
<a href="#">Encoding</a>
|
||||
<ul>
|
||||
<li><a href="#">Auto-detect</a></li>
|
||||
<li><a href="#">UTF-8</a></li>
|
||||
<li><a href="#">UTF-16</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="#">Customize...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
93
tests/visual/menu/menubar.js
Normal file
93
tests/visual/menu/menubar.js
Normal file
@ -0,0 +1,93 @@
|
||||
/*
|
||||
* jQuery UI flyout menu
|
||||
* - written for jQuery UI 1.9 milestone 2 using the widget factory
|
||||
*
|
||||
* Copyright (c) 2010 Michael Lang, http://nexul.com/
|
||||
* Dual licensed under the MIT (MIT-LICENSE.txt)
|
||||
* and GPL (GPL-LICENSE.txt) licenses.
|
||||
*
|
||||
*/
|
||||
(function($) {
|
||||
|
||||
$.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) {
|
||||
var menu = $(this);
|
||||
if (menu.is(":hidden"))
|
||||
return;
|
||||
event.stopPropagation();
|
||||
switch (event.keyCode) {
|
||||
case $.ui.keyCode.LEFT:
|
||||
self.left(event);
|
||||
event.preventDefault();
|
||||
break;
|
||||
case $.ui.keyCode.RIGHT:
|
||||
self.right(event);
|
||||
event.preventDefault();
|
||||
break;
|
||||
case $.ui.keyCode.TAB:
|
||||
self[ event.shiftKey ? "left" : "right" ]( event );
|
||||
event.preventDefault();
|
||||
break;
|
||||
};
|
||||
});
|
||||
});
|
||||
items.each(function() {
|
||||
var input = $(this),
|
||||
menu = input.next("ul");
|
||||
input.bind("click focus mouseenter", function(event) {
|
||||
if (menu.length && (!/^mouse/.test(event.type) || self.active && self.active.is(":visible") )) {
|
||||
self._open(event, menu);
|
||||
}
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
}).button({
|
||||
icons: {
|
||||
secondary: menu.length ? 'ui-icon-triangle-1-s' : ''
|
||||
}
|
||||
});
|
||||
});
|
||||
$(document).click(function() {
|
||||
!$(event.target).closest(".ui-menubar").length && items.next("ul").hide();
|
||||
});
|
||||
},
|
||||
|
||||
_open: function(event, menu) {
|
||||
this.active && this.active.flyoutmenu("hide");
|
||||
this.active = menu.flyoutmenu("show").css({
|
||||
position: "absolute",
|
||||
top: 0,
|
||||
left: 0
|
||||
}).position({
|
||||
my: "left top",
|
||||
at: "left bottom",
|
||||
offset: "0 -1",
|
||||
of: menu.prev()
|
||||
}).focus();
|
||||
},
|
||||
|
||||
left: function(event) {
|
||||
var prev = this.active.prevAll( ".ui-menu-flyout" ).eq( 0 );
|
||||
if (prev.length) {
|
||||
this._open(event, prev);
|
||||
} else {
|
||||
this._open(event, this.element.children(".ui-menu-flyout:last"));
|
||||
}
|
||||
},
|
||||
|
||||
right: function(event) {
|
||||
var next = this.active.nextAll( ".ui-menu-flyout" ).eq( 0 );
|
||||
if (next.length) {
|
||||
this._open(event, next);
|
||||
} else {
|
||||
this._open(event, this.element.children(".ui-menu-flyout:first"));
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
}(jQuery));
|
||||
Loading…
Reference in New Issue
Block a user