aboutsummaryrefslogtreecommitdiffstats
path: root/demos/menu
diff options
context:
space:
mode:
Diffstat (limited to 'demos/menu')
-rw-r--r--demos/menu/contextmenu.html6
-rw-r--r--demos/menu/default.html2
-rw-r--r--demos/menu/index.html1
-rw-r--r--demos/menu/topalignmenu.html80
4 files changed, 85 insertions, 4 deletions
diff --git a/demos/menu/contextmenu.html b/demos/menu/contextmenu.html
index 7513bca28..c4cba49e5 100644
--- a/demos/menu/contextmenu.html
+++ b/demos/menu/contextmenu.html
@@ -4,7 +4,7 @@
<meta charset="UTF-8" />
<title>jQuery UI Menu - Contextmenu demo</title>
<link href="../../themes/base/jquery.ui.all.css" rel="stylesheet" />
- <script src="../../jquery-1.5.1.js"></script>
+ <script src="../../jquery-1.6.2.js"></script>
<script src="../../ui/jquery.ui.core.js"></script>
<script src="../../ui/jquery.ui.position.js"></script>
<script src="../../ui/jquery.ui.widget.js"></script>
@@ -46,14 +46,14 @@
<li><a href="#Utrecht">Utrecht</a></li>
<li><a href="#Zurich">Zurich</a></li>
</ul>
-
+
<div id="log"></div>
</div><!-- End demo -->
<div class="demo-description">
-<p>TODO update - A simple contextmenu: Click the button, or tab to it and hit space to open the menu. Use the mouse or cursor keys to select an item, click it or hit enter to select it.</p>
+<p>A simple contextmenu: Click the button, or tab to it and hit space to open the menu. Use the mouse or cursor keys to select an item, click it or hit enter to select it.</p>
<p>The keyboard handling is part of the menu. Using the input option to menu is configured to add the key event handlers to the button, as that button gets focused when clicked.</p>
diff --git a/demos/menu/default.html b/demos/menu/default.html
index 40386112f..4ee61fc9e 100644
--- a/demos/menu/default.html
+++ b/demos/menu/default.html
@@ -4,7 +4,7 @@
<meta charset="UTF-8" />
<title>jQuery UI Menu - Default demo</title>
<link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" />
- <script src="../../jquery-1.5.1.js"></script>
+ <script src="../../jquery-1.6.2.js"></script>
<script src="../../ui/jquery.ui.core.js"></script>
<script src="../../ui/jquery.ui.widget.js"></script>
<script src="../../ui/jquery.ui.menu.js"></script>
diff --git a/demos/menu/index.html b/demos/menu/index.html
index 3088f9d7d..9983dbfd0 100644
--- a/demos/menu/index.html
+++ b/demos/menu/index.html
@@ -11,6 +11,7 @@
<ul>
<li class="demo-config-on"><a href="default.html">Default functionality</a></li>
<li><a href="contextmenu.html">Contextmenu</a></li>
+ <li><a href="topalignmenu.html">Top-aligned sub menus</a></li>
</ul>
</div>
</body>
diff --git a/demos/menu/topalignmenu.html b/demos/menu/topalignmenu.html
new file mode 100644
index 000000000..0339e343a
--- /dev/null
+++ b/demos/menu/topalignmenu.html
@@ -0,0 +1,80 @@
+<!doctype html>
+<html>
+<head>
+ <title>Menu Demo: Top-aligned Menu</title>
+ <link rel="stylesheet" href="../demos.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.6.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.menu.js"></script>
+ <script type="text/javascript">
+ $(function() {
+ $("#topMenu").menu({
+ position: { of: "ul:has(a.ui-state-focus):last" }
+ });
+ });
+ </script>
+ <style>
+ .ui-menu { width: 200px; margin-bottom: 2em; }
+ </style>
+</head>
+<body>
+
+<ul id="topMenu">
+ <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="#">Delphi</a>
+ <ul>
+ <li><a href="#">Ada</a></li>
+ <li><a href="#">Saarland</a></li>
+ <li><a href="#">Salzburg</a></li>
+ </ul>
+ </li>
+ <li><a href="#">Saarland</a></li>
+ <li>
+ <a href="#">Salzburg</a>
+ <ul>
+ <li>
+ <a href="#">Delphi</a>
+ <ul>
+ <li><a href="#">Ada</a></li>
+ <li><a href="#">Saarland</a></li>
+ <li><a href="#">Salzburg</a></li>
+ </ul>
+ </li>
+ <li>
+ <a href="#">Adamsville</a>
+ <ul>
+ <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="#">Delphi</a>
+ <ul>
+ <li><a href="#">Ada</a></li>
+ <li><a href="#">Saarland</a></li>
+ <li><a href="#">Salzburg</a></li>
+ </ul>
+ </li>
+ <li><a href="#">Saarland</a></li>
+ </ul>
+ </li>
+ <li><a href="#">Perch</a>
+ <ul>
+ <li><a href="#">Addyston</a></li>
+ <li><a href="#">Delphi</a></li>
+ <li><a href="#">Perch</a></li>
+ </ul>
+ </li>
+ </ul>
+ </li>
+</ul>
+
+</body>
+</html>