jquery / jquery-ui

Source
Commits
Network (27)
Graphs
Tree: 3d5adba

The official jQuery user interface library. — Read more

This URL has Read+Write access

Added visual menu tests from (old) dev-branch and fixed nested-menu

jzaefferer (author)

Sat Mar 20 13:04:04 -0700 2010

commit 3d5adba51a9b1f008837c8e533f3e2425267c280
tree 108b2efbd35480a2b16a8cd9c9b058b6aae4ea84
parent 8a646989606bd4f1e55a7a988e0c2e9d8031b504

A	tests/visual/menu/contextmenu.html	175 •••••
A	tests/visual/menu/default.html	118 •••••
A	tests/visual/menu/drilldown.html	230 •••••
A	tests/visual/menu/nested.html	250 •••••

tests/visual/menu/contextmenu.html

View file @ 3d5adba

...	...	@@ -0,0 +1,175 @@
	1	+<!doctype html>
	2	+<html>
	3	+<head>
	4	+ <title>Menu Visual Test: Default</title>
	5	+ <link rel="stylesheet" href="../visual.css" type="text/css" />
	6	+ <link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css" type="text/css" title="ui-theme" />
	7	+ <script type="text/javascript" src="../../../jquery-1.4.2.js"></script>
	8	+ <script type="text/javascript" src="../../../ui/jquery.ui.core.js"></script>
	9	+ <script type="text/javascript" src="../../../ui/jquery.ui.widget.js"></script>
	10	+ <script type="text/javascript" src="../../../ui/jquery.ui.position.js"></script>
	11	+ <script type="text/javascript" src="../../../ui/jquery.ui.autocomplete.js"></script>
	12	+ <script type="text/javascript" src="http://jqueryui.com/themeroller/themeswitchertool/"></script>
	13	+ <script type="text/javascript">
	14	+ $(function() {
	15	+ $.fn.themeswitcher && $('<div/>').css({
	16	+ position: "absolute",
	17	+ right: 10,
	18	+ top: 10
	19	+ }).appendTo(document.body).themeswitcher();
	20	+
	21	+ var menus = $("#menu1, #menu2").menu({
	22	+ selected: function(event, ui) {
	23	+ $("#log").append("<div>Selected " + ui.item.text() + "</div>");
	24	+ }
	25	+ }).hide();
	26	+
	27	+
	28	+ $("button").click(function(event) {
	29	+ // TODO required to prevent the click handler below from handling this event
	30	+ event.stopPropagation();
	31	+ $("#menu" + this.id).menu("deactivate").show().position({
	32	+ my: "left top",
	33	+ at: "right top",
	34	+ of: event.pageX > 0 ? event : this
	35	+ });
	36	+ $(document).one("click", function() {
	37	+ menus.hide();
	38	+ })
	39	+ }).keydown(function(event) {
	40	+ var menu = $("#menu" + this.id).data("menu");
	41	+ if (menu.widget().is(":hidden"))
	42	+ return;
	43	+ event.stopPropagation();
	44	+ switch (event.keyCode) {
	45	+ case $.ui.keyCode.PAGE_UP:
	46	+ menu.previousPage();
	47	+ break;
	48	+ case $.ui.keyCode.PAGE_DOWN:
	49	+ menu.nextPage();
	50	+ break;
	51	+ case $.ui.keyCode.UP:
	52	+ menu.previous();
	53	+ break;
	54	+ case $.ui.keyCode.DOWN:
	55	+ menu.next();
	56	+ event.preventDefault();
	57	+ break;
	58	+ case $.ui.keyCode.ENTER:
	59	+ case $.ui.keyCode.TAB:
	60	+ menu.select();
	61	+ menu.widget().hide();
	62	+ event.preventDefault();
	63	+ break;
	64	+ case $.ui.keyCode.ESCAPE:
	65	+ menu.widget().hide();
	66	+ break;
	67	+ default:
	68	+ clearTimeout(menu.filterTimer);
	69	+ var prev = menu.previousFilter \|\| "";
	70	+ var character = String.fromCharCode(event.keyCode);
	71	+ var skip = false;
	72	+ if (character == prev) {
	73	+ skip = true;
	74	+ } else {
	75	+ character = prev + character;
	76	+ }
	77	+
	78	+ var match = menu.widget().children("li").filter(function() {
	79	+ return new RegExp("^" + character, "i").test($(this).text());
	80	+ });
	81	+ var match = skip && match.index(menu.active.next()) != -1 ? match.next() : match;
	82	+ if (!match.length) {
	83	+ character = String.fromCharCode(event.keyCode);
	84	+ match = menu.widget().children("li").filter(function() {
	85	+ return new RegExp("^" + character, "i").test($(this).text());
	86	+ });
	87	+ }
	88	+ if (match.length) {
	89	+ menu.activate(match);
	90	+ if (match.length > 1) {
	91	+ menu.previousFilter = character;
	92	+ menu.filterTimer = setTimeout(function() {
	93	+ delete menu.previousFilter;
	94	+ }, 1000);
	95	+ } else {
	96	+ delete menu.previousFilter;
	97	+ }
	98	+ } else {
	99	+ delete menu.previousFilter;
	100	+ }
	101	+ }
	102	+ });
	103	+ });
	104	+ </script>
	105	+ <style>
	106	+ body { font-size:62.5%; }
	107	+ .ui-menu { width: 200px; position: absolute; }
	108	+ #menu2 { height: 200px; overflow: auto; }
	109	+ </style>
	110	+</head>
	111	+<body>
	112	+
	113	+<button id="1">Show context menu 1</button>
	114	+
	115	+<ul id="menu1">
	116	+ <li><a href="#">Amsterdam</a></li>
	117	+ <li><a href="#">Anaheim</a></li>
	118	+ <li><a href="#">Cologne</a></li>
	119	+ <li><a href="#">Frankfurt</a></li>
	120	+ <li><a href="#">Magdeburg</a></li>
	121	+ <li><a href="#">Munich</a></li>
	122	+ <li><a href="#">Utrecht</a></li>
	123	+ <li><a href="#">Zurich</a></li>
	124	+</ul>
	125	+
	126	+<ul id="menu2">
	127	+ <li><a href="#">Aberdeen</a></li>
	128	+ <li><a href="#">Ada</a></li>
	129	+ <li><a href="#">Adamsville</a></li>
	130	+ <li><a href="#">Addyston</a></li>
	131	+ <li><a href="#">Adelphi</a></li>
	132	+ <li><a href="#">Adena</a></li>
	133	+ <li><a href="#">Adrian</a></li>
	134	+ <li><a href="#">Akron</a></li>
	135	+ <li><a href="#">Albany</a></li>
	136	+ <li><a href="#">Alexandria</a></li>
	137	+ <li><a href="#">Alger</a></li>
	138	+ <li><a href="#">Alledonia</a></li>
	139	+ <li><a href="#">Alliance</a></li>
	140	+ <li><a href="#">Alpha</a></li>
	141	+ <li><a href="#">Alvada</a></li>
	142	+ <li><a href="#">Alvordton</a></li>
	143	+ <li><a href="#">Amanda</a></li>
	144	+ <li><a href="#">Amelia</a></li>
	145	+ <li><a href="#">Amesville</a></li>
	146	+ <li><a href="#">Aberdeen</a></li>
	147	+ <li><a href="#">Ada</a></li>
	148	+ <li><a href="#">Adamsville</a></li>
	149	+ <li><a href="#">Addyston</a></li>
	150	+ <li><a href="#">Adelphi</a></li>
	151	+ <li><a href="#">Adena</a></li>
	152	+ <li><a href="#">Adrian</a></li>
	153	+ <li><a href="#">Akron</a></li>
	154	+ <li><a href="#">Albany</a></li>
	155	+ <li><a href="#">Alexandria</a></li>
	156	+ <li><a href="#">Alger</a></li>
	157	+ <li><a href="#">Alledonia</a></li>
	158	+ <li><a href="#">Alliance</a></li>
	159	+ <li><a href="#">Alpha</a></li>
	160	+ <li><a href="#">Alvada</a></li>
	161	+ <li><a href="#">Alvordton</a></li>
	162	+ <li><a href="#">Amanda</a></li>
	163	+ <li><a href="#">Amelia</a></li>
	164	+ <li><a href="#">Amesville</a></li>
	165	+</ul>
	166	+
	167	+<div class="ui-widget" style="margin-top:2em; font-family:Arial">
	168	+ Log:
	169	+ <div id="log" style="height: 400px; width: 300px; overflow: auto;" class="ui-widget-content"></div>
	170	+</div>
	171	+
	172	+<button id="2">Show context menu 2</button>
	173	+
	174	+</body>
	175	+</html>

