Skip to content
Permalink
Browse files

Implemented menu/nested2 visual test, implementation doesn't rip DOM …

…apart, way simpler then original approach
  • Loading branch information
jzaefferer committed Mar 24, 2010
1 parent 872ca38 commit b90438d90e1737b33ee735281ab8bd408c3e4468
Showing with 145 additions and 19 deletions.
  1. +145 −19 tests/visual/menu/nested2.html
@@ -19,33 +19,159 @@
top: 10
}).appendTo(document.body).themeswitcher();

$.fn.position2 = function(options) {
return this.css({
top: 0,
left: 0
}).position(options);
}
var menus = $("#menu").menu().position2({
my: "left top",
at: "center bottom",
of: "button"
}).find("ul").menu().hide();
var sub1 = menus.filter(":first").show().position2({
my: "left top",
at: "right center",
of: "#menu"
$.widget("ui.nestedmenu", {
_init: function() {
var self = this;
this.active = this.element;

// hide submenus and create indicator icons
this.element.find("ul").hide().prev("a").prepend('<span class="ui-icon ui-icon-carat-1-e"></span>');

this.element.find("ul").andSelf().menu({
selected: this.options.selected,
focus: function(event, ui) {
self.active = ui.item.parent();
self.activeItem = ui.item;
ui.item.parent().find("ul").hide();
var nested = $(">ul", ui.item);
if (nested.length && /^mouse/.test(event.originalEvent.type)) {
self._open(nested);
}
}
})
},

_open: function(submenu) {
submenu.show().css({
top: 0,
left: 0
}).position({
my: "left top",
at: "right top",
of: this.activeItem
});
},

up: function(event) {
this.active = this.active.menu("deactivate").hide().parent().parent();
this.activeItem = this.active.data("menu").active;
},

down: function(event) {
var submenu = $(">ul", this.activeItem);
this._open(submenu, this.activeItem);
submenu.menu("activate", event, submenu.children(":first"));
},

show: function() {
this.active = this.element;
this.element.show();
},

hide: function() {
this.element.find("ul").andSelf().menu("deactivate").hide();
}

});
sub1.find("ul:first").show().position2({
of: sub1,
offset: "-10 50"

var nestedmenu = $("#menu").nestedmenu({
selected: function(event, ui) {
$("#log").append("<div>Selected " + ui.item.text() + "</div>");
}
}).hide();

$("button").click(function(event) {
// TODO required to prevent the click handler below from handling this event
event.stopPropagation();
nestedmenu.nestedmenu("show")
.css({
top: 0,
left: 0
})
.position({
my: "left top",
at: "right top",
of: this
});
$(document).one("click", function() {
nestedmenu.nestedmenu("hide");
})
}).keydown(function(event) {
var menu = nestedmenu.data("nestedmenu").active.data("menu");
if (menu.widget().is(":hidden"))
return;
event.stopPropagation();
switch (event.keyCode) {
case $.ui.keyCode.PAGE_UP:
menu.previousPage(event);
break;
case $.ui.keyCode.PAGE_DOWN:
menu.nextPage(event);
break;
case $.ui.keyCode.UP:
menu.previous(event);
break;
case $.ui.keyCode.LEFT:
nestedmenu.nestedmenu("up", event);
break;
case $.ui.keyCode.RIGHT:
nestedmenu.nestedmenu("down", event);
break;
case $.ui.keyCode.DOWN:
menu.next(event);
event.preventDefault();
break;
case $.ui.keyCode.ENTER:
case $.ui.keyCode.TAB:
menu.select();
nestedmenu.nestedmenu("hide");
event.preventDefault();
break;
case $.ui.keyCode.ESCAPE:
nestedmenu.nestedmenu("hide");
break;
default:
clearTimeout(menu.filterTimer);
var prev = menu.previousFilter || "";
var character = String.fromCharCode(event.keyCode);
var skip = false;
if (character == prev) {
skip = true;
} else {
character = prev + character;
}

var match = menu.widget().children("li").filter(function() {
return new RegExp("^" + character, "i").test($("a", this).text());
});
var match = skip && match.index(menu.active.next()) != -1 ? match.next() : match;
if (!match.length) {
character = String.fromCharCode(event.keyCode);
match = menu.widget().children("li").filter(function() {
return new RegExp("^" + character, "i").test($(this).text());
});
}
if (match.length) {
menu.activate(event, match);
if (match.length > 1) {
menu.previousFilter = character;
menu.filterTimer = setTimeout(function() {
delete menu.previousFilter;
}, 1000);
} else {
delete menu.previousFilter;
}
} else {
delete menu.previousFilter;
}
}
});
});
</script>
<style>
body { font-size:62.5%; }
.ui-menu { width: 200px; position: absolute; }
.ui-menu .ui-icon { float: right; }
ul, li {margin: 0; padding: 0}
</style>
</head>
<body>

0 comments on commit b90438d

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