diff options
Diffstat (limited to 'tests/visual/menu/drilldown2.html')
| -rw-r--r-- | tests/visual/menu/drilldown2.html | 235 |
1 files changed, 0 insertions, 235 deletions
diff --git a/tests/visual/menu/drilldown2.html b/tests/visual/menu/drilldown2.html deleted file mode 100644 index 0c18c3679..000000000 --- a/tests/visual/menu/drilldown2.html +++ /dev/null @@ -1,235 +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.2.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.button.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.autocomplete.js"></script> - <script type="text/javascript"> - $(function() { - $.widget("ui.drilldown", { - _init: function() { - var self = this; - this.active = this.element.find(">ul").attr("tabindex", 0); - - // hide submenus and create indicator icons - 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({ - focus: function(event, ui) { - self.activeItem = ui.item; - }, - selected: function(event, ui) { - if (this != self.active[0]) { - return; - } - var nested = $(">ul", ui.item); - if (nested.length) { - self._open(nested); - } else { - self.element.find("h3").text(ui.item.text()); - self.options.selected.apply(this, arguments); - } - } - }); - - this.back = this.element.children(":last").button({ - icons: { - primary: "ui-icon-carat-1-w" - } - }).click(function() { - self.up(); - return false; - }).hide(); - }, - - _open: function(submenu) { - this.active = submenu.show().css({ - top: 0, - left: 0 - }).position({ - my: "left top", - at: "left top", - of: this.widget() - }); - this.back.show(); - }, - - up: function() { - if (this.active.parent()[0] == this.element[0]) { - return; - } - this.active.hide(); - this.active = this.active.parent().parent().show(); - if (!this.active.parent().parent().is(":ui-menu")) { - this.back.hide(); - } - }, - - down: function(event) { - var nested = this.activeItem.find(">ul"); - if (nested.length) { - this._open(nested); - nested.menu("activate", event, nested.children(":first")) - } - }, - - show: function() { - }, - - hide: function() { - }, - - widget: function() { - return this.element.find(">ul"); - } - }); - - var drilldown = $("#drilldown").drilldown({ - selected: function(event, ui) { - $("#log").append("<div>Selected " + ui.item.text() + "</div>"); - } - }); - - drilldown.drilldown("widget").keydown(function(event) { - var menu = drilldown.data("drilldown").active.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.LEFT: - drilldown.drilldown("up"); - break; - case $.ui.keyCode.RIGHT: - drilldown.drilldown("down"); - break; - case $.ui.keyCode.DOWN: - menu.next(); - event.preventDefault(); - break; - case $.ui.keyCode.ENTER: - case $.ui.keyCode.TAB: - menu.select(); - drilldown.drilldown("hide"); - event.preventDefault(); - break; - case $.ui.keyCode.ESCAPE: - drilldown.drilldown("hide", event); - 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; height: 170px; } - .ui-menu .ui-menu { position: absolute; } - .ui-menu .ui-icon { float: right; } - </style> -</head> -<body> - -<div id="drilldown"> - <h3>Make a selection...</h3> - <ul> - <li> - <a href="#">Amsterdam</a> - <ul> - <li><a href="#">Aberdeen</a></li> - <li><a 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 href="#">Anaheim</a></li> - <li><a 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> - <a href="#">Go back</a> -</div> - -<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> |