tests/visual/menu/default.html

View file @ 3d5adba

...	...	@@ -0,0 +1,118 @@
	1	+<!doctype html>
	2	+<html>
	3	+<head>
	4	+ <title>Menu Visual Test: Default</title>
	5	+ <link rel="stylesheet" href="../visual.css" type="text/css" />
	6	+ <link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css" type="text/css" title="ui-theme" />
	7	+ <script type="text/javascript" src="../../../jquery-1.4.2.js"></script>
	8	+ <script type="text/javascript" src="../../../ui/jquery.ui.core.js"></script>
	9	+ <script type="text/javascript" src="../../../ui/jquery.ui.widget.js"></script>
	10	+ <script type="text/javascript" src="../../../ui/jquery.ui.autocomplete.js"></script>
	11	+ <script type="text/javascript" src="http://jqueryui.com/themeroller/themeswitchertool/"></script>
	12	+ <script type="text/javascript">
	13	+ $(function() {
	14	+ $.fn.themeswitcher && $('<div/>').css({
	15	+ position: "absolute",
	16	+ right: 10,
	17	+ top: 10
	18	+ }).appendTo(document.body).themeswitcher();
	19	+
	20	+ var menus = $("#menu1, #menu2").menu({
	21	+ selected: function(event, ui) {
	22	+ $("<div/>").text("Selected: " + ui.item.text()).appendTo("#log");
	23	+ }
	24	+ }).keydown(function(event) {
	25	+ var menu = $(this).data("menu");
	26	+ if (menu.widget().is(":hidden"))
	27	+ return;
	28	+ event.stopPropagation();
	29	+ switch (event.keyCode) {
	30	+ case $.ui.keyCode.PAGE_UP:
	31	+ menu.previousPage();
	32	+ event.preventDefault();
	33	+ break;
	34	+ case $.ui.keyCode.PAGE_DOWN:
	35	+ menu.nextPage();
	36	+ event.preventDefault();
	37	+ break;
	38	+ case $.ui.keyCode.UP:
	39	+ menu.previous();
	40	+ event.preventDefault();
	41	+ break;
	42	+ case $.ui.keyCode.DOWN:
	43	+ menu.next();
	44	+ event.preventDefault();
	45	+ break;
	46	+ case $.ui.keyCode.ENTER:
	47	+ menu.select();
	48	+ event.preventDefault();
	49	+ break;
	50	+ }
	51	+ });
	52	+
	53	+ });
	54	+ </script>
	55	+ <style>
	56	+ body { font-size:62.5%; }
	57	+ .ui-menu { width: 200px; }
	58	+ #menu2 { height: 200px; overflow: auto; }
	59	+ </style>
	60	+</head>
	61	+<body>
	62	+
	63	+<ul id="menu1" tabindex="0">
	64	+ <li><a href="#">Aberdeen</a></li>
	65	+ <li><a href="#">Ada</a></li>
	66	+ <li><a href="#">Adamsville</a></li>
	67	+ <li><a href="#">Addyston</a></li>
	68	+ <li><a href="#">Adelphi</a></li>
	69	+</ul>
	70	+
	71	+<ul id="menu2" tabindex="0">
	72	+ <li><a href="#">Aberdeen</a></li>
	73	+ <li><a href="#">Ada</a></li>
	74	+ <li><a href="#">Adamsville</a></li>
	75	+ <li><a href="#">Addyston</a></li>
	76	+ <li><a href="#">Adelphi</a></li>
	77	+ <li><a href="#">Adena</a></li>
	78	+ <li><a href="#">Adrian</a></li>
	79	+ <li><a href="#">Akron</a></li>
	80	+ <li><a href="#">Albany</a></li>
	81	+ <li><a href="#">Alexandria</a></li>
	82	+ <li><a href="#">Alger</a></li>
	83	+ <li><a href="#">Alledonia</a></li>
	84	+ <li><a href="#">Alliance</a></li>
	85	+ <li><a href="#">Alpha</a></li>
	86	+ <li><a href="#">Alvada</a></li>
	87	+ <li><a href="#">Alvordton</a></li>
	88	+ <li><a href="#">Amanda</a></li>
	89	+ <li><a href="#">Amelia</a></li>
	90	+ <li><a href="#">Amesville</a></li>
	91	+ <li><a href="#">Aberdeen</a></li>
	92	+ <li><a href="#">Ada</a></li>
	93	+ <li><a href="#">Adamsville</a></li>
	94	+ <li><a href="#">Addyston</a></li>
	95	+ <li><a href="#">Adelphi</a></li>
	96	+ <li><a href="#">Adena</a></li>
	97	+ <li><a href="#">Adrian</a></li>
	98	+ <li><a href="#">Akron</a></li>
	99	+ <li><a href="#">Albany</a></li>
	100	+ <li><a href="#">Alexandria</a></li>
	101	+ <li><a href="#">Alger</a></li>
	102	+ <li><a href="#">Alledonia</a></li>
	103	+ <li><a href="#">Alliance</a></li>
	104	+ <li><a href="#">Alpha</a></li>
	105	+ <li><a href="#">Alvada</a></li>
	106	+ <li><a href="#">Alvordton</a></li>
	107	+ <li><a href="#">Amanda</a></li>
	108	+ <li><a href="#">Amelia</a></li>
	109	+ <li><a href="#">Amesville</a></li>
	110	+</ul>
	111	+
	112	+<div class="ui-widget" style="margin-top:2em; font-family:Arial">
	113	+ Log:
	114	+ <div id="log" style="height: 400px; width: 300px; overflow: auto;" class="ui-widget-content"></div>
	115	+</div>
	116	+
	117	+</body>
	118	+</html>

