github
Advanced Search
  • Home
  • Pricing and Signup
  • Explore GitHub
  • Blog
  • Login

jquery / jquery-ui

  • Admin
  • Watch Unwatch
  • Fork
  • Your Fork
  • Pull Request
  • Download Source
    • 249
    • 27
  • Source
  • Commits
  • Network (27)
  • Graphs
  • Tree: 3d5adba

click here to add a description

click here to add a homepage

  • Switch Branches (4)
    • bind
    • master
    • panel
    • tooltip
  • Switch Tags (15)
    • 1.8rc3
    • 1.8rc2
    • 1.8rc1
    • 1.8b1
    • 1.8a2
    • 1.8a1
    • 1.8
    • 1.7
    • 1.6rc6
    • 1.6rc5
    • 1.6rc3
    • 1.6rc2
    • 1.6
    • 1.5.2
    • 1.5.1
  • Comments
Sending Request…

The official jQuery user interface library. — Read more

  Cancel

http://jqueryui.com/

  Cancel
  • Private
  • Read-Only
  • HTTP Read-Only

This URL has Read+Write access

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

0 notes on commit 3d5adba

Please log in to comment.
Blog | Support | Training | Contact | API | Status | Twitter | Help | Security
© 2010 GitHub Inc. All rights reserved. | Terms of Service | Privacy Policy
Powered by the Dedicated Servers and
Cloud Computing of Rackspace Hosting®
Dedicated Server