Skip to content
Permalink
Browse files

First attempt at integrating key handling into menu

  • Loading branch information...
jzaefferer committed Apr 30, 2010
1 parent c7edd58 commit abfdb2a8b6f93607c0791ba91ab616aed6b04772
@@ -18,48 +18,33 @@
top: 10
}).appendTo(document.body).themeswitcher();
var menus = $("#menu1, #menu2").menu({
selected: function(event, ui) {
$("#log").append("<div>Selected " + ui.item.text() + "</div>");
}
}).hide();
$("button").click(function(event) {
$("button").each(function() {
$(this).next().menu({
selected: function(event, ui) {
$(this).hide();
$("#log").append("<div>Selected " + ui.item.text() + "</div>");
},
input: $(this)
}).hide();
}).click(function(event) {
// TODO required to prevent the click handler below from handling this event
event.stopPropagation();
$("#menu" + this.id).menu("deactivate").show().position({
var menu = $("#menu" + this.id).menu("deactivate").show().position({
my: "left top",
at: "right top",
of: event.pageX > 0 ? event : this
});
$(document).one("click", function() {
menus.hide();
menu.hide();
})
}).keydown(function(event) {
var menu = $("#menu" + this.id).data("menu");
if (menu.widget().is(":hidden"))
return;
event.stopPropagation();
switch (event.keyCode) {
case $.ui.keyCode.PAGE_UP:
menu.previousPage();
break;
case $.ui.keyCode.PAGE_DOWN:
menu.nextPage();
break;
case $.ui.keyCode.UP:
menu.previous();
break;
case $.ui.keyCode.DOWN:
menu.next();
event.preventDefault();
break;
case $.ui.keyCode.ENTER:
case $.ui.keyCode.TAB:
menu.select();
menu.widget().hide();
event.preventDefault();
break;
case $.ui.keyCode.ESCAPE:
menu.widget().hide();
@@ -111,7 +96,6 @@
<body>

<button id="1">Show context menu 1</button>

<ul id="menu1">
<li><a href="#">Amsterdam</a></li>
<li><a href="#">Anaheim</a></li>
@@ -123,6 +107,12 @@
<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>

<button id="2">Show context menu 2</button>
<ul id="menu2">
<li><a href="#">Aberdeen</a></li>
<li><a href="#">Ada</a></li>
@@ -164,12 +154,5 @@
<li><a href="#">Amesville</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>

<button id="2">Show context menu 2</button>

</body>
</html>
@@ -28,6 +28,8 @@
this.element.find("ul").hide().prev("a").prepend('<span class="ui-icon ui-icon-carat-1-e"></span>').end().filter(":first").show();
this.element.find("ul").menu({
// disable built-in key handling
input: $(),
focus: function(event, ui) {
self.activeItem = ui.item;
},
@@ -17,37 +17,10 @@
top: 10
}).appendTo(document.body).themeswitcher();
var menus = $("#menu1, #menu2").menu({
$("#menu1, #menu2").menu({
selected: function(event, ui) {
$("<div/>").text("Selected: " + ui.item.text()).appendTo("#log");
}
}).keydown(function(event) {
var menu = $(this).data("menu");
if (menu.widget().is(":hidden"))
return;
event.stopPropagation();
switch (event.keyCode) {
case $.ui.keyCode.PAGE_UP:
menu.previousPage();
event.preventDefault();
break;
case $.ui.keyCode.PAGE_DOWN:
menu.nextPage();
event.preventDefault();
break;
case $.ui.keyCode.UP:
menu.previous();
event.preventDefault();
break;
case $.ui.keyCode.DOWN:
menu.next();
event.preventDefault();
break;
case $.ui.keyCode.ENTER:
menu.select();
event.preventDefault();
break;
}
});
});
@@ -60,15 +33,15 @@
</head>
<body>

<ul id="menu1" tabindex="0">
<ul id="menu1">
<li><a href="#">Aberdeen</a></li>
<li><a href="#">Ada</a></li>
<li><a href="#">Adamsville</a></li>
<li><a href="#">Addyston</a></li>
<li><a href="#">Adelphi</a></li>
</ul>

<ul id="menu2" tabindex="0">
<ul id="menu2">
<li><a href="#">Aberdeen</a></li>
<li><a href="#">Ada</a></li>
<li><a href="#">Adamsville</a></li>
@@ -28,6 +28,8 @@
this.element.find("ul").hide().prev("a").prepend('<span class="ui-icon ui-icon-carat-1-e"></span>');
this.element.find("ul").andSelf().menu({
// disable built-in key handling
input: $(),
selected: this.options.selected,
focus: function(event, ui) {
self.active = ui.item.parent();
@@ -104,6 +104,8 @@ $.widget( "ui.autocomplete", {
.addClass( "ui-autocomplete" )
.appendTo( "body", doc )
.menu({
// custom key handling for now
input: $(),
focus: function( event, ui ) {
var item = ui.item.data( "item.autocomplete" );
if ( false !== self._trigger( "focus", null, { item: item } ) ) {
@@ -31,6 +31,39 @@ $.widget("ui.menu", {
self.select( event );
});
this.refresh();

if (!this.options.input) {
this.options.input = this.element.attr("tabindex", 0);
}
this.options.input.bind("keydown.menu", function(event) {
switch (event.keyCode) {
case $.ui.keyCode.PAGE_UP:
self.previousPage();
event.preventDefault();
event.stopImmediatePropagation();
break;
case $.ui.keyCode.PAGE_DOWN:
self.nextPage();
event.preventDefault();
event.stopImmediatePropagation();
break;
case $.ui.keyCode.UP:
self.previous();
event.preventDefault();
event.stopImmediatePropagation();
break;
case $.ui.keyCode.DOWN:
self.next();
event.preventDefault();
event.stopImmediatePropagation();
break;
case $.ui.keyCode.ENTER:
self.select();
event.preventDefault();
event.stopImmediatePropagation();
break;
}
});
},

destroy: function() {

0 comments on commit abfdb2a

Please sign in to comment.
You can’t perform that action at this time.