tests/visual/menu/drilldown.html

View file @ 3d5adba

...	...	@@ -0,0 +1,230 @@
	1	+<!doctype html>
	2	+<html>
	3	+<head>
	4	+ <title>Menu Visual Test: Default</title>
	5	+ <link rel="stylesheet" href="../visual.css" type="text/css" />
	6	+ <link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css" type="text/css" title="ui-theme" />
	7	+ <script type="text/javascript" src="../../../jquery-1.4.2.js"></script>
	8	+ <script type="text/javascript" src="../../../ui/jquery.ui.core.js"></script>
	9	+ <script type="text/javascript" src="../../../ui/jquery.ui.widget.js"></script>
	10	+ <script type="text/javascript" src="../../../ui/jquery.ui.position.js"></script>
	11	+ <script type="text/javascript" src="../../../ui/jquery.ui.autocomplete.js"></script>
	12	+ <script type="text/javascript">
	13	+ $(function() {
	14	+ $.widget("ui.drilldown", {
	15	+ _init: function() {
	16	+ var self = this;
	17	+ this.active = this.element;
	18	+
	19	+ // hide submenus and create indicator icons
	20	+ this.element.find("ul").hide().prev("a").prepend('<span class="ui-icon ui-icon-carat-1-e"></span>').end().filter(":first").show();
	21	+
	22	+ this.element.find("ul").menu({
	23	+ selected: function(event, ui) {
	24	+ var nested = $(">ul", ui.item);
	25	+ if (!nested.length) {
	26	+ self.element.find("h3").text(ui.item.text());
	27	+ self.options.selected.apply(this, arguments);
	28	+ return;
	29	+ }
	30	+ self.active = ui.item.parent();
	31	+ // put a previous submenu back into its place and hide it
	32	+ self.hideDown();
	33	+ if (nested.length) {
	34	+ // append to body in order to display the submenu above the parent menu, instead of inside of it
	35	+ nested.appendTo(document.body).menu("deactivate").show().position({
	36	+ my: "left top",
	37	+ at: "left top",
	38	+ of: self.element.children("ul:first")
	39	+ // store the current submenu
	40	+ }).data("menuparent", ui.item);
	41	+
	42	+ self.active.data("submenu", nested);
	43	+ }
	44	+ }
	45	+ });
	46	+ },
	47	+
	48	+ up: function() {
	49	+ if (!this.active.data("menuparent"))
	50	+ return;
	51	+ this.hideDown();
	52	+ this.active.menu("deactivate");
	53	+ this.active = this.active.data("menuparent").parent();
	54	+ },
	55	+
	56	+ down: function() {
	57	+ var submenu = this.active.data("submenu");
	58	+ if (!submenu)
	59	+ return;
	60	+ submenu.data("menu").activate(submenu.children(":first"))
	61	+ this.active = submenu;
	62	+ },
	63	+
	64	+ show: function() {
	65	+ this.element.menu("deactivate").show();
	66	+ this.active = this.element;
	67	+ },
	68	+
	69	+ hide: function() {
	70	+ this.hideDown();
	71	+ var child = this.active.hide(), parent;
	72	+ while(child.data("menuparent")) {
	73	+ parent = child.data("menuparent");
	74	+ child.appendTo(parent).removeData("menuparent");
	75	+ child = parent.parent().removeData("submenu").hide();
	76	+ }
	77	+ },
	78	+
	79	+ hideDown: function() {
	80	+ var submenu = this.active.data("submenu");
	81	+ while(submenu) {
	82	+ var parent = submenu.data("menuparent");
	83	+ submenu.appendTo(parent).hide().removeData("menuparent");
	84	+ parent.parent().removeData("submenu");
	85	+ submenu = submenu.data("submenu");
	86	+ };
	87	+ }
	88	+ });
	89	+
	90	+ var nestedmenu = $("#drilldown").drilldown({
	91	+ selected: function(event, ui) {
	92	+ $("#log").append("<div>Selected " + ui.item.text() + "</div>");
	93	+ }
	94	+ });
	95	+
	96	+ $().keydown(function(event) {
	97	+ var menu = nestedmenu.data("drilldown").active.data("menu");
	98	+ if (menu.widget().is(":hidden"))
	99	+ return;
	100	+ event.stopPropagation();
	101	+ switch (event.keyCode) {
	102	+ case $.ui.keyCode.PAGE_UP:
	103	+ menu.previousPage();
	104	+ break;
	105	+ case $.ui.keyCode.PAGE_DOWN:
	106	+ menu.nextPage();
	107	+ break;
	108	+ case $.ui.keyCode.UP:
	109	+ menu.previous();
	110	+ break;
	111	+ case $.ui.keyCode.LEFT:
	112	+ nestedmenu.nestedmenu("up");
	113	+ break;
	114	+ case $.ui.keyCode.RIGHT:
	115	+ nestedmenu.nestedmenu("down");
	116	+ break;
	117	+ case $.ui.keyCode.DOWN:
	118	+ menu.next();
	119	+ event.preventDefault();
	120	+ break;
	121	+ case $.ui.keyCode.ENTER:
	122	+ case $.ui.keyCode.TAB:
	123	+ menu.select();
	124	+ nestedmenu.nestedmenu("hide");
	125	+ event.preventDefault();
	126	+ break;
	127	+ case $.ui.keyCode.ESCAPE:
	128	+ nestedmenu.nestedmenu("hide");
	129	+ break;
	130	+ default:
	131	+ clearTimeout(menu.filterTimer);
	132	+ var prev = menu.previousFilter \|\| "";
	133	+ var character = String.fromCharCode(event.keyCode);
	134	+ var skip = false;
	135	+ if (character == prev) {
	136	+ skip = true;
	137	+ } else {
	138	+ character = prev + character;
	139	+ }
	140	+
	141	+ var match = menu.widget().children("li").filter(function() {
	142	+ return new RegExp("^" + character, "i").test($("a", this).text());
	143	+ });
	144	+ var match = skip && match.index(menu.active.next()) != -1 ? match.next() : match;
	145	+ if (!match.length) {
	146	+ character = String.fromCharCode(event.keyCode);
	147	+ match = menu.widget().children("li").filter(function() {
	148	+ return new RegExp("^" + character, "i").test($(this).text());
	149	+ });
	150	+ }
	151	+ if (match.length) {
	152	+ menu.activate(match);
	153	+ if (match.length > 1) {
	154	+ menu.previousFilter = character;
	155	+ menu.filterTimer = setTimeout(function() {
	156	+ delete menu.previousFilter;
	157	+ }, 1000);
	158	+ } else {
	159	+ delete menu.previousFilter;
	160	+ }
	161	+ } else {
	162	+ delete menu.previousFilter;
	163	+ }
	164	+ }
	165	+ });
	166	+ });
	167	+ </script>
	168	+ <style>
	169	+ body { font-size:62.5%; }
	170	+ .ui-menu { width: 200px; height: 170px; }
	171	+ .ui-menu .ui-icon { float: right; }
	172	+ </style>
	173	+</head>
	174	+<body>
	175	+
	176	+<div id="drilldown">
	177	+ <h3>Make a selection...</h3>
	178	+ <ul>
	179	+ <li>
	180	+ <a href="#">Amsterdam</a>
	181	+ <ul>
	182	+ <li><a href="#">Aberdeen</a></li>
	183	+ <li><a href="#">Ada</a></li>
	184	+ <li>
	185	+ <a href="#">Adamsville</a>
	186	+ <ul>
	187	+ <li><a href="#">Anaheim</a></li>
	188	+ <li>
	189	+ <a href="#">Cologne</a>
	190	+ <ul>
	191	+ <li><a href="#">Mberdeen</a></li>
	192	+ <li><a href="#">Mda</a></li>
	193	+ <li><a href="#">Mdamsville</a></li>
	194	+ <li><a href="#">Mddyston</a></li>
	195	+ <li><a href="#">Mmesville</a></li>
	196	+ </ul>
	197	+ </li>
	198	+ <li><a href="#">Frankfurt</a></li>
	199	+ </ul>
	200	+ </li>
	201	+ <li><a href="#">Addyston</a></li>
	202	+ <li><a href="#">Amesville</a></li>
	203	+ </ul>
	204	+ </li>
	205	+ <li><a href="#">Anaheim</a></li>
	206	+ <li><a href="#">Cologne</a></li>
	207	+ <li><a href="#">Frankfurt</a></li>
	208	+ <li>
	209	+ <a href="#">Magdeburg</a>
	210	+ <ul>
	211	+ <li><a href="#">Mberdeen</a></li>
	212	+ <li><a href="#">Mda</a></li>
	213	+ <li><a href="#">Mdamsville</a></li>
	214	+ <li><a href="#">Mddyston</a></li>
	215	+ <li><a href="#">Mmesville</a></li>
	216	+ </ul>
	217	+ </li>
	218	+ <li><a href="#">Munich</a></li>
	219	+ <li><a href="#">Utrecht</a></li>
	220	+ <li><a href="#">Zurich</a></li>
	221	+ </ul>
	222	+</div>
	223	+
	224	+<div class="ui-widget" style="margin-top:2em; font-family:Arial">
	225	+ Log:
	226	+ <div id="log" style="height: 400px; width: 300px; overflow: auto;" class="ui-widget-content"></div>
	227	+</div>
	228	+
	229	+</body>
	230	+</html>

