<a href="menu/menu.html">Menu</a>
<ul>
<li><a href="menu/contextmenu.html">Context Menu</a></li>
- <li><a href="menu/nested.html">Nested Menu</a></li>
+ <li><a href="menu/flyoutmenu.html">Flyout Menu</a></li>
+ <li><a href="menu/menubar.html">Menubar</a></li>
<li><a href="menu/drilldown.html">Drilldown Menu</a></li>
</ul>
</li>
--- /dev/null
+<!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.4.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" src="../../../external/jquery.bgiframe-2.1.2.js"></script>
+ <script type="text/javascript" src="flyoutmenu.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 menu = $("#menu");
+
+ var button = $("button").click(function(event) {
+ // TODO required to prevent the click handler below from handling this event
+ event.stopPropagation();
+ menu.flyoutmenu("show")
+ //.attr("tabIndex", 0)
+ .focus()
+ .css({
+ top: 0,
+ left: 0
+ })
+ .position({
+ my: "left top",
+ at: "right top",
+ of: this
+ });
+ $(document).one("click", function() {
+ menu.flyoutmenu("hide");
+ });
+ });
+
+ menu.flyoutmenu({
+ //input: button,
+ select: function(event, ui) {
+ $("#log").append("<div>Selected " + ui.item.children("a").text() + "</div>");
+ button.focus();
+ }
+ }).hide();
+ });
+ </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>
+<br/>
+<select>
+ <option>some option with some text</option>
+</select>
+
+<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>
/*
- * jQuery UI flyout menu
- * - written for jQuery UI 1.9 milestone 2 using the widget factory
- * Dual licensed under the MIT (MIT-LICENSE.txt)
- * and GPL (GPL-LICENSE.txt) licenses.
- *
- * modified from: http://view.jqueryui.com/menu/tests/visual/menu/nested.html
- * by: Michael Lang, http://nexul.com/
+ * jQuery UI flyoutmenu
*
+ * backported from Michael Lang's fork: http://www.nexul.com/prototypes/toolbar/demo.html
*/
(function($) {
return value.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, "\\$&");
}
var match = self.activeItem.parent("ul").children("li").filter(function() {
+ // TODO why filter child anchor here, but not in the filter below?
return new RegExp("^" + escape(character), "i").test($("a", this).text());
});
var match = skip && match.index(self.active.next()) != -1 ? match.next() : match;
if (!match.length) {
character = String.fromCharCode(event.keyCode);
+ // TODO why use self.widget() here instead of self.activeItem??
match = self.widget().children("li").filter(function() {
return new RegExp("^" + escape(character), "i").test($(this).text());
});
/*
- * jQuery UI flyout menu
- * - written for jQuery UI 1.9 milestone 2 using the widget factory
- *
- * Copyright (c) 2010 Michael Lang, http://nexul.com/
- * Dual licensed under the MIT (MIT-LICENSE.txt)
- * and GPL (GPL-LICENSE.txt) licenses.
+ * jQuery UI menubar
*
+ * backported from Michael Lang's fork: http://www.nexul.com/prototypes/toolbar/demo.html
*/
(function($) {
+++ /dev/null
-<!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.4.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" src="../../../external/jquery.bgiframe-2.1.2.js"></script>
- <script type="text/javascript" src="flyoutmenu.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 menu = $("#menu");
-
- var button = $("button").click(function(event) {
- // TODO required to prevent the click handler below from handling this event
- event.stopPropagation();
- menu.flyoutmenu("show")
- //.attr("tabIndex", 0)
- .focus()
- .css({
- top: 0,
- left: 0
- })
- .position({
- my: "left top",
- at: "right top",
- of: this
- });
- $(document).one("click", function() {
- menu.flyoutmenu("hide");
- });
- });
-
- menu.flyoutmenu({
- //input: button,
- select: function(event, ui) {
- $("#log").append("<div>Selected " + ui.item.children("a").text() + "</div>");
- button.focus();
- }
- }).hide();
- });
- </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>
-<br/>
-<select>
- <option>some option with some text</option>
-</select>
-
-<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>
projects / jquery-ui.git / commitdiff