--- /dev/null
+<!doctype html>\r
+<html>\r
+<head>\r
+ <title>Menu Visual Test: Default</title>\r
+ <link rel="stylesheet" href="../visual.css" type="text/css" />\r
+ <link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css" type="text/css" title="ui-theme" />\r
+ <script type="text/javascript" src="../../../jquery-1.4.2.js"></script>\r
+ <script type="text/javascript" src="../../../ui/jquery.ui.core.js"></script>\r
+ <script type="text/javascript" src="../../../ui/jquery.ui.widget.js"></script>\r
+ <script type="text/javascript" src="../../../ui/jquery.ui.position.js"></script>\r
+ <script type="text/javascript" src="../../../ui/jquery.ui.autocomplete.js"></script>\r
+ <script type="text/javascript" src="http://jqueryui.com/themeroller/themeswitchertool/"></script>\r
+ <script type="text/javascript">\r
+ $(function() {\r
+ $.fn.themeswitcher && $('<div/>').css({\r
+ position: "absolute",\r
+ right: 10,\r
+ top: 10\r
+ }).appendTo(document.body).themeswitcher();\r
+ \r
+ var menus = $("#menu1, #menu2").menu({\r
+ selected: function(event, ui) {\r
+ $("#log").append("<div>Selected " + ui.item.text() + "</div>");\r
+ }\r
+ }).hide();\r
+ \r
+ \r
+ $("button").click(function(event) {\r
+ // TODO required to prevent the click handler below from handling this event\r
+ event.stopPropagation();\r
+ $("#menu" + this.id).menu("deactivate").show().position({\r
+ my: "left top",\r
+ at: "right top",\r
+ of: event.pageX > 0 ? event : this\r
+ });\r
+ $(document).one("click", function() {\r
+ menus.hide();\r
+ })\r
+ }).keydown(function(event) {\r
+ var menu = $("#menu" + this.id).data("menu");\r
+ if (menu.widget().is(":hidden"))\r
+ return;\r
+ event.stopPropagation();\r
+ switch (event.keyCode) {\r
+ case $.ui.keyCode.PAGE_UP:\r
+ menu.previousPage();\r
+ break;\r
+ case $.ui.keyCode.PAGE_DOWN:\r
+ menu.nextPage();\r
+ break;\r
+ case $.ui.keyCode.UP:\r
+ menu.previous();\r
+ break;\r
+ case $.ui.keyCode.DOWN:\r
+ menu.next();\r
+ event.preventDefault();\r
+ break;\r
+ case $.ui.keyCode.ENTER:\r
+ case $.ui.keyCode.TAB:\r
+ menu.select();\r
+ menu.widget().hide();\r
+ event.preventDefault();\r
+ break;\r
+ case $.ui.keyCode.ESCAPE:\r
+ menu.widget().hide();\r
+ break;\r
+ default:\r
+ clearTimeout(menu.filterTimer);\r
+ var prev = menu.previousFilter || "";\r
+ var character = String.fromCharCode(event.keyCode);\r
+ var skip = false;\r
+ if (character == prev) {\r
+ skip = true;\r
+ } else {\r
+ character = prev + character;\r
+ }\r
+ \r
+ var match = menu.widget().children("li").filter(function() {\r
+ return new RegExp("^" + character, "i").test($(this).text());\r
+ });\r
+ var match = skip && match.index(menu.active.next()) != -1 ? match.next() : match;\r
+ if (!match.length) {\r
+ character = String.fromCharCode(event.keyCode);\r
+ match = menu.widget().children("li").filter(function() {\r
+ return new RegExp("^" + character, "i").test($(this).text());\r
+ });\r
+ }\r
+ if (match.length) {\r
+ menu.activate(match);\r
+ if (match.length > 1) {\r
+ menu.previousFilter = character;\r
+ menu.filterTimer = setTimeout(function() {\r
+ delete menu.previousFilter;\r
+ }, 1000);\r
+ } else {\r
+ delete menu.previousFilter;\r
+ }\r
+ } else {\r
+ delete menu.previousFilter;\r
+ }\r
+ }\r
+ });\r
+ });\r
+ </script>\r
+ <style>\r
+ body { font-size:62.5%; }\r
+ .ui-menu { width: 200px; position: absolute; }\r
+ #menu2 { height: 200px; overflow: auto; }\r
+ </style>\r
+</head>\r
+<body>\r
+ \r
+<button id="1">Show context menu 1</button>\r
+\r
+<ul id="menu1">\r
+ <li><a href="#">Amsterdam</a></li>\r
+ <li><a href="#">Anaheim</a></li>\r
+ <li><a href="#">Cologne</a></li>\r
+ <li><a href="#">Frankfurt</a></li>\r
+ <li><a href="#">Magdeburg</a></li>\r
+ <li><a href="#">Munich</a></li>\r
+ <li><a href="#">Utrecht</a></li>\r
+ <li><a href="#">Zurich</a></li>\r
+</ul>\r
+\r
+<ul id="menu2">\r
+ <li><a href="#">Aberdeen</a></li>\r
+ <li><a href="#">Ada</a></li>\r
+ <li><a href="#">Adamsville</a></li>\r
+ <li><a href="#">Addyston</a></li>\r
+ <li><a href="#">Adelphi</a></li>\r
+ <li><a href="#">Adena</a></li>\r
+ <li><a href="#">Adrian</a></li>\r
+ <li><a href="#">Akron</a></li>\r
+ <li><a href="#">Albany</a></li>\r
+ <li><a href="#">Alexandria</a></li>\r
+ <li><a href="#">Alger</a></li>\r
+ <li><a href="#">Alledonia</a></li>\r
+ <li><a href="#">Alliance</a></li>\r
+ <li><a href="#">Alpha</a></li>\r
+ <li><a href="#">Alvada</a></li>\r
+ <li><a href="#">Alvordton</a></li>\r
+ <li><a href="#">Amanda</a></li>\r
+ <li><a href="#">Amelia</a></li>\r
+ <li><a href="#">Amesville</a></li>\r
+ <li><a href="#">Aberdeen</a></li>\r
+ <li><a href="#">Ada</a></li>\r
+ <li><a href="#">Adamsville</a></li>\r
+ <li><a href="#">Addyston</a></li>\r
+ <li><a href="#">Adelphi</a></li>\r
+ <li><a href="#">Adena</a></li>\r
+ <li><a href="#">Adrian</a></li>\r
+ <li><a href="#">Akron</a></li>\r
+ <li><a href="#">Albany</a></li>\r
+ <li><a href="#">Alexandria</a></li>\r
+ <li><a href="#">Alger</a></li>\r
+ <li><a href="#">Alledonia</a></li>\r
+ <li><a href="#">Alliance</a></li>\r
+ <li><a href="#">Alpha</a></li>\r
+ <li><a href="#">Alvada</a></li>\r
+ <li><a href="#">Alvordton</a></li>\r
+ <li><a href="#">Amanda</a></li>\r
+ <li><a href="#">Amelia</a></li>\r
+ <li><a href="#">Amesville</a></li>\r
+</ul>\r
+\r
+<div class="ui-widget" style="margin-top:2em; font-family:Arial">\r
+ Log:\r
+ <div id="log" style="height: 400px; width: 300px; overflow: auto;" class="ui-widget-content"></div>\r
+</div>\r
+\r
+<button id="2">Show context menu 2</button>\r
+\r
+</body>\r
+</html>\r
--- /dev/null
+<!doctype html>\r
+<html>\r
+<head>\r
+ <title>Menu Visual Test: Default</title>\r
+ <link rel="stylesheet" href="../visual.css" type="text/css" />\r
+ <link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css" type="text/css" title="ui-theme" />\r
+ <script type="text/javascript" src="../../../jquery-1.4.2.js"></script>\r
+ <script type="text/javascript" src="../../../ui/jquery.ui.core.js"></script>\r
+ <script type="text/javascript" src="../../../ui/jquery.ui.widget.js"></script>\r
+ <script type="text/javascript" src="../../../ui/jquery.ui.autocomplete.js"></script>\r
+ <script type="text/javascript" src="http://jqueryui.com/themeroller/themeswitchertool/"></script>\r
+ <script type="text/javascript">\r
+ $(function() {\r
+ $.fn.themeswitcher && $('<div/>').css({\r
+ position: "absolute",\r
+ right: 10,\r
+ top: 10\r
+ }).appendTo(document.body).themeswitcher();\r
+ \r
+ var menus = $("#menu1, #menu2").menu({\r
+ selected: function(event, ui) {\r
+ $("<div/>").text("Selected: " + ui.item.text()).appendTo("#log");\r
+ }\r
+ }).keydown(function(event) {\r
+ var menu = $(this).data("menu");\r
+ if (menu.widget().is(":hidden"))\r
+ return;\r
+ event.stopPropagation();\r
+ switch (event.keyCode) {\r
+ case $.ui.keyCode.PAGE_UP:\r
+ menu.previousPage();\r
+ event.preventDefault();\r
+ break;\r
+ case $.ui.keyCode.PAGE_DOWN:\r
+ menu.nextPage();\r
+ event.preventDefault();\r
+ break;\r
+ case $.ui.keyCode.UP:\r
+ menu.previous();\r
+ event.preventDefault();\r
+ break;\r
+ case $.ui.keyCode.DOWN:\r
+ menu.next();\r
+ event.preventDefault();\r
+ break;\r
+ case $.ui.keyCode.ENTER:\r
+ menu.select();\r
+ event.preventDefault();\r
+ break;\r
+ }\r
+ });\r
+\r
+ });\r
+ </script>\r
+ <style>\r
+ body { font-size:62.5%; }\r
+ .ui-menu { width: 200px; }\r
+ #menu2 { height: 200px; overflow: auto; }\r
+ </style>\r
+</head>\r
+<body>\r
+ \r
+<ul id="menu1" tabindex="0">\r
+ <li><a href="#">Aberdeen</a></li>\r
+ <li><a href="#">Ada</a></li>\r
+ <li><a href="#">Adamsville</a></li>\r
+ <li><a href="#">Addyston</a></li>\r
+ <li><a href="#">Adelphi</a></li>\r
+</ul>\r
+\r
+<ul id="menu2" tabindex="0">\r
+ <li><a href="#">Aberdeen</a></li>\r
+ <li><a href="#">Ada</a></li>\r
+ <li><a href="#">Adamsville</a></li>\r
+ <li><a href="#">Addyston</a></li>\r
+ <li><a href="#">Adelphi</a></li>\r
+ <li><a href="#">Adena</a></li>\r
+ <li><a href="#">Adrian</a></li>\r
+ <li><a href="#">Akron</a></li>\r
+ <li><a href="#">Albany</a></li>\r
+ <li><a href="#">Alexandria</a></li>\r
+ <li><a href="#">Alger</a></li>\r
+ <li><a href="#">Alledonia</a></li>\r
+ <li><a href="#">Alliance</a></li>\r
+ <li><a href="#">Alpha</a></li>\r
+ <li><a href="#">Alvada</a></li>\r
+ <li><a href="#">Alvordton</a></li>\r
+ <li><a href="#">Amanda</a></li>\r
+ <li><a href="#">Amelia</a></li>\r
+ <li><a href="#">Amesville</a></li>\r
+ <li><a href="#">Aberdeen</a></li>\r
+ <li><a href="#">Ada</a></li>\r
+ <li><a href="#">Adamsville</a></li>\r
+ <li><a href="#">Addyston</a></li>\r
+ <li><a href="#">Adelphi</a></li>\r
+ <li><a href="#">Adena</a></li>\r
+ <li><a href="#">Adrian</a></li>\r
+ <li><a href="#">Akron</a></li>\r
+ <li><a href="#">Albany</a></li>\r
+ <li><a href="#">Alexandria</a></li>\r
+ <li><a href="#">Alger</a></li>\r
+ <li><a href="#">Alledonia</a></li>\r
+ <li><a href="#">Alliance</a></li>\r
+ <li><a href="#">Alpha</a></li>\r
+ <li><a href="#">Alvada</a></li>\r
+ <li><a href="#">Alvordton</a></li>\r
+ <li><a href="#">Amanda</a></li>\r
+ <li><a href="#">Amelia</a></li>\r
+ <li><a href="#">Amesville</a></li>\r
+</ul>\r
+\r
+<div class="ui-widget" style="margin-top:2em; font-family:Arial">\r
+ Log:\r
+ <div id="log" style="height: 400px; width: 300px; overflow: auto;" class="ui-widget-content"></div>\r
+</div>\r
+\r
+</body>\r
+</html>\r
--- /dev/null
+<!doctype html>\r
+<html>\r
+<head>\r
+ <title>Menu Visual Test: Default</title>\r
+ <link rel="stylesheet" href="../visual.css" type="text/css" />\r
+ <link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css" type="text/css" title="ui-theme" />\r
+ <script type="text/javascript" src="../../../jquery-1.4.2.js"></script>\r
+ <script type="text/javascript" src="../../../ui/jquery.ui.core.js"></script>\r
+ <script type="text/javascript" src="../../../ui/jquery.ui.widget.js"></script>\r
+ <script type="text/javascript" src="../../../ui/jquery.ui.position.js"></script>\r
+ <script type="text/javascript" src="../../../ui/jquery.ui.autocomplete.js"></script>\r
+ <script type="text/javascript">\r
+ $(function() {\r
+ $.widget("ui.drilldown", {\r
+ _init: function() {\r
+ var self = this;\r
+ this.active = this.element;\r
+ \r
+ // hide submenus and create indicator icons\r
+ this.element.find("ul").hide().prev("a").prepend('<span class="ui-icon ui-icon-carat-1-e"></span>').end().filter(":first").show(); \r
+ \r
+ this.element.find("ul").menu({\r
+ selected: function(event, ui) {\r
+ var nested = $(">ul", ui.item);\r
+ if (!nested.length) {\r
+ self.element.find("h3").text(ui.item.text());\r
+ self.options.selected.apply(this, arguments);\r
+ return;\r
+ }\r
+ self.active = ui.item.parent();\r
+ // put a previous submenu back into its place and hide it\r
+ self.hideDown();\r
+ if (nested.length) {\r
+ // append to body in order to display the submenu above the parent menu, instead of inside of it\r
+ nested.appendTo(document.body).menu("deactivate").show().position({\r
+ my: "left top",\r
+ at: "left top",\r
+ of: self.element.children("ul:first")\r
+ // store the current submenu\r
+ }).data("menuparent", ui.item);\r
+ \r
+ self.active.data("submenu", nested);\r
+ }\r
+ }\r
+ });\r
+ },\r
+ \r
+ up: function() {\r
+ if (!this.active.data("menuparent"))\r
+ return;\r
+ this.hideDown();\r
+ this.active.menu("deactivate");\r
+ this.active = this.active.data("menuparent").parent();\r
+ },\r
+ \r
+ down: function() {\r
+ var submenu = this.active.data("submenu");\r
+ if (!submenu)\r
+ return;\r
+ submenu.data("menu").activate(submenu.children(":first"))\r
+ this.active = submenu;\r
+ },\r
+ \r
+ show: function() {\r
+ this.element.menu("deactivate").show();\r
+ this.active = this.element;\r
+ },\r
+ \r
+ hide: function() {\r
+ this.hideDown();\r
+ var child = this.active.hide(), parent;\r
+ while(child.data("menuparent")) {\r
+ parent = child.data("menuparent");\r
+ child.appendTo(parent).removeData("menuparent");\r
+ child = parent.parent().removeData("submenu").hide();\r
+ }\r
+ },\r
+ \r
+ hideDown: function() {\r
+ var submenu = this.active.data("submenu");\r
+ while(submenu) {\r
+ var parent = submenu.data("menuparent");\r
+ submenu.appendTo(parent).hide().removeData("menuparent");\r
+ parent.parent().removeData("submenu");\r
+ submenu = submenu.data("submenu");\r
+ };\r
+ }\r
+ });\r
+ \r
+ var nestedmenu = $("#drilldown").drilldown({\r
+ selected: function(event, ui) {\r
+ $("#log").append("<div>Selected " + ui.item.text() + "</div>");\r
+ }\r
+ });\r
+ \r
+ $().keydown(function(event) {\r
+ var menu = nestedmenu.data("drilldown").active.data("menu");\r
+ if (menu.widget().is(":hidden"))\r
+ return;\r
+ event.stopPropagation();\r
+ switch (event.keyCode) {\r
+ case $.ui.keyCode.PAGE_UP:\r
+ menu.previousPage();\r
+ break;\r
+ case $.ui.keyCode.PAGE_DOWN:\r
+ menu.nextPage();\r
+ break;\r
+ case $.ui.keyCode.UP:\r
+ menu.previous();\r
+ break;\r
+ case $.ui.keyCode.LEFT:\r
+ nestedmenu.nestedmenu("up");\r
+ break;\r
+ case $.ui.keyCode.RIGHT:\r
+ nestedmenu.nestedmenu("down");\r
+ break;\r
+ case $.ui.keyCode.DOWN:\r
+ menu.next();\r
+ event.preventDefault();\r
+ break;\r
+ case $.ui.keyCode.ENTER:\r
+ case $.ui.keyCode.TAB:\r
+ menu.select();\r
+ nestedmenu.nestedmenu("hide");\r
+ event.preventDefault();\r
+ break;\r
+ case $.ui.keyCode.ESCAPE:\r
+ nestedmenu.nestedmenu("hide");\r
+ break;\r
+ default:\r
+ clearTimeout(menu.filterTimer);\r
+ var prev = menu.previousFilter || "";\r
+ var character = String.fromCharCode(event.keyCode);\r
+ var skip = false;\r
+ if (character == prev) {\r
+ skip = true;\r
+ } else {\r
+ character = prev + character;\r
+ }\r
+ \r
+ var match = menu.widget().children("li").filter(function() {\r
+ return new RegExp("^" + character, "i").test($("a", this).text());\r
+ });\r
+ var match = skip && match.index(menu.active.next()) != -1 ? match.next() : match;\r
+ if (!match.length) {\r
+ character = String.fromCharCode(event.keyCode);\r
+ match = menu.widget().children("li").filter(function() {\r
+ return new RegExp("^" + character, "i").test($(this).text());\r
+ });\r
+ }\r
+ if (match.length) {\r
+ menu.activate(match);\r
+ if (match.length > 1) {\r
+ menu.previousFilter = character;\r
+ menu.filterTimer = setTimeout(function() {\r
+ delete menu.previousFilter;\r
+ }, 1000);\r
+ } else {\r
+ delete menu.previousFilter;\r
+ }\r
+ } else {\r
+ delete menu.previousFilter;\r
+ }\r
+ }\r
+ });\r
+ });\r
+ </script>\r
+ <style>\r
+ body { font-size:62.5%; }\r
+ .ui-menu { width: 200px; height: 170px; }\r
+ .ui-menu .ui-icon { float: right; }\r
+ </style>\r
+</head>\r
+<body>\r
+ \r
+<div id="drilldown">\r
+ <h3>Make a selection...</h3>\r
+ <ul>\r
+ <li>\r
+ <a href="#">Amsterdam</a>\r
+ <ul>\r
+ <li><a href="#">Aberdeen</a></li>\r
+ <li><a href="#">Ada</a></li>\r
+ <li>\r
+ <a href="#">Adamsville</a>\r
+ <ul>\r
+ <li><a href="#">Anaheim</a></li>\r
+ <li>\r
+ <a href="#">Cologne</a>\r
+ <ul>\r
+ <li><a href="#">Mberdeen</a></li>\r
+ <li><a href="#">Mda</a></li>\r
+ <li><a href="#">Mdamsville</a></li>\r
+ <li><a href="#">Mddyston</a></li>\r
+ <li><a href="#">Mmesville</a></li>\r
+ </ul>\r
+ </li>\r
+ <li><a href="#">Frankfurt</a></li>\r
+ </ul>\r
+ </li>\r
+ <li><a href="#">Addyston</a></li>\r
+ <li><a href="#">Amesville</a></li>\r
+ </ul>\r
+ </li>\r
+ <li><a href="#">Anaheim</a></li>\r
+ <li><a href="#">Cologne</a></li>\r
+ <li><a href="#">Frankfurt</a></li>\r
+ <li>\r
+ <a href="#">Magdeburg</a>\r
+ <ul>\r
+ <li><a href="#">Mberdeen</a></li>\r
+ <li><a href="#">Mda</a></li>\r
+ <li><a href="#">Mdamsville</a></li>\r
+ <li><a href="#">Mddyston</a></li>\r
+ <li><a href="#">Mmesville</a></li>\r
+ </ul>\r
+ </li>\r
+ <li><a href="#">Munich</a></li>\r
+ <li><a href="#">Utrecht</a></li>\r
+ <li><a href="#">Zurich</a></li>\r
+ </ul>\r
+</div>\r
+\r
+<div class="ui-widget" style="margin-top:2em; font-family:Arial">\r
+ Log:\r
+ <div id="log" style="height: 400px; width: 300px; overflow: auto;" class="ui-widget-content"></div>\r
+</div>\r
+\r
+</body>\r
+</html>\r
--- /dev/null
+<!doctype html>\r
+<html>\r
+<head>\r
+ <title>Menu Visual Test: Default</title>\r
+ <link rel="stylesheet" href="../visual.css" type="text/css" />\r
+ <link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css" type="text/css" title="ui-theme" />\r
+ <script type="text/javascript" src="../../../jquery-1.4.2.js"></script>\r
+ <script type="text/javascript" src="../../../ui/jquery.ui.core.js"></script>\r
+ <script type="text/javascript" src="../../../ui/jquery.ui.widget.js"></script>\r
+ <script type="text/javascript" src="../../../ui/jquery.ui.position.js"></script>\r
+ <script type="text/javascript" src="../../../ui/jquery.ui.autocomplete.js"></script>\r
+ <script type="text/javascript">\r
+ $(function() {\r
+ $.widget("ui.nestedmenu", {\r
+ _init: function() {\r
+ var self = this;\r
+ this.active = this.element;\r
+ \r
+ // hide submenus and create indicator icons\r
+ this.element.find("ul").hide().prev("a").prepend('<span class="ui-icon ui-icon-carat-1-e"></span>'); \r
+ \r
+ this.element.find("ul").andSelf().menu({\r
+ selected: this.options.selected,\r
+ focus: function(event, ui) {\r
+ self.active = ui.item.parent();\r
+ self.activeItem = ui.item;\r
+ // put a previous submenu back into its place and hide it\r
+ self.hideDown();\r
+ var nested = $(">ul", ui.item);\r
+ // only for mouse-events (should actually check event.originalEvent.type, but for keys, originalEvent is undefined...)\r
+ if (nested.length && /^mouse/.test(event.originalEvent.type)) {\r
+ self._openSubmenu(nested, ui.item);\r
+ }\r
+ }\r
+ })\r
+ },\r
+ \r
+ _openSubmenu: function(nested, item) {\r
+ // append to body in order to display the submenu above the parent menu, instead of inside of it\r
+ nested.appendTo(document.body).menu("deactivate").show().position({\r
+ my: "left top",\r
+ at: "right top",\r
+ of: item\r
+ // store the current submenu\r
+ }).data("menuparent", item);\r
+ \r
+ this.active.data("submenu", nested);\r
+ },\r
+ \r
+ up: function(event) {\r
+ if (!this.active.data("menuparent"))\r
+ return;\r
+ this.active.menu("deactivate");\r
+ this.active = this.active.data("menuparent").parent();\r
+ this.activeItem = this.active.data("menu").active;\r
+ this.hideDown();\r
+ },\r
+ \r
+ down: function(event) {\r
+ var submenu = this.active.data("submenu");\r
+ if (!submenu && this.activeItem) {\r
+ // try to open submenu or return(?); only mouseover opens submenu directly, key doesn't\r
+ var item = this.activeItem,\r
+ nested = item.children("ul");\r
+ if (!nested.length)\r
+ return;\r
+ this._openSubmenu(nested, item);\r
+ submenu = this.active.data("submenu");\r
+ }\r
+ submenu.data("menu").activate(event, submenu.children(":first"))\r
+ this.active = submenu;\r
+ },\r
+ \r
+ show: function() {\r
+ this.element.menu("deactivate").show();\r
+ this.active = this.element;\r
+ },\r
+ \r
+ hide: function() {\r
+ this.hideDown();\r
+ var child = this.active.hide(), parent;\r
+ while(child.data("menuparent")) {\r
+ parent = child.data("menuparent");\r
+ child.appendTo(parent).removeData("menuparent");\r
+ child = parent.parent().removeData("submenu").hide();\r
+ }\r
+ },\r
+ \r
+ hideDown: function() {\r
+ var submenu = this.active.data("submenu");\r
+ while(submenu) {\r
+ var parent = submenu.data("menuparent");\r
+ submenu.appendTo(parent).hide().removeData("menuparent");\r
+ parent.parent().removeData("submenu");\r
+ submenu = submenu.data("submenu");\r
+ };\r
+ }\r
+ });\r
+ \r
+ var nestedmenu = $("#menu").nestedmenu({\r
+ selected: function(event, ui) {\r
+ $("#log").append("<div>Selected " + ui.item.text() + "</div>");\r
+ }\r
+ }).hide();\r
+ \r
+ $("button").click(function(event) {\r
+ // TODO required to prevent the click handler below from handling this event\r
+ event.stopPropagation();\r
+ nestedmenu.nestedmenu("show").position({\r
+ my: "left top",\r
+ at: "right top",\r
+ of: event.pageX > 0 ? event : this\r
+ });\r
+ $(document).one("click", function() {\r
+ nestedmenu.nestedmenu("hide");\r
+ })\r
+ }).keydown(function(event) {\r
+ var menu = nestedmenu.data("nestedmenu").active.data("menu");\r
+ if (menu.widget().is(":hidden"))\r
+ return;\r
+ event.stopPropagation();\r
+ switch (event.keyCode) {\r
+ case $.ui.keyCode.PAGE_UP:\r
+ menu.previousPage(event);\r
+ break;\r
+ case $.ui.keyCode.PAGE_DOWN:\r
+ menu.nextPage(event);\r
+ break;\r
+ case $.ui.keyCode.UP:\r
+ menu.previous(event);\r
+ break;\r
+ case $.ui.keyCode.LEFT:\r
+ nestedmenu.nestedmenu("up", event);\r
+ break;\r
+ case $.ui.keyCode.RIGHT:\r
+ nestedmenu.nestedmenu("down", event);\r
+ break;\r
+ case $.ui.keyCode.DOWN:\r
+ menu.next(event);\r
+ event.preventDefault();\r
+ break;\r
+ case $.ui.keyCode.ENTER:\r
+ case $.ui.keyCode.TAB:\r
+ menu.select();\r
+ nestedmenu.nestedmenu("hide");\r
+ event.preventDefault();\r
+ break;\r
+ case $.ui.keyCode.ESCAPE:\r
+ nestedmenu.nestedmenu("hide");\r
+ break;\r
+ default:\r
+ clearTimeout(menu.filterTimer);\r
+ var prev = menu.previousFilter || "";\r
+ var character = String.fromCharCode(event.keyCode);\r
+ var skip = false;\r
+ if (character == prev) {\r
+ skip = true;\r
+ } else {\r
+ character = prev + character;\r
+ }\r
+ \r
+ var match = menu.widget().children("li").filter(function() {\r
+ return new RegExp("^" + character, "i").test($("a", this).text());\r
+ });\r
+ var match = skip && match.index(menu.active.next()) != -1 ? match.next() : match;\r
+ if (!match.length) {\r
+ character = String.fromCharCode(event.keyCode);\r
+ match = menu.widget().children("li").filter(function() {\r
+ return new RegExp("^" + character, "i").test($(this).text());\r
+ });\r
+ }\r
+ if (match.length) {\r
+ menu.activate(event, match);\r
+ if (match.length > 1) {\r
+ menu.previousFilter = character;\r
+ menu.filterTimer = setTimeout(function() {\r
+ delete menu.previousFilter;\r
+ }, 1000);\r
+ } else {\r
+ delete menu.previousFilter;\r
+ }\r
+ } else {\r
+ delete menu.previousFilter;\r
+ }\r
+ }\r
+ });\r
+ });\r
+ </script>\r
+ <style>\r
+ body { font-size:62.5%; }\r
+ .ui-menu { width: 200px; position: absolute; }\r
+ .ui-menu .ui-icon { float: right; }\r
+ </style>\r
+</head>\r
+<body>\r
+ \r
+<button>Show context menu</button>\r
+\r
+<ul id="menu">\r
+ <li>\r
+ <a href="#">Amsterdam</a>\r
+ <ul>\r
+ <li><a href="#">Aberdeen</a></li>\r
+ <li><a href="#">Ada</a></li>\r
+ <li>\r
+ <a href="#">Adamsville</a>\r
+ <ul>\r
+ <li><a href="#">Anaheim</a></li>\r
+ <li>\r
+ <a href="#">Cologne</a>\r
+ <ul>\r
+ <li><a href="#">Mberdeen</a></li>\r
+ <li><a href="#">Mda</a></li>\r
+ <li><a href="#">Mdamsville</a></li>\r
+ <li><a href="#">Mddyston</a></li>\r
+ <li><a href="#">Mmesville</a></li>\r
+ </ul>\r
+ </li>\r
+ <li><a href="#">Frankfurt</a></li>\r
+ </ul>\r
+ </li>\r
+ <li><a href="#">Addyston</a></li>\r
+ <li><a href="#">Amesville</a></li>\r
+ </ul>\r
+ </li>\r
+ <li><a href="#">Anaheim</a></li>\r
+ <li><a href="#">Cologne</a></li>\r
+ <li><a href="#">Frankfurt</a></li>\r
+ <li>\r
+ <a href="#">Magdeburg</a>\r
+ <ul>\r
+ <li><a href="#">Mberdeen</a></li>\r
+ <li><a href="#">Mda</a></li>\r
+ <li><a href="#">Mdamsville</a></li>\r
+ <li><a href="#">Mddyston</a></li>\r
+ <li><a href="#">Mmesville</a></li>\r
+ </ul>\r
+ </li>\r
+ <li><a href="#">Munich</a></li>\r
+ <li><a href="#">Utrecht</a></li>\r
+ <li><a href="#">Zurich</a></li>\r
+</ul>\r
+\r
+<div class="ui-widget" style="margin-top:2em; font-family:Arial">\r
+ Log:\r
+ <div id="log" style="height: 400px; width: 300px; overflow: auto;" class="ui-widget-content"></div>\r
+</div>\r
+\r
+</body>\r
+</html>\r
projects / jquery-ui.git / commitdiff