tests/visual/menu/nested.html

View file @ 3d5adba

...	...	@@ -0,0 +1,250 @@
	1	+<!doctype html>
	2	+<html>
	3	+<head>
	4	+ <title>Menu Visual Test: Default</title>
	5	+ <link rel="stylesheet" href="../visual.css" type="text/css" />
	6	+ <link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css" type="text/css" title="ui-theme" />
	7	+ <script type="text/javascript" src="../../../jquery-1.4.2.js"></script>
	8	+ <script type="text/javascript" src="../../../ui/jquery.ui.core.js"></script>
	9	+ <script type="text/javascript" src="../../../ui/jquery.ui.widget.js"></script>
	10	+ <script type="text/javascript" src="../../../ui/jquery.ui.position.js"></script>
	11	+ <script type="text/javascript" src="../../../ui/jquery.ui.autocomplete.js"></script>
	12	+ <script type="text/javascript">
	13	+ $(function() {
	14	+ $.widget("ui.nestedmenu", {
	15	+ _init: function() {
	16	+ var self = this;
	17	+ this.active = this.element;
	18	+
	19	+ // hide submenus and create indicator icons
	20	+ this.element.find("ul").hide().prev("a").prepend('<span class="ui-icon ui-icon-carat-1-e"></span>');
	21	+
	22	+ this.element.find("ul").andSelf().menu({
	23	+ selected: this.options.selected,
	24	+ focus: function(event, ui) {
	25	+ self.active = ui.item.parent();
	26	+ self.activeItem = ui.item;
	27	+ // put a previous submenu back into its place and hide it
	28	+ self.hideDown();
	29	+ var nested = $(">ul", ui.item);
	30	+ // only for mouse-events (should actually check event.originalEvent.type, but for keys, originalEvent is undefined...)
	31	+ if (nested.length && /^mouse/.test(event.originalEvent.type)) {
	32	+ self._openSubmenu(nested, ui.item);
	33	+ }
	34	+ }
	35	+ })
	36	+ },
	37	+
	38	+ _openSubmenu: function(nested, item) {
	39	+ // append to body in order to display the submenu above the parent menu, instead of inside of it
	40	+ nested.appendTo(document.body).menu("deactivate").show().position({
	41	+ my: "left top",
	42	+ at: "right top",
	43	+ of: item
	44	+ // store the current submenu
	45	+ }).data("menuparent", item);
	46	+
	47	+ this.active.data("submenu", nested);
	48	+ },
	49	+
	50	+ up: function(event) {
	51	+ if (!this.active.data("menuparent"))
	52	+ return;
	53	+ this.active.menu("deactivate");
	54	+ this.active = this.active.data("menuparent").parent();
	55	+ this.activeItem = this.active.data("menu").active;
	56	+ this.hideDown();
	57	+ },
	58	+
	59	+ down: function(event) {
	60	+ var submenu = this.active.data("submenu");
	61	+ if (!submenu && this.activeItem) {
	62	+ // try to open submenu or return(?); only mouseover opens submenu directly, key doesn't
	63	+ var item = this.activeItem,
	64	+ nested = item.children("ul");
	65	+ if (!nested.length)
	66	+ return;
	67	+ this._openSubmenu(nested, item);
	68	+ submenu = this.active.data("submenu");
	69	+ }
	70	+ submenu.data("menu").activate(event, submenu.children(":first"))
	71	+ this.active = submenu;
	72	+ },
	73	+
	74	+ show: function() {
	75	+ this.element.menu("deactivate").show();
	76	+ this.active = this.element;
	77	+ },
	78	+
	79	+ hide: function() {
	80	+ this.hideDown();
	81	+ var child = this.active.hide(), parent;
	82	+ while(child.data("menuparent")) {
	83	+ parent = child.data("menuparent");
	84	+ child.appendTo(parent).removeData("menuparent");
	85	+ child = parent.parent().removeData("submenu").hide();
	86	+ }
	87	+ },
	88	+
	89	+ hideDown: function() {
	90	+ var submenu = this.active.data("submenu");
	91	+ while(submenu) {
	92	+ var parent = submenu.data("menuparent");
	93	+ submenu.appendTo(parent).hide().removeData("menuparent");
	94	+ parent.parent().removeData("submenu");
	95	+ submenu = submenu.data("submenu");
	96	+ };
	97	+ }
	98	+ });
	99	+
	100	+ var nestedmenu = $("#menu").nestedmenu({
	101	+ selected: function(event, ui) {
	102	+ $("#log").append("<div>Selected " + ui.item.text() + "</div>");
	103	+ }
	104	+ }).hide();
	105	+
	106	+ $("button").click(function(event) {
	107	+ // TODO required to prevent the click handler below from handling this event
	108	+ event.stopPropagation();
	109	+ nestedmenu.nestedmenu("show").position({
	110	+ my: "left top",
	111	+ at: "right top",
	112	+ of: event.pageX > 0 ? event : this
	113	+ });
	114	+ $(document).one("click", function() {
	115	+ nestedmenu.nestedmenu("hide");
	116	+ })
	117	+ }).keydown(function(event) {
	118	+ var menu = nestedmenu.data("nestedmenu").active.data("menu");
	119	+ if (menu.widget().is(":hidden"))
	120	+ return;
	121	+ event.stopPropagation();
	122	+ switch (event.keyCode) {
	123	+ case $.ui.keyCode.PAGE_UP:
	124	+ menu.previousPage(event);
	125	+ break;
	126	+ case $.ui.keyCode.PAGE_DOWN:
	127	+ menu.nextPage(event);
	128	+ break;
	129	+ case $.ui.keyCode.UP:
	130	+ menu.previous(event);
	131	+ break;
	132	+ case $.ui.keyCode.LEFT:
	133	+ nestedmenu.nestedmenu("up", event);
	134	+ break;
	135	+ case $.ui.keyCode.RIGHT:
	136	+ nestedmenu.nestedmenu("down", event);
	137	+ break;
	138	+ case $.ui.keyCode.DOWN:
	139	+ menu.next(event);
	140	+ event.preventDefault();
	141	+ break;
	142	+ case $.ui.keyCode.ENTER:
	143	+ case $.ui.keyCode.TAB:
	144	+ menu.select();
	145	+ nestedmenu.nestedmenu("hide");
	146	+ event.preventDefault();
	147	+ break;
	148	+ case $.ui.keyCode.ESCAPE:
	149	+ nestedmenu.nestedmenu("hide");
	150	+ break;
	151	+ default:
	152	+ clearTimeout(menu.filterTimer);
	153	+ var prev = menu.previousFilter \|\| "";
	154	+ var character = String.fromCharCode(event.keyCode);
	155	+ var skip = false;
	156	+ if (character == prev) {
	157	+ skip = true;
	158	+ } else {
	159	+ character = prev + character;
	160	+ }
	161	+
	162	+ var match = menu.widget().children("li").filter(function() {
	163	+ return new RegExp("^" + character, "i").test($("a", this).text());
	164	+ });
	165	+ var match = skip && match.index(menu.active.next()) != -1 ? match.next() : match;
	166	+ if (!match.length) {
	167	+ character = String.fromCharCode(event.keyCode);
	168	+ match = menu.widget().children("li").filter(function() {
	169	+ return new RegExp("^" + character, "i").test($(this).text());
	170	+ });
	171	+ }
	172	+ if (match.length) {
	173	+ menu.activate(event, match);
	174	+ if (match.length > 1) {
	175	+ menu.previousFilter = character;
	176	+ menu.filterTimer = setTimeout(function() {
	177	+ delete menu.previousFilter;
	178	+ }, 1000);
	179	+ } else {
	180	+ delete menu.previousFilter;
	181	+ }
	182	+ } else {
	183	+ delete menu.previousFilter;
	184	+ }
	185	+ }
	186	+ });
	187	+ });
	188	+ </script>
	189	+ <style>
	190	+ body { font-size:62.5%; }
	191	+ .ui-menu { width: 200px; position: absolute; }
	192	+ .ui-menu .ui-icon { float: right; }
	193	+ </style>
	194	+</head>
	195	+<body>
	196	+
	197	+<button>Show context menu</button>
	198	+
	199	+<ul id="menu">
	200	+ <li>
	201	+ <a href="#">Amsterdam</a>
	202	+ <ul>
	203	+ <li><a href="#">Aberdeen</a></li>
	204	+ <li><a href="#">Ada</a></li>
	205	+ <li>
	206	+ <a href="#">Adamsville</a>
	207	+ <ul>
	208	+ <li><a href="#">Anaheim</a></li>
	209	+ <li>
	210	+ <a href="#">Cologne</a>
	211	+ <ul>
	212	+ <li><a href="#">Mberdeen</a></li>
	213	+ <li><a href="#">Mda</a></li>
	214	+ <li><a href="#">Mdamsville</a></li>
	215	+ <li><a href="#">Mddyston</a></li>
	216	+ <li><a href="#">Mmesville</a></li>
	217	+ </ul>
	218	+ </li>
	219	+ <li><a href="#">Frankfurt</a></li>
	220	+ </ul>
	221	+ </li>
	222	+ <li><a href="#">Addyston</a></li>
	223	+ <li><a href="#">Amesville</a></li>
	224	+ </ul>
	225	+ </li>
	226	+ <li><a href="#">Anaheim</a></li>
	227	+ <li><a href="#">Cologne</a></li>
	228	+ <li><a href="#">Frankfurt</a></li>
	229	+ <li>
	230	+ <a href="#">Magdeburg</a>
	231	+ <ul>
	232	+ <li><a href="#">Mberdeen</a></li>
	233	+ <li><a href="#">Mda</a></li>
	234	+ <li><a href="#">Mdamsville</a></li>
	235	+ <li><a href="#">Mddyston</a></li>
	236	+ <li><a href="#">Mmesville</a></li>
	237	+ </ul>
	238	+ </li>
	239	+ <li><a href="#">Munich</a></li>
	240	+ <li><a href="#">Utrecht</a></li>
	241	+ <li><a href="#">Zurich</a></li>
	242	+</ul>
	243	+
	244	+<div class="ui-widget" style="margin-top:2em; font-family:Arial">
	245	+ Log:
	246	+ <div id="log" style="height: 400px; width: 300px; overflow: auto;" class="ui-widget-content"></div>
	247	+</div>
	248	+
	249	+</body>
	250	+</html>

0 notes on commit `3d5adba` Show line notes below

Please log in to comment.

jquery / jquery-ui

0 notes on commit 3d5adba Show line notes below

0 notes on commit `3d5adba` Show line notes below