jquery / jquery-ui

Source
Commits
Network (27)
Graphs
Tree: d4ad2cb

The official jQuery user interface library. — Read more

This URL has Read+Write access

line-endings

jzaefferer (author)

Sat Mar 20 13:51:53 -0700 2010

commit d4ad2cb837565b16f7a11558a0f94c8c799d8522
tree f601380d295a741886faca55200f024ffdf984d2
parent 8f680fb347add9f14999a8f5c8e328c4b9a8fe1c

M	tests/visual/menu/contextmenu.html	350 ••••
M	tests/visual/menu/default.html	236 ••••
M	tests/visual/menu/drilldown.html	460 ••••
M	tests/visual/menu/nested.html	500 ••••

tests/visual/menu/contextmenu.html

View file @ d4ad2cb

@@ -1,175 +1,175 @@
-<!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.autocomplete.js"></script>
-  <script type="text/javascript" src="http://jqueryui.com/themeroller/themeswitchertool/"></script>
-  <script type="text/javascript">
-  $(function() {
-    $.fn.themeswitcher && $('<div/>').css({
-      position: "absolute",
-      right: 10,
-      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) {
-      // TODO required to prevent the click handler below from handling this event
-      event.stopPropagation();
-      $("#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();
-      })
-    }).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();
-        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($(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(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; }
-    #menu2 { height: 200px; overflow: auto; }
-  </style>
-</head>
-<body>
-  
-<button id="1">Show context menu 1</button>
-
-<ul id="menu1">
-  <li><a href="#">Amsterdam</a></li>
-  <li><a href="#">Anaheim</a></li>
-  <li><a href="#">Cologne</a></li>
-  <li><a href="#">Frankfurt</a></li>
-  <li><a href="#">Magdeburg</a></li>
-  <li><a href="#">Munich</a></li>
-  <li><a href="#">Utrecht</a></li>
-  <li><a href="#">Zurich</a></li>
-</ul>
-
-<ul id="menu2">
-  <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>
-  <li><a href="#">Adena</a></li>
-  <li><a href="#">Adrian</a></li>
-  <li><a href="#">Akron</a></li>
-  <li><a href="#">Albany</a></li>
-  <li><a href="#">Alexandria</a></li>
-  <li><a href="#">Alger</a></li>
-  <li><a href="#">Alledonia</a></li>
-  <li><a href="#">Alliance</a></li>
-  <li><a href="#">Alpha</a></li>
-  <li><a href="#">Alvada</a></li>
-  <li><a href="#">Alvordton</a></li>
-  <li><a href="#">Amanda</a></li>
-  <li><a href="#">Amelia</a></li>
-  <li><a href="#">Amesville</a></li>
-  <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>
-  <li><a href="#">Adena</a></li>
-  <li><a href="#">Adrian</a></li>
-  <li><a href="#">Akron</a></li>
-  <li><a href="#">Albany</a></li>
-  <li><a href="#">Alexandria</a></li>
-  <li><a href="#">Alger</a></li>
-  <li><a href="#">Alledonia</a></li>
-  <li><a href="#">Alliance</a></li>
-  <li><a href="#">Alpha</a></li>
-  <li><a href="#">Alvada</a></li>
-  <li><a href="#">Alvordton</a></li>
-  <li><a href="#">Amanda</a></li>
-  <li><a href="#">Amelia</a></li>
-  <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>
+<!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.autocomplete.js"></script>
+  <script type="text/javascript" src="http://jqueryui.com/themeroller/themeswitchertool/"></script>
+  <script type="text/javascript">
+  $(function() {
+    $.fn.themeswitcher && $('<div/>').css({
+      position: "absolute",
+      right: 10,
+      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) {
+      // TODO required to prevent the click handler below from handling this event
+      event.stopPropagation();
+      $("#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();
+      })
+    }).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();
+        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($(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(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; }
+    #menu2 { height: 200px; overflow: auto; }
+  </style>
+</head>
+<body>
+  
+<button id="1">Show context menu 1</button>
+
+<ul id="menu1">
+  <li><a href="#">Amsterdam</a></li>
+  <li><a href="#">Anaheim</a></li>
+  <li><a href="#">Cologne</a></li>
+  <li><a href="#">Frankfurt</a></li>
+  <li><a href="#">Magdeburg</a></li>
+  <li><a href="#">Munich</a></li>
+  <li><a href="#">Utrecht</a></li>
+  <li><a href="#">Zurich</a></li>
+</ul>
+
+<ul id="menu2">
+  <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>
+  <li><a href="#">Adena</a></li>
+  <li><a href="#">Adrian</a></li>
+  <li><a href="#">Akron</a></li>
+  <li><a href="#">Albany</a></li>
+  <li><a href="#">Alexandria</a></li>
+  <li><a href="#">Alger</a></li>
+  <li><a href="#">Alledonia</a></li>
+  <li><a href="#">Alliance</a></li>
+  <li><a href="#">Alpha</a></li>
+  <li><a href="#">Alvada</a></li>
+  <li><a href="#">Alvordton</a></li>
+  <li><a href="#">Amanda</a></li>
+  <li><a href="#">Amelia</a></li>
+  <li><a href="#">Amesville</a></li>
+  <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>
+  <li><a href="#">Adena</a></li>
+  <li><a href="#">Adrian</a></li>
+  <li><a href="#">Akron</a></li>
+  <li><a href="#">Albany</a></li>
+  <li><a href="#">Alexandria</a></li>
+  <li><a href="#">Alger</a></li>
+  <li><a href="#">Alledonia</a></li>
+  <li><a href="#">Alliance</a></li>
+  <li><a href="#">Alpha</a></li>
+  <li><a href="#">Alvada</a></li>
+  <li><a href="#">Alvordton</a></li>
+  <li><a href="#">Amanda</a></li>
+  <li><a href="#">Amelia</a></li>
+  <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>

tests/visual/menu/default.html

View file @ d4ad2cb

@@ -1,118 +1,118 @@
-<!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.autocomplete.js"></script>
-  <script type="text/javascript" src="http://jqueryui.com/themeroller/themeswitchertool/"></script>
-  <script type="text/javascript">
-  $(function() {
-    $.fn.themeswitcher && $('<div/>').css({
-      position: "absolute",
-      right: 10,
-      top: 10
-    }).appendTo(document.body).themeswitcher();
-    
-    var menus = $("#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;
-      }
-    });
-
-  });
-  </script>
-  <style>
-    body { font-size:62.5%; }
-    .ui-menu { width: 200px; }
-    #menu2 { height: 200px; overflow: auto; }
-  </style>
-</head>
-<body>
-  
-<ul id="menu1" tabindex="0">
-  <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">
-  <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>
-  <li><a href="#">Adena</a></li>
-  <li><a href="#">Adrian</a></li>
-  <li><a href="#">Akron</a></li>
-  <li><a href="#">Albany</a></li>
-  <li><a href="#">Alexandria</a></li>
-  <li><a href="#">Alger</a></li>
-  <li><a href="#">Alledonia</a></li>
-  <li><a href="#">Alliance</a></li>
-  <li><a href="#">Alpha</a></li>
-  <li><a href="#">Alvada</a></li>
-  <li><a href="#">Alvordton</a></li>
-  <li><a href="#">Amanda</a></li>
-  <li><a href="#">Amelia</a></li>
-  <li><a href="#">Amesville</a></li>
-  <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>
-  <li><a href="#">Adena</a></li>
-  <li><a href="#">Adrian</a></li>
-  <li><a href="#">Akron</a></li>
-  <li><a href="#">Albany</a></li>
-  <li><a href="#">Alexandria</a></li>
-  <li><a href="#">Alger</a></li>
-  <li><a href="#">Alledonia</a></li>
-  <li><a href="#">Alliance</a></li>
-  <li><a href="#">Alpha</a></li>
-  <li><a href="#">Alvada</a></li>
-  <li><a href="#">Alvordton</a></li>
-  <li><a href="#">Amanda</a></li>
-  <li><a href="#">Amelia</a></li>
-  <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>
-
-</body>
-</html>
+<!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.autocomplete.js"></script>
+  <script type="text/javascript" src="http://jqueryui.com/themeroller/themeswitchertool/"></script>
+  <script type="text/javascript">
+  $(function() {
+    $.fn.themeswitcher && $('<div/>').css({
+      position: "absolute",
+      right: 10,
+      top: 10
+    }).appendTo(document.body).themeswitcher();
+    
+    var menus = $("#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;
+      }
+    });
+
+  });
+  </script>
+  <style>
+    body { font-size:62.5%; }
+    .ui-menu { width: 200px; }
+    #menu2 { height: 200px; overflow: auto; }
+  </style>
+</head>
+<body>
+  
+<ul id="menu1" tabindex="0">
+  <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">
+  <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>
+  <li><a href="#">Adena</a></li>
+  <li><a href="#">Adrian</a></li>
+  <li><a href="#">Akron</a></li>
+  <li><a href="#">Albany</a></li>
+  <li><a href="#">Alexandria</a></li>
+  <li><a href="#">Alger</a></li>
+  <li><a href="#">Alledonia</a></li>
+  <li><a href="#">Alliance</a></li>
+  <li><a href="#">Alpha</a></li>
+  <li><a href="#">Alvada</a></li>
+  <li><a href="#">Alvordton</a></li>
+  <li><a href="#">Amanda</a></li>
+  <li><a href="#">Amelia</a></li>
+  <li><a href="#">Amesville</a></li>
+  <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>
+  <li><a href="#">Adena</a></li>
+  <li><a href="#">Adrian</a></li>
+  <li><a href="#">Akron</a></li>
+  <li><a href="#">Albany</a></li>
+  <li><a href="#">Alexandria</a></li>
+  <li><a href="#">Alger</a></li>
+  <li><a href="#">Alledonia</a></li>
+  <li><a href="#">Alliance</a></li>
+  <li><a href="#">Alpha</a></li>
+  <li><a href="#">Alvada</a></li>
+  <li><a href="#">Alvordton</a></li>
+  <li><a href="#">Amanda</a></li>
+  <li><a href="#">Amelia</a></li>
+  <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>
+
+</body>
+</html>

tests/visual/menu/drilldown.html

View file @ d4ad2cb

@@ -1,230 +1,230 @@
-<!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.autocomplete.js"></script>
-  <script type="text/javascript">
-  $(function() {
-    $.widget("ui.drilldown", {
-      _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>').end().filter(":first").show();  
-        
-        this.element.find("ul").menu({
-          selected: function(event, ui) {
-            var nested = $(">ul", ui.item);
-            if (!nested.length) {
-              self.element.find("h3").text(ui.item.text());
-              self.options.selected.apply(this, arguments);
-              return;
-            }
-            self.active = ui.item.parent();
-            // put a previous submenu back into its place and hide it
-            self.hideDown();
-            if (nested.length) {
-              // append to body in order to display the submenu above the parent menu, instead of inside of it
-              nested.appendTo(document.body).menu("deactivate").show().position({
-                my: "left top",
-                at: "left top",
-                of: self.element.children("ul:first")
-              // store the current submenu
-              }).data("menuparent", ui.item);
-              
-              self.active.data("submenu", nested);
-            }
-          }
-        });
-      },
-      
-      up: function() {
-        if (!this.active.data("menuparent"))
-          return;
-        this.hideDown();
-        this.active.menu("deactivate");
-        this.active = this.active.data("menuparent").parent();
-      },
-      
-      down: function() {
-        var submenu = this.active.data("submenu");
-        if (!submenu)
-          return;
-        submenu.data("menu").activate(submenu.children(":first"))
-        this.active = submenu;
-      },
-      
-      show: function() {
-        this.element.menu("deactivate").show();
-        this.active = this.element;
-      },
-      
-      hide: function() {
-        this.hideDown();
-        var child = this.active.hide(), parent;
-        while(child.data("menuparent")) {
-          parent = child.data("menuparent");
-          child.appendTo(parent).removeData("menuparent");
-          child = parent.parent().removeData("submenu").hide();
-        }
-      },
-      
-      hideDown: function() {
-        var submenu = this.active.data("submenu");
-        while(submenu) {
-          var parent = submenu.data("menuparent");
-          submenu.appendTo(parent).hide().removeData("menuparent");
-          parent.parent().removeData("submenu");
-          submenu = submenu.data("submenu");
-        };
-      }
-    });
-    
-    var nestedmenu = $("#drilldown").drilldown({
-      selected: function(event, ui) {
-        $("#log").append("<div>Selected " + ui.item.text() + "</div>");
-      }
-    });
-    
-    $().keydown(function(event) {
-      var menu = nestedmenu.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:
-        nestedmenu.nestedmenu("up");
-        break;
-      case $.ui.keyCode.RIGHT:
-        nestedmenu.nestedmenu("down");
-        break;
-      case $.ui.keyCode.DOWN:
-        menu.next();
-        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(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-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>
-</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>
+<!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.autocomplete.js"></script>
+  <script type="text/javascript">
+  $(function() {
+    $.widget("ui.drilldown", {
+      _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>').end().filter(":first").show();  
+        
+        this.element.find("ul").menu({
+          selected: function(event, ui) {
+            var nested = $(">ul", ui.item);
+            if (!nested.length) {
+              self.element.find("h3").text(ui.item.text());
+              self.options.selected.apply(this, arguments);
+              return;
+            }
+            self.active = ui.item.parent();
+            // put a previous submenu back into its place and hide it
+            self.hideDown();
+            if (nested.length) {
+              // append to body in order to display the submenu above the parent menu, instead of inside of it
+              nested.appendTo(document.body).menu("deactivate").show().position({
+                my: "left top",
+                at: "left top",
+                of: self.element.children("ul:first")
+              // store the current submenu
+              }).data("menuparent", ui.item);
+              
+              self.active.data("submenu", nested);
+            }
+          }
+        });
+      },
+      
+      up: function() {
+        if (!this.active.data("menuparent"))
+          return;
+        this.hideDown();
+        this.active.menu("deactivate");
+        this.active = this.active.data("menuparent").parent();
+      },
+      
+      down: function() {
+        var submenu = this.active.data("submenu");
+        if (!submenu)
+          return;
+        submenu.data("menu").activate(submenu.children(":first"))
+        this.active = submenu;
+      },
+      
+      show: function() {
+        this.element.menu("deactivate").show();
+        this.active = this.element;
+      },
+      
+      hide: function() {
+        this.hideDown();
+        var child = this.active.hide(), parent;
+        while(child.data("menuparent")) {
+          parent = child.data("menuparent");
+          child.appendTo(parent).removeData("menuparent");
+          child = parent.parent().removeData("submenu").hide();
+        }
+      },
+      
+      hideDown: function() {
+        var submenu = this.active.data("submenu");
+        while(submenu) {
+          var parent = submenu.data("menuparent");
+          submenu.appendTo(parent).hide().removeData("menuparent");
+          parent.parent().removeData("submenu");
+          submenu = submenu.data("submenu");
+        };
+      }
+    });
+    
+    var nestedmenu = $("#drilldown").drilldown({
+      selected: function(event, ui) {
+        $("#log").append("<div>Selected " + ui.item.text() + "</div>");
+      }
+    });
+    
+    $().keydown(function(event) {
+      var menu = nestedmenu.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:
+        nestedmenu.nestedmenu("up");
+        break;
+      case $.ui.keyCode.RIGHT:
+        nestedmenu.nestedmenu("down");
+        break;
+      case $.ui.keyCode.DOWN:
+        menu.next();
+        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(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-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>
+</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>

tests/visual/menu/nested.html

View file @ d4ad2cb

@@ -1,250 +1,250 @@
-<!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.autocomplete.js"></script>
-  <script type="text/javascript">
-  $(function() {
-    $.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;
-            // put a previous submenu back into its place and hide it
-            self.hideDown();
-            var nested = $(">ul", ui.item);
-            // only for mouse-events (should actually check event.originalEvent.type, but for keys, originalEvent is undefined...)
-            if (nested.length && /^mouse/.test(event.originalEvent.type)) {
-              self._openSubmenu(nested, ui.item);
-            }
-          }
-        })
-      },
-      
-      _openSubmenu: function(nested, item) {
-        // append to body in order to display the submenu above the parent menu, instead of inside of it
-        nested.appendTo(document.body).menu("deactivate").show().position({
-          my: "left top",
-          at: "right top",
-          of: item
-        // store the current submenu
-        }).data("menuparent", item);
-        
-        this.active.data("submenu", nested);
-      },
-      
-      up: function(event) {
-        if (!this.active.data("menuparent"))
-          return;
-        this.active.menu("deactivate");
-        this.active = this.active.data("menuparent").parent();
-        this.activeItem = this.active.data("menu").active;
-        this.hideDown();
-      },
-      
-      down: function(event) {
-        var submenu = this.active.data("submenu");
-        if (!submenu && this.activeItem) {
-          // try to open submenu or return(?); only mouseover opens submenu directly, key doesn't
-          var item = this.activeItem,
-            nested = item.children("ul");
-          if (!nested.length)
-            return;
-          this._openSubmenu(nested, item);
-          submenu = this.active.data("submenu");
-        }
-        submenu.data("menu").activate(event, submenu.children(":first"))
-        this.active = submenu;
-      },
-      
-      show: function() {
-        this.element.menu("deactivate").show();
-        this.active = this.element;
-      },
-      
-      hide: function() {
-        this.hideDown();
-        var child = this.active.hide(), parent;
-        while(child.data("menuparent")) {
-          parent = child.data("menuparent");
-          child.appendTo(parent).removeData("menuparent");
-          child = parent.parent().removeData("submenu").hide();
-        }
-      },
-      
-      hideDown: function() {
-        var submenu = this.active.data("submenu");
-        while(submenu) {
-          var parent = submenu.data("menuparent");
-          submenu.appendTo(parent).hide().removeData("menuparent");
-          parent.parent().removeData("submenu");
-          submenu = submenu.data("submenu");
-        };
-      }
-    });
-    
-    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").position({
-        my: "left top",
-        at: "right top",
-        of: event.pageX > 0 ? event : 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; }
-  </style>
-</head>
-<body>
-  
-<button>Show context menu</button>
-
-<ul id="menu">
-  <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>
-
-<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>
+<!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.autocomplete.js"></script>
+  <script type="text/javascript">
+  $(function() {
+    $.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;
+            // put a previous submenu back into its place and hide it
+            self.hideDown();
+            var nested = $(">ul", ui.item);
+            // only for mouse-events (should actually check event.originalEvent.type, but for keys, originalEvent is undefined...)
+            if (nested.length && /^mouse/.test(event.originalEvent.type)) {
+              self._openSubmenu(nested, ui.item);
+            }
+          }
+        })
+      },
+      
+      _openSubmenu: function(nested, item) {
+        // append to body in order to display the submenu above the parent menu, instead of inside of it
+        nested.appendTo(document.body).menu("deactivate").show().position({
+          my: "left top",
+          at: "right top",
+          of: item
+        // store the current submenu
+        }).data("menuparent", item);
+        
+        this.active.data("submenu", nested);
+      },
+      
+      up: function(event) {
+        if (!this.active.data("menuparent"))
+          return;
+        this.active.menu("deactivate");
+        this.active = this.active.data("menuparent").parent();
+        this.activeItem = this.active.data("menu").active;
+        this.hideDown();
+      },
+      
+      down: function(event) {
+        var submenu = this.active.data("submenu");
+        if (!submenu && this.activeItem) {
+          // try to open submenu or return(?); only mouseover opens submenu directly, key doesn't
+          var item = this.activeItem,
+            nested = item.children("ul");
+          if (!nested.length)
+            return;
+          this._openSubmenu(nested, item);
+          submenu = this.active.data("submenu");
+        }
+        submenu.data("menu").activate(event, submenu.children(":first"))
+        this.active = submenu;
+      },
+      
+      show: function() {
+        this.element.menu("deactivate").show();
+        this.active = this.element;
+      },
+      
+      hide: function() {
+        this.hideDown();
+        var child = this.active.hide(), parent;
+        while(child.data("menuparent")) {
+          parent = child.data("menuparent");
+          child.appendTo(parent).removeData("menuparent");
+          child = parent.parent().removeData("submenu").hide();
+        }
+      },
+      
+      hideDown: function() {
+        var submenu = this.active.data("submenu");
+        while(submenu) {
+          var parent = submenu.data("menuparent");
+          submenu.appendTo(parent).hide().removeData("menuparent");
+          parent.parent().removeData("submenu");
+          submenu = submenu.data("submenu");
+        };
+      }
+    });
+    
+    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").position({
+        my: "left top",
+        at: "right top",
+        of: event.pageX > 0 ? event : 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; }
+  </style>
+</head>
+<body>
+  
+<button>Show context menu</button>
+
+<ul id="menu">
+  <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>
+
+<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>

0 notes on commit `d4ad2cb` Show line notes below

Please log in to comment.

...	...	@@ -1,175 +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>
	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>

...	...	@@ -1,118 +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>
	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>

...	...	@@ -1,230 +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>
	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>

...	...	@@ -1,250 +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>
	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>

jquery / jquery-ui

0 notes on commit d4ad2cb Show line notes below

0 notes on commit `d4ad2cb` Show line notes below