mirror of
https://github.com/jquery/jquery-ui.git
synced 2024-10-05 01:44:18 +00:00
Menu: Integrated flyoutmenu into menu, and moved flyoutmenu.html
testmenu into contextmenu.html
This commit is contained in:
parent
38cfcfffe9
commit
0ddf677e40
@ -20,15 +20,28 @@
|
|||||||
top: 10
|
top: 10
|
||||||
}).appendTo(document.body).themeswitcher();
|
}).appendTo(document.body).themeswitcher();
|
||||||
|
|
||||||
|
// TODO close other menus when opening a new one
|
||||||
$("button").each(function() {
|
$("button").each(function() {
|
||||||
$(this).next().menu({
|
$(this).next().menu({
|
||||||
|
/* top-alignment
|
||||||
|
position: function(item) {
|
||||||
|
return {
|
||||||
|
my: "left top",
|
||||||
|
at: "right top",
|
||||||
|
of: item.parent()
|
||||||
|
}
|
||||||
|
},
|
||||||
|
*/
|
||||||
select: function(event, ui) {
|
select: function(event, ui) {
|
||||||
$(this).hide().prev().focus();
|
$(this).hide().prev().focus();
|
||||||
$("#log").append("<div>Selected " + ui.item.text() + "</div>");
|
$("#log").append("<div>Selected " + ui.item.text() + "</div>");
|
||||||
}
|
}
|
||||||
}).hide();
|
}).hide();
|
||||||
|
|
||||||
|
// equal height
|
||||||
|
//menu.find("ul").height(menu.height());
|
||||||
}).click(function(event) {
|
}).click(function(event) {
|
||||||
// TODO required to prevent the click handler below from handling this event
|
// required to prevent the click handler below from handling this event
|
||||||
event.stopPropagation();
|
event.stopPropagation();
|
||||||
var menu = $("#menu" + this.id).menu("blur").show().position({
|
var menu = $("#menu" + this.id).menu("blur").show().position({
|
||||||
my: "left top",
|
my: "left top",
|
||||||
@ -36,7 +49,7 @@
|
|||||||
of: event.pageX > 0 ? event : this
|
of: event.pageX > 0 ? event : this
|
||||||
}).focus();
|
}).focus();
|
||||||
$(document).one("click", function() {
|
$(document).one("click", function() {
|
||||||
menu.hide();
|
menu.menu("closeAll").menu("widget").hide();
|
||||||
})
|
})
|
||||||
}).next().keydown(function(event) {
|
}).next().keydown(function(event) {
|
||||||
var menu = $(this).data("menu");
|
var menu = $(this).data("menu");
|
||||||
@ -45,10 +58,14 @@
|
|||||||
event.stopPropagation();
|
event.stopPropagation();
|
||||||
switch (event.keyCode) {
|
switch (event.keyCode) {
|
||||||
case $.ui.keyCode.TAB:
|
case $.ui.keyCode.TAB:
|
||||||
|
menu.closeAll();
|
||||||
menu.widget().hide();
|
menu.widget().hide();
|
||||||
|
$(this).prev().focus()
|
||||||
break;
|
break;
|
||||||
case $.ui.keyCode.ESCAPE:
|
case $.ui.keyCode.ESCAPE:
|
||||||
|
menu.closeAll();
|
||||||
menu.widget().hide();
|
menu.widget().hide();
|
||||||
|
$(this).prev().focus()
|
||||||
break;
|
break;
|
||||||
default:
|
default:
|
||||||
|
|
||||||
@ -59,7 +76,7 @@
|
|||||||
<style>
|
<style>
|
||||||
body { font-size:62.5%; }
|
body { font-size:62.5%; }
|
||||||
.ui-menu { width: 200px; position: absolute; }
|
.ui-menu { width: 200px; position: absolute; }
|
||||||
#menu2 { height: 200px; overflow: auto; }
|
#menu3 { height: 200px; overflow: auto; }
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
@ -76,13 +93,60 @@
|
|||||||
<li><a href="#">Zurich</a></li>
|
<li><a href="#">Zurich</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
|
<button id="2">Show context menu 2</button>
|
||||||
|
<ul id="menu2">
|
||||||
|
<li>
|
||||||
|
<a id="a1" href="#">Amsterdam</a>
|
||||||
|
<ul>
|
||||||
|
<li><a id="b1" href="#">Aberdeen</a></li>
|
||||||
|
<li><a id="b2" href="#">Ada</a></li>
|
||||||
|
<li>
|
||||||
|
<a href="#">Adamsville</a>
|
||||||
|
<ul>
|
||||||
|
<li><a href="#">Anaheim</a></li>
|
||||||
|
<li>
|
||||||
|
<a href="#">Cologne</a>
|
||||||
|
<ul>
|
||||||
|
<li><a href="#">Mberdeen</a></li>
|
||||||
|
<li><a href="#">Mda</a></li>
|
||||||
|
<li><a href="#">Mdamsville</a></li>
|
||||||
|
<li><a href="#">Mddyston</a></li>
|
||||||
|
<li><a href="#">Mmesville</a></li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
<li><a href="#">Frankfurt</a></li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
<li><a href="#">Addyston</a></li>
|
||||||
|
<li><a href="#">Amesville</a></li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
<li><a id="a2" href="#">Anaheim</a></li>
|
||||||
|
<li><a id="a3" href="#">Cologne</a></li>
|
||||||
|
<li><a href="#">Frankfurt</a></li>
|
||||||
|
<li>
|
||||||
|
<a href="#">Magdeburg</a>
|
||||||
|
<ul>
|
||||||
|
<li><a href="#">Mberdeen</a></li>
|
||||||
|
<li><a href="#">Mda</a></li>
|
||||||
|
<li><a href="#">Mdamsville</a></li>
|
||||||
|
<li><a href="#">Mddyston</a></li>
|
||||||
|
<li><a href="#">Mmesville</a></li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
<li><a href="#">Munich</a></li>
|
||||||
|
<li><a href="#">Utrecht</a></li>
|
||||||
|
<li><a href="#">Zurich</a></li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
|
||||||
<div class="ui-widget" style="margin-top:2em; font-family:Arial">
|
<div class="ui-widget" style="margin-top:2em; font-family:Arial">
|
||||||
Log:
|
Log:
|
||||||
<div id="log" style="height: 400px; width: 300px; overflow: auto;" class="ui-widget-content"></div>
|
<div id="log" style="height: 400px; width: 300px; overflow: auto;" class="ui-widget-content"></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<button id="2">Show context menu 2</button>
|
<button id="3">Show context menu 3</button>
|
||||||
<ul id="menu2">
|
<ul id="menu3">
|
||||||
<li><a href="#">Aberdeen</a></li>
|
<li><a href="#">Aberdeen</a></li>
|
||||||
<li><a href="#">Ada</a></li>
|
<li><a href="#">Ada</a></li>
|
||||||
<li><a href="#">Adamsville</a></li>
|
<li><a href="#">Adamsville</a></li>
|
||||||
|
@ -1,127 +0,0 @@
|
|||||||
<!doctype html>
|
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<title>Menu Visual Test: Default</title>
|
|
||||||
<link rel="stylesheet" href="../visual.css" type="text/css" />
|
|
||||||
<link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css" type="text/css" title="ui-theme" />
|
|
||||||
<script type="text/javascript" src="../../../jquery-1.4.4.js"></script>
|
|
||||||
<script type="text/javascript" src="../../../ui/jquery.ui.core.js"></script>
|
|
||||||
<script type="text/javascript" src="../../../ui/jquery.ui.widget.js"></script>
|
|
||||||
<script type="text/javascript" src="../../../ui/jquery.ui.position.js"></script>
|
|
||||||
<script type="text/javascript" src="../../../ui/jquery.ui.menu.js"></script>
|
|
||||||
<script type="text/javascript" src="../../../external/jquery.bgiframe-2.1.2.js"></script>
|
|
||||||
<script type="text/javascript" src="flyoutmenu.js"></script>
|
|
||||||
<!--
|
|
||||||
<script type="text/javascript" src="http://jqueryui.com/themeroller/themeswitchertool/"></script>
|
|
||||||
-->
|
|
||||||
<script type="text/javascript">
|
|
||||||
$(function() {
|
|
||||||
$.fn.themeswitcher && $('<div/>').css({
|
|
||||||
position: "absolute",
|
|
||||||
right: 10,
|
|
||||||
top: 10
|
|
||||||
}).appendTo(document.body).themeswitcher();
|
|
||||||
|
|
||||||
var menu = $("#menu");
|
|
||||||
|
|
||||||
var button = $("button").click(function(event) {
|
|
||||||
// TODO required to prevent the click handler below from handling this event
|
|
||||||
event.stopPropagation();
|
|
||||||
menu.flyoutmenu("show")
|
|
||||||
.focus()
|
|
||||||
.position({
|
|
||||||
my: "left top",
|
|
||||||
at: "right top",
|
|
||||||
of: this
|
|
||||||
});
|
|
||||||
$(document).one("click", function() {
|
|
||||||
menu.flyoutmenu("hide");
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
menu.flyoutmenu({
|
|
||||||
/* top-alignment
|
|
||||||
position: function(item) {
|
|
||||||
return {
|
|
||||||
my: "left top",
|
|
||||||
at: "right top",
|
|
||||||
of: item.parent()
|
|
||||||
}
|
|
||||||
},
|
|
||||||
*/
|
|
||||||
select: function(event, ui) {
|
|
||||||
$("#log").append("<div>Selected " + ui.item.children("a").text() + "(" + ui.item.children("a").attr("id") + ")</div>");
|
|
||||||
button.focus();
|
|
||||||
}
|
|
||||||
}).hide();
|
|
||||||
|
|
||||||
// equal height
|
|
||||||
//menu.find("ul").height(menu.height());
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
<style>
|
|
||||||
body { font-size:62.5%; }
|
|
||||||
.ui-menu { width: 200px; position: absolute; outline: none; }
|
|
||||||
.ui-menu .ui-icon { float: right; }
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
|
|
||||||
<button>Show context menu</button>
|
|
||||||
<br/>
|
|
||||||
<select>
|
|
||||||
<option>some option with some text</option>
|
|
||||||
</select>
|
|
||||||
|
|
||||||
<ul id="menu">
|
|
||||||
<li>
|
|
||||||
<a id="a1" href="#">Amsterdam</a>
|
|
||||||
<ul>
|
|
||||||
<li><a id="b1" href="#">Aberdeen</a></li>
|
|
||||||
<li><a id="b2" href="#">Ada</a></li>
|
|
||||||
<li>
|
|
||||||
<a href="#">Adamsville</a>
|
|
||||||
<ul>
|
|
||||||
<li><a href="#">Anaheim</a></li>
|
|
||||||
<li>
|
|
||||||
<a href="#">Cologne</a>
|
|
||||||
<ul>
|
|
||||||
<li><a href="#">Mberdeen</a></li>
|
|
||||||
<li><a href="#">Mda</a></li>
|
|
||||||
<li><a href="#">Mdamsville</a></li>
|
|
||||||
<li><a href="#">Mddyston</a></li>
|
|
||||||
<li><a href="#">Mmesville</a></li>
|
|
||||||
</ul>
|
|
||||||
</li>
|
|
||||||
<li><a href="#">Frankfurt</a></li>
|
|
||||||
</ul>
|
|
||||||
</li>
|
|
||||||
<li><a href="#">Addyston</a></li>
|
|
||||||
<li><a href="#">Amesville</a></li>
|
|
||||||
</ul>
|
|
||||||
</li>
|
|
||||||
<li><a id="a2" href="#">Anaheim</a></li>
|
|
||||||
<li><a id="a3" href="#">Cologne</a></li>
|
|
||||||
<li><a href="#">Frankfurt</a></li>
|
|
||||||
<li>
|
|
||||||
<a href="#">Magdeburg</a>
|
|
||||||
<ul>
|
|
||||||
<li><a href="#">Mberdeen</a></li>
|
|
||||||
<li><a href="#">Mda</a></li>
|
|
||||||
<li><a href="#">Mdamsville</a></li>
|
|
||||||
<li><a href="#">Mddyston</a></li>
|
|
||||||
<li><a href="#">Mmesville</a></li>
|
|
||||||
</ul>
|
|
||||||
</li>
|
|
||||||
<li><a href="#">Munich</a></li>
|
|
||||||
<li><a href="#">Utrecht</a></li>
|
|
||||||
<li><a href="#">Zurich</a></li>
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
<div class="ui-widget" style="margin-top:2em; font-family:Arial">
|
|
||||||
Log:
|
|
||||||
<div id="log" style="height: 400px; width: 300px; overflow: auto;" class="ui-widget-content"></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</body>
|
|
||||||
</html>
|
|
@ -1,110 +0,0 @@
|
|||||||
/*
|
|
||||||
* jQuery UI flyoutmenu
|
|
||||||
*
|
|
||||||
* backported from Michael Lang's fork: http://www.nexul.com/prototypes/toolbar/demo.html
|
|
||||||
*/
|
|
||||||
(function($) {
|
|
||||||
|
|
||||||
$.widget("ui.flyoutmenu", {
|
|
||||||
|
|
||||||
options: {
|
|
||||||
position: {
|
|
||||||
my: "left top",
|
|
||||||
at: "right top"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
_create: function() {
|
|
||||||
var self = this;
|
|
||||||
this.activeItem = this.element.children("li").first();
|
|
||||||
// hide submenus and create indicator icons
|
|
||||||
this.element.find("ul").addClass("ui-menu-flyout").hide().prev("a").prepend('<span class="ui-icon ui-icon-carat-1-e"></span>');
|
|
||||||
|
|
||||||
this.element.find("ul").andSelf().menu({
|
|
||||||
select: function(event) {
|
|
||||||
self._select(event);
|
|
||||||
},
|
|
||||||
focus: function(event, ui) {
|
|
||||||
self.activeItem = ui.item;
|
|
||||||
ui.item.parent().focus();
|
|
||||||
ui.item.parent().find("ul").hide();
|
|
||||||
var nested = $(">ul", ui.item);
|
|
||||||
if (nested.length && event.originalEvent && /^mouse/.test(event.originalEvent.type)) {
|
|
||||||
self._open(nested);
|
|
||||||
nested.focus();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}).keydown(function(event) {
|
|
||||||
if (self.element.is(":hidden"))
|
|
||||||
return;
|
|
||||||
switch (event.keyCode) {
|
|
||||||
case $.ui.keyCode.LEFT:
|
|
||||||
if (self.left(event)) {
|
|
||||||
event.stopImmediatePropagation();
|
|
||||||
}
|
|
||||||
event.preventDefault();
|
|
||||||
break;
|
|
||||||
case $.ui.keyCode.RIGHT:
|
|
||||||
if (self.right(event)) {
|
|
||||||
event.stopImmediatePropagation();
|
|
||||||
}
|
|
||||||
event.preventDefault();
|
|
||||||
break;
|
|
||||||
case $.ui.keyCode.ESCAPE:
|
|
||||||
self.hide();
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
},
|
|
||||||
|
|
||||||
_open: function(submenu) {
|
|
||||||
// TODO restrict to widget
|
|
||||||
//only one menu can have items open at a time.
|
|
||||||
$(document).find(".ui-menu-flyout").not(submenu.parents()).hide().data("menu").blur();
|
|
||||||
|
|
||||||
var position = $.extend({}, {
|
|
||||||
of: this.activeItem
|
|
||||||
}, $.type(this.options.position) == "function"
|
|
||||||
? this.options.position(this.activeItem)
|
|
||||||
: this.options.position
|
|
||||||
);
|
|
||||||
|
|
||||||
submenu.show().position(position);
|
|
||||||
},
|
|
||||||
_select: function(event) {
|
|
||||||
event.stopPropagation();
|
|
||||||
// TODO make _select cancelable?
|
|
||||||
this._trigger( "select", event, { item: this.activeItem } );
|
|
||||||
this.hide();
|
|
||||||
},
|
|
||||||
left: function(event) {
|
|
||||||
var newItem = this.activeItem.parents("li").first();
|
|
||||||
if (newItem.length) {
|
|
||||||
this.activate(event, newItem);
|
|
||||||
return true;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
right: function(event) {
|
|
||||||
var newItem = this.activeItem.children("ul").children("li").first();
|
|
||||||
if (newItem.length) {
|
|
||||||
this._open(newItem.parent());
|
|
||||||
this.activate(event, newItem);
|
|
||||||
return true;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
activate: function(event, item) {
|
|
||||||
var parent = item.parent();
|
|
||||||
parent.data("menu").focus(event, item);
|
|
||||||
this.activeItem = item;
|
|
||||||
parent.focus();
|
|
||||||
},
|
|
||||||
show: function() {
|
|
||||||
this.element.show();
|
|
||||||
},
|
|
||||||
hide: function() {
|
|
||||||
this.activeItem = this.element.children("li").first();
|
|
||||||
this.element.find("ul").andSelf().menu("blur").hide();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
}(jQuery));
|
|
@ -7,6 +7,7 @@
|
|||||||
<script type="text/javascript" src="../../../jquery-1.4.4.js"></script>
|
<script type="text/javascript" src="../../../jquery-1.4.4.js"></script>
|
||||||
<script type="text/javascript" src="../../../ui/jquery.ui.core.js"></script>
|
<script type="text/javascript" src="../../../ui/jquery.ui.core.js"></script>
|
||||||
<script type="text/javascript" src="../../../ui/jquery.ui.widget.js"></script>
|
<script type="text/javascript" src="../../../ui/jquery.ui.widget.js"></script>
|
||||||
|
<script type="text/javascript" src="../../../ui/jquery.ui.position.js"></script>
|
||||||
<script type="text/javascript" src="../../../ui/jquery.ui.menu.js"></script>
|
<script type="text/javascript" src="../../../ui/jquery.ui.menu.js"></script>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
$(function() {
|
$(function() {
|
||||||
@ -40,7 +41,7 @@
|
|||||||
<style>
|
<style>
|
||||||
body { font-size:62.5%; }
|
body { font-size:62.5%; }
|
||||||
.ui-menu { width: 200px; }
|
.ui-menu { width: 200px; }
|
||||||
#menu2 { height: 200px; overflow: auto; }
|
#menu3 { height: 200px; overflow: auto; }
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
@ -69,7 +70,14 @@
|
|||||||
</ul>
|
</ul>
|
||||||
</li>
|
</li>
|
||||||
<li><a href="#">Saarland</a></li>
|
<li><a href="#">Saarland</a></li>
|
||||||
<li><a href="#">Salzburg</a></li>
|
<li>
|
||||||
|
<a href="#">Salzburg</a>
|
||||||
|
<ul>
|
||||||
|
<li><a href="#">Alliance</a></li>
|
||||||
|
<li><a href="#">Krombach</a></li>
|
||||||
|
<li><a href="#">Perch</a></li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
<ul id="menu3">
|
<ul id="menu3">
|
||||||
|
2
themes/base/jquery.ui.menu.css
vendored
2
themes/base/jquery.ui.menu.css
vendored
@ -39,3 +39,5 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.ui-menu .ui-icon { float: right; }
|
.ui-menu .ui-icon { float: right; }
|
||||||
|
|
||||||
|
.ui-menu .ui-menu { position: absolute; }
|
||||||
|
103
ui/jquery.ui.menu.js
vendored
103
ui/jquery.ui.menu.js
vendored
@ -25,6 +25,7 @@ $.widget("ui.menu", {
|
|||||||
},
|
},
|
||||||
_create: function() {
|
_create: function() {
|
||||||
var self = this;
|
var self = this;
|
||||||
|
this.activeMenu = this.element;
|
||||||
this.menuId = this.element.attr( "id" ) || "ui-menu-" + idIncrement++;
|
this.menuId = this.element.attr( "id" ) || "ui-menu-" + idIncrement++;
|
||||||
this.element
|
this.element
|
||||||
.addClass( "ui-menu ui-widget ui-widget-content ui-corner-all" )
|
.addClass( "ui-menu ui-widget ui-widget-content ui-corner-all" )
|
||||||
@ -48,7 +49,7 @@ $.widget("ui.menu", {
|
|||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
var target = $( event.target ).closest( ".ui-menu-item" );
|
var target = $( event.target ).closest( ".ui-menu-item" );
|
||||||
if ( target.length && target.parent()[0] === self.element[0] ) {
|
if ( target.length ) {
|
||||||
self.focus( event, target );
|
self.focus( event, target );
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
@ -57,7 +58,7 @@ $.widget("ui.menu", {
|
|||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
var target = $( event.target ).closest( ".ui-menu-item" );
|
var target = $( event.target ).closest( ".ui-menu-item" );
|
||||||
if ( target.length && target.parent()[0] === self.element[0] ) {
|
if ( target.length ) {
|
||||||
self.blur( event );
|
self.blur( event );
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
@ -69,25 +70,37 @@ $.widget("ui.menu", {
|
|||||||
}
|
}
|
||||||
switch ( event.keyCode ) {
|
switch ( event.keyCode ) {
|
||||||
case $.ui.keyCode.PAGE_UP:
|
case $.ui.keyCode.PAGE_UP:
|
||||||
self.previousPage();
|
self.previousPage( event );
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
event.stopImmediatePropagation();
|
event.stopImmediatePropagation();
|
||||||
break;
|
break;
|
||||||
case $.ui.keyCode.PAGE_DOWN:
|
case $.ui.keyCode.PAGE_DOWN:
|
||||||
self.nextPage();
|
self.nextPage( event );
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
event.stopImmediatePropagation();
|
event.stopImmediatePropagation();
|
||||||
break;
|
break;
|
||||||
case $.ui.keyCode.UP:
|
case $.ui.keyCode.UP:
|
||||||
self.previous();
|
self.previous( event );
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
event.stopImmediatePropagation();
|
event.stopImmediatePropagation();
|
||||||
break;
|
break;
|
||||||
case $.ui.keyCode.DOWN:
|
case $.ui.keyCode.DOWN:
|
||||||
self.next();
|
self.next( event );
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
event.stopImmediatePropagation();
|
event.stopImmediatePropagation();
|
||||||
break;
|
break;
|
||||||
|
case $.ui.keyCode.LEFT:
|
||||||
|
if (self.left( event )) {
|
||||||
|
event.stopImmediatePropagation();
|
||||||
|
}
|
||||||
|
event.preventDefault();
|
||||||
|
break;
|
||||||
|
case $.ui.keyCode.RIGHT:
|
||||||
|
if (self.right( event )) {
|
||||||
|
event.stopImmediatePropagation();
|
||||||
|
}
|
||||||
|
event.preventDefault();
|
||||||
|
break;
|
||||||
case $.ui.keyCode.ENTER:
|
case $.ui.keyCode.ENTER:
|
||||||
self.select();
|
self.select();
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
@ -174,7 +187,9 @@ $.widget("ui.menu", {
|
|||||||
|
|
||||||
focus: function( event, item ) {
|
focus: function( event, item ) {
|
||||||
var self = this;
|
var self = this;
|
||||||
|
|
||||||
this.blur();
|
this.blur();
|
||||||
|
|
||||||
if ( this._hasScroll() ) {
|
if ( this._hasScroll() ) {
|
||||||
var borderTop = parseFloat( $.curCSS( this.element[0], "borderTopWidth", true) ) || 0,
|
var borderTop = parseFloat( $.curCSS( this.element[0], "borderTopWidth", true) ) || 0,
|
||||||
paddingtop = parseFloat( $.curCSS( this.element[0], "paddingTop", true) ) || 0,
|
paddingtop = parseFloat( $.curCSS( this.element[0], "paddingTop", true) ) || 0,
|
||||||
@ -188,6 +203,7 @@ $.widget("ui.menu", {
|
|||||||
this.element.attr( "scrollTop", scroll + offset - elementHeight + itemHeight );
|
this.element.attr( "scrollTop", scroll + offset - elementHeight + itemHeight );
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
this.active = item.first()
|
this.active = item.first()
|
||||||
.children( "a" )
|
.children( "a" )
|
||||||
.addClass( "ui-state-focus" )
|
.addClass( "ui-state-focus" )
|
||||||
@ -198,6 +214,14 @@ $.widget("ui.menu", {
|
|||||||
// need to remove the attribute before adding it for the screenreader to pick up the change
|
// need to remove the attribute before adding it for the screenreader to pick up the change
|
||||||
// see http://groups.google.com/group/jquery-a11y/msg/929e0c1e8c5efc8f
|
// see http://groups.google.com/group/jquery-a11y/msg/929e0c1e8c5efc8f
|
||||||
this.element.removeAttr("aria-activedescendant").attr("aria-activedescendant", self.itemId);
|
this.element.removeAttr("aria-activedescendant").attr("aria-activedescendant", self.itemId);
|
||||||
|
|
||||||
|
self._close();
|
||||||
|
var nested = $(">ul", item);
|
||||||
|
if (nested.length && /^mouse/.test(event.type)) {
|
||||||
|
self._open(nested);
|
||||||
|
}
|
||||||
|
this.activeMenu = item.parent();
|
||||||
|
|
||||||
this._trigger( "focus", event, { item: item } );
|
this._trigger( "focus", event, { item: item } );
|
||||||
},
|
},
|
||||||
|
|
||||||
@ -206,15 +230,59 @@ $.widget("ui.menu", {
|
|||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
var self = this;
|
|
||||||
this.active.children( "a" ).removeClass( "ui-state-focus" );
|
this.active.children( "a" ).removeClass( "ui-state-focus" );
|
||||||
// remove only generated id
|
// remove only generated id
|
||||||
$( "#" + self.menuId + "-activedescendant" ).removeAttr( "id" );
|
$( "#" + this.menuId + "-activedescendant" ).removeAttr( "id" );
|
||||||
this.element.removeAttr( "aria-activedescenant" );
|
this.element.removeAttr( "aria-activedescenant" );
|
||||||
this._trigger( "blur", event );
|
this._trigger( "blur", event );
|
||||||
this.active = null;
|
this.active = null;
|
||||||
},
|
},
|
||||||
|
|
||||||
|
_open: function(submenu) {
|
||||||
|
// TODO restrict to widget
|
||||||
|
//only one menu can have items open at a time.
|
||||||
|
//$(document).find(".ui-menu").not(submenu.parents()).hide().data("menu").blur();
|
||||||
|
this.element.find(".ui-menu").not(submenu.parents()).hide();
|
||||||
|
|
||||||
|
var position = $.extend({}, {
|
||||||
|
of: this.active
|
||||||
|
}, $.type(this.options.position) == "function"
|
||||||
|
? this.options.position(this.active)
|
||||||
|
: this.options.position
|
||||||
|
);
|
||||||
|
|
||||||
|
submenu.show().position(position);
|
||||||
|
},
|
||||||
|
|
||||||
|
closeAll: function() {
|
||||||
|
this.element.find("ul").hide();
|
||||||
|
this.blur();
|
||||||
|
this.activeMenu = this.element;
|
||||||
|
},
|
||||||
|
|
||||||
|
_close: function() {
|
||||||
|
this.active.parent().find("ul").hide();
|
||||||
|
},
|
||||||
|
|
||||||
|
left: function(event) {
|
||||||
|
var newItem = this.active && this.active.parents("li").first();
|
||||||
|
if (newItem && newItem.length) {
|
||||||
|
this.active.parent().hide();
|
||||||
|
this.focus(event, newItem);
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
right: function(event) {
|
||||||
|
var newItem = this.active && this.active.children("ul").children("li").first();
|
||||||
|
if (newItem && newItem.length) {
|
||||||
|
this._open(newItem.parent());
|
||||||
|
var current = this.active;
|
||||||
|
this.focus(event, newItem);
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
next: function(event) {
|
next: function(event) {
|
||||||
this._move( "next", ".ui-menu-item", "first", event );
|
this._move( "next", ".ui-menu-item", "first", event );
|
||||||
},
|
},
|
||||||
@ -233,21 +301,21 @@ $.widget("ui.menu", {
|
|||||||
|
|
||||||
_move: function(direction, edge, filter, event) {
|
_move: function(direction, edge, filter, event) {
|
||||||
if ( !this.active ) {
|
if ( !this.active ) {
|
||||||
this.focus( event, this.element.children(edge)[filter]() );
|
this.focus( event, this.activeMenu.children(edge)[filter]() );
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
var next = this.active[ direction + "All" ]( ".ui-menu-item" ).eq( 0 );
|
var next = this.active[ direction + "All" ]( ".ui-menu-item" ).eq( 0 );
|
||||||
if ( next.length ) {
|
if ( next.length ) {
|
||||||
this.focus( event, next );
|
this.focus( event, next );
|
||||||
} else {
|
} else {
|
||||||
this.focus( event, this.element.children(edge)[filter]() );
|
this.focus( event, this.activeMenu.children(edge)[filter]() );
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
nextPage: function( event ) {
|
nextPage: function( event ) {
|
||||||
if ( this._hasScroll() ) {
|
if ( this._hasScroll() ) {
|
||||||
if ( !this.active || this.last() ) {
|
if ( !this.active || this.last() ) {
|
||||||
this.focus( event, this.element.children( ".ui-menu-item" ).first() );
|
this.focus( event, this.activeMenu.children( ".ui-menu-item" ).first() );
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
var base = this.active.offset().top,
|
var base = this.active.offset().top,
|
||||||
@ -260,7 +328,7 @@ $.widget("ui.menu", {
|
|||||||
|
|
||||||
this.focus( event, result );
|
this.focus( event, result );
|
||||||
} else {
|
} else {
|
||||||
this.focus( event, this.element.children( ".ui-menu-item" )
|
this.focus( event, this.activeMenu.children( ".ui-menu-item" )
|
||||||
[ !this.active || this.last() ? "first" : "last" ]() );
|
[ !this.active || this.last() ? "first" : "last" ]() );
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
@ -268,7 +336,7 @@ $.widget("ui.menu", {
|
|||||||
previousPage: function( event ) {
|
previousPage: function( event ) {
|
||||||
if ( this._hasScroll() ) {
|
if ( this._hasScroll() ) {
|
||||||
if ( !this.active || this.first() ) {
|
if ( !this.active || this.first() ) {
|
||||||
this.focus( event, this.element.children( ".ui-menu-item" ).last() );
|
this.focus( event, this.activeMenu.children( ".ui-menu-item" ).last() );
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -282,7 +350,7 @@ $.widget("ui.menu", {
|
|||||||
|
|
||||||
this.focus( event, result );
|
this.focus( event, result );
|
||||||
} else {
|
} else {
|
||||||
this.focus( event, this.element.children( ".ui-menu-item" )
|
this.focus( event, this.activeMenu.children( ".ui-menu-item" )
|
||||||
[ !this.active || this.first() ? ":last" : ":first" ]() );
|
[ !this.active || this.first() ? ":last" : ":first" ]() );
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
@ -292,7 +360,12 @@ $.widget("ui.menu", {
|
|||||||
},
|
},
|
||||||
|
|
||||||
select: function( event ) {
|
select: function( event ) {
|
||||||
this._trigger( "select", event, { item: this.active } );
|
// save active reference before closeAll triggers blur
|
||||||
|
var ui = {
|
||||||
|
item: this.active
|
||||||
|
};
|
||||||
|
this.closeAll();
|
||||||
|
this._trigger( "select", event, ui );
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user