Commit 92723de7f5a0f0c3ff7ea1f01ce8062ffee7dcae to jquery's jquery-ui

demos/autocomplete/categories.html

View file @ 92723de

@@ -8,6 +8,7 @@
   <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="../../ui/jquery.ui.autocomplete.js"></script>
   <link type="text/css" href="../demos.css" rel="stylesheet" />
   <style type="text/css">

demos/autocomplete/combobox.html

View file @ 92723de

@@ -9,6 +9,7 @@
   <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
   <script type="text/javascript" src="../../ui/jquery.ui.button.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="../../ui/jquery.ui.autocomplete.js"></script>
   <script type="text/javascript" src="../../ui/jquery.ui.tooltip.js"></script>
   <link type="text/css" href="../demos.css" rel="stylesheet" />

demos/autocomplete/custom-data.html

View file @ 92723de

@@ -8,6 +8,7 @@
   <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="../../ui/jquery.ui.autocomplete.js"></script>
   <link type="text/css" href="../demos.css" rel="stylesheet" />
   <style type="text/css">

demos/autocomplete/default.html

View file @ 92723de

@@ -8,6 +8,7 @@
   <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="../../ui/jquery.ui.autocomplete.js"></script>
   <link type="text/css" href="../demos.css" rel="stylesheet" />
   <script type="text/javascript">

demos/autocomplete/folding.html

View file @ 92723de

@@ -8,6 +8,7 @@
   <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="../../ui/jquery.ui.autocomplete.js"></script>
   <link type="text/css" href="../demos.css" rel="stylesheet" />
   <script type="text/javascript">

demos/autocomplete/multiple-remote.html

View file @ 92723de

@@ -8,6 +8,7 @@
   <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="../../ui/jquery.ui.autocomplete.js"></script>
   <link type="text/css" href="../demos.css" rel="stylesheet" />
   <script type="text/javascript">

demos/autocomplete/multiple.html

View file @ 92723de

@@ -8,6 +8,7 @@
   <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="../../ui/jquery.ui.autocomplete.js"></script>
   <link type="text/css" href="../demos.css" rel="stylesheet" />
   <script type="text/javascript">

demos/autocomplete/remote-jsonp.html

View file @ 92723de

@@ -8,6 +8,7 @@
   <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="../../ui/jquery.ui.autocomplete.js"></script>
   <link type="text/css" href="../demos.css" rel="stylesheet" />
   <script type="text/javascript">

demos/autocomplete/remote-with-cache.html

View file @ 92723de

@@ -8,6 +8,7 @@
   <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="../../ui/jquery.ui.autocomplete.js"></script>
   <link type="text/css" href="../demos.css" rel="stylesheet" />
   <script type="text/javascript">

demos/autocomplete/remote.html

View file @ 92723de

@@ -8,6 +8,7 @@
   <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="../../ui/jquery.ui.autocomplete.js"></script>
   <link type="text/css" href="../demos.css" rel="stylesheet" />
   <script type="text/javascript">

demos/autocomplete/xml.html

View file @ 92723de

@@ -8,6 +8,7 @@
   <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="../../ui/jquery.ui.autocomplete.js"></script>
   <link type="text/css" href="../demos.css" rel="stylesheet" />
   <script type="text/javascript">

demos/index.html

View file @ 92723de

@@ -18,6 +18,7 @@
   <script type="text/javascript" src="../ui/jquery.ui.dialog.js"></script>
   <script type="text/javascript" src="../ui/jquery.ui.draggable.js"></script>
   <script type="text/javascript" src="../ui/jquery.ui.droppable.js"></script>
+  <script type="text/javascript" src="../ui/jquery.ui.menu.js"></script>
   <script type="text/javascript" src="../ui/jquery.ui.position.js"></script>
   <script type="text/javascript" src="../ui/jquery.ui.progressbar.js"></script>
   <script type="text/javascript" src="../ui/jquery.ui.resizable.js"></script>
@@ -266,6 +267,7 @@
           <dd><a href="button/index.html">Button</a></dd>
           <dd><a href="datepicker/index.html">Datepicker</a></dd>
           <dd><a href="dialog/index.html">Dialog</a></dd>
+          <dd><a href="menu/index.html">Menu</a></dd>
           <dd><a href="progressbar/index.html">Progressbar</a></dd>
           <dd><a href="slider/index.html">Slider</a></dd>
           <dd><a href="tabs/index.html">Tabs</a></dd>

demos/menu/contextmenu.html

View file @ 92723de

...	...	@@ -0,0 +1,82 @@
	1	+<!DOCTYPE html>
	2	+<html lang="en">
	3	+<head>
	4	+ <meta charset="UTF-8" />
	5	+ <title>jQuery UI Menu - Contextmenu demo</title>
	6	+ <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" />
	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.position.js"></script>
	10	+ <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
	11	+ <script type="text/javascript" src="../../ui/jquery.ui.menu.js"></script>
	12	+ <script type="text/javascript" src="../../ui/jquery.ui.button.js"></script>
	13	+ <link type="text/css" href="../demos.css" rel="stylesheet" />
	14	+ <script type="text/javascript">
	15	+ $(function() {
	16	+ $(".demo button").button({
	17	+ icons: {
	18	+ primary: "ui-icon-home",
	19	+ secondary: "ui-icon-triangle-1-s"
	20	+ }
	21	+ }).each(function() {
	22	+ $(this).next().menu({
	23	+ select: function(event, ui) {
	24	+ $(this).hide();
	25	+ $("#log").append("<div>Selected " + ui.item.text() + "</div>");
	26	+ },
	27	+ input: $(this)
	28	+ }).hide();
	29	+ }).click(function(event) {
	30	+ var menu = $(this).next();
	31	+ if (menu.is(":visible")) {
	32	+ menu.hide();
	33	+ return false;
	34	+ }
	35	+ menu.menu("deactivate").show().css({top:0, left:0}).position({
	36	+ my: "left top",
	37	+ at: "right top",
	38	+ of: this
	39	+ });
	40	+ $(document).one("click", function() {
	41	+ menu.hide();
	42	+ });
	43	+ return false;
	44	+ })
	45	+ });
	46	+ </script>
	47	+ <style>
	48	+ .ui-menu { width: 200px; position: absolute; }
	49	+ </style>
	50	+</head>
	51	+<body>
	52	+
	53	+<div class="demo">
	54	+
	55	+ <button>Select a city</button>
	56	+ <ul>
	57	+ <li><a href="#">Amsterdam</a></li>
	58	+ <li><a href="#">Anaheim</a></li>
	59	+ <li><a href="#">Cologne</a></li>
	60	+ <li><a href="#">Frankfurt</a></li>
	61	+ <li><a href="#">Magdeburg</a></li>
	62	+ <li><a href="#">Munich</a></li>
	63	+ <li><a href="#">Utrecht</a></li>
	64	+ <li><a href="#">Zurich</a></li>
	65	+ </ul>
	66	+
	67	+ <div id="log"></div>
	68	+
	69	+</div><!-- End demo -->
	70	+
	71	+<div class="demo-description">
	72	+
	73	+<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>
	74	+
	75	+<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>
	76	+
	77	+</div><!-- End demo-description -->
	78	+
	79	+
	80	+
	81	+</body>
	82	+</html>

demos/menu/default.html

View file @ 92723de

...	...	@@ -0,0 +1,54 @@
	1	+<!DOCTYPE html>
	2	+<html lang="en">
	3	+<head>
	4	+ <meta charset="UTF-8" />
	5	+ <title>jQuery UI Menu - Default demo</title>
	6	+ <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" />
	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.menu.js"></script>
	11	+ <link type="text/css" href="../demos.css" rel="stylesheet" />
	12	+ <script type="text/javascript">
	13	+ $(function() {
	14	+ $(".demo ul").menu();
	15	+ });
	16	+ </script>
	17	+ <style>
	18	+
	19	+ </style>
	20	+</head>
	21	+<body>
	22	+
	23	+<div class="demo">
	24	+
	25	+ <ul>
	26	+ <li><a href="#">Aberdeen</a></li>
	27	+ <li><a href="#">Ada</a></li>
	28	+ <li><a href="#">Adamsville</a></li>
	29	+ <li><a href="#">Addyston</a></li>
	30	+ <li><a href="#">Adelphi</a></li>
	31	+ <li><a href="#">Adena</a></li>
	32	+ <li><a href="#">Adrian</a></li>
	33	+ <li><a href="#">Akron</a></li>
	34	+ <li><a href="#">Albany</a></li>
	35	+ <li><a href="#">Alexandria</a></li>
	36	+ <li><a href="#">Alger</a></li>
	37	+ <li><a href="#">Alledonia</a></li>
	38	+ <li><a href="#">Alliance</a></li>
	39	+ <li><a href="#">Alpha</a></li>
	40	+ <li><a href="#">Alvada</a></li>
	41	+ </ul>
	42	+
	43	+</div><!-- End demo -->
	44	+
	45	+<div class="demo-description">
	46	+
	47	+<p>A menu with the default configuration. A list is transformed, adding themeing, mouse and keyboard navigation support. Try to tab to the menu and use the cursor keys to navigate.</p>
	48	+
	49	+</div><!-- End demo-description -->
	50	+
	51	+
	52	+
	53	+</body>
	54	+</html>

demos/menu/index.html

View file @ 92723de

...	...	@@ -0,0 +1,17 @@
	1	+<!DOCTYPE html>
	2	+<html lang="en">
	3	+<head>
	4	+ <meta charset="UTF-8" />
	5	+ <title>jQuery UI Menu Demos</title>
	6	+ <link type="text/css" href="../demos.css" rel="stylesheet" />
	7	+</head>
	8	+<body>
	9	+ <div class="demos-nav">
	10	+ <h4>Examples</h4>
	11	+ <ul>
	12	+ <li class="demo-config-on"><a href="default.html">Default functionality</a></li>
	13	+ <li><a href="contextmenu.html">Contextmenu</a></li>
	14	+ </ul>
	15	+ </div>
	16	+</body>
	17	+</html>

tests/static/index.html

View file @ 92723de

@@ -32,6 +32,8 @@
   <li><a href="button/default.html">Button</a></li>
   <li><a href="datepicker/default.html">Datepicker</a></li>
   <li><a href="dialog/default.html">Dialog</a></li>
+  <li><a href="menu/default.html">Menu</a></li>
+  <li><a href="menu/all-menus-icons.html">Menu with icons</a></li>
   <li><a href="progressbar/default.html">Progressbar</a></li>
   <li><a href="slider/default.html">Slider</a></li>
   <li><a href="tabs/default.html">Tabs</a></li>

tests/unit/menu/menu.html

View file @ 92723de

...	...	@@ -0,0 +1,74 @@
	1	+<!DOCTYPE html>
	2	+<html lang="en">
	3	+<head>
	4	+ <meta charset="UTF-8" />
	5	+ <title>jQuery UI Menu Test Suite</title>
	6	+
	7	+ <link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css" type="text/css" title="ui-theme" />
	8	+
	9	+ <script type="text/javascript" src="../../../jquery-1.4.2.js"></script>
	10	+ <script type="text/javascript" src="../../../ui/jquery.ui.core.js"></script>
	11	+ <script type="text/javascript" src="../../../ui/jquery.ui.widget.js"></script>
	12	+ <script type="text/javascript" src="../../../ui/jquery.ui.menu.js"></script>
	13	+
	14	+ <link rel="stylesheet" href="../../../external/qunit.css" type="text/css"/>
	15	+ <script type="text/javascript" src="../../../external/qunit.js"></script>
	16	+ <script type="text/javascript" src="../../jquery.simulate.js"></script>
	17	+ <script type="text/javascript" src="../testsuite.js"></script>
	18	+
	19	+ <script type="text/javascript">
	20	+
	21	+ function log(message,clear) {
	22	+ if (clear && clear === true) {
	23	+ $("#log").html("");
	24	+ }
	25	+ if ( message === undefined ) {
	26	+ message = $("#log").data("lastItem");
	27	+ }
	28	+ $("#log").prepend( message + "," );
	29	+ }
	30	+ function clickMenu(menu,item) {
	31	+ $("#log").data("lastItem",item);
	32	+ $('li:eq(' + item + ') a',menu).trigger("click");
	33	+ }
	34	+
	35	+
	36	+ </script>
	37	+ <script type="text/javascript" src="menu_core.js"></script>
	38	+ <script type="text/javascript" src="menu_defaults.js"></script>
	39	+ <script type="text/javascript" src="menu_events.js"></script>
	40	+ <script type="text/javascript" src="menu_methods.js"></script>
	41	+ <script type="text/javascript" src="menu_options.js"></script>
	42	+ <script type="text/javascript" src="menu_tickets.js"></script>
	43	+
	44	+
	45	+ <style>
	46	+ #main { font-size: 10pt; font-family: 'trebuchet ms', verdana, arial; }
	47	+ #list, #list1 , #navigation, #navigation { margin: 0; padding: 0; font-size: 12px; }
	48	+ .mainOnMoon {position: absolute; top: -10000px; left: -10000px;}
	49	+ </style>
	50	+</head>
	51	+<body>
	52	+
	53	+<h1 id="qunit-header">jQuery UI Menu Test Suite</h1>
	54	+<h2 id="qunit-banner"></h2>
	55	+<h2 id="qunit-userAgent"></h2>
	56	+<ol id="qunit-tests">
	57	+</ol>
	58	+
	59	+
	60	+<div id="main" class="mainOnMoon">
	61	+
	62	+<ul class="foo" id="menu1">
	63	+ <li class="foo"><a class="foo" href="#">Aberdeen</a></li>
	64	+ <li class="foo"><a class="foo" href="#">Ada</a></li>
	65	+ <li class="foo"><a class="foo" href="#">Adamsville</a></li>
	66	+ <li class="foo"><a class="foo" href="#">Addyston</a></li>
	67	+ <li class="foo"><a class="foo" href="#">Adelphi</a></li>
	68	+</ul>
	69	+<div id="log"></div>
	70	+
	71	+</div>
	72	+
	73	+</body>
	74	+</html>

tests/unit/menu/menu_core.js

View file @ 92723de

...	...	@@ -0,0 +1,32 @@
	1	+/*
	2	+ * menu_core.js
	3	+ */
	4	+
	5	+
	6	+(function($) {
	7	+
	8	+module("menu: core");
	9	+
	10	+test("accessibility", function () {
	11	+ expect(3);
	12	+ var ac = $('#menu1').menu();
	13	+ var item0 = $("li:eq(0) a");
	14	+
	15	+ ok( ac.hasClass("ui-menu ui-widget ui-widget-content ui-corner-all"), "menu class");
	16	+ equals( ac.attr("role"), "listbox", "main role");
	17	+ equals( ac.attr("aria-activedescendant"), "ui-active-menuitem", "aria attribute");
	18	+});
	19	+
	20	+test("items class and role", function () {
	21	+ var ac = $('#menu1').menu();
	22	+ expect(1 + 4 * $("li",ac).length);
	23	+ ok( ($("li",ac).length > 0 ), "number of menu items");
	24	+ $("li",ac).each(function(item) {
	25	+ ok( $(this).hasClass("ui-menu-item"), "menu item ("+ item + ") class for item");
	26	+ equals( $(this).attr("role"), "menuitem", "menu item ("+ item + ") role");
	27	+ ok( $("a",this).hasClass("ui-corner-all"), "a element class for menu item ("+ item + ") ");
	28	+ equals( $("a",this).attr("tabindex"), "-1", "a element tabindex for menu item ("+ item + ") ");
	29	+ });
	30	+});
	31	+
	32	+})(jQuery);

tests/unit/menu/menu_defaults.js

View file @ 92723de

...	...	@@ -0,0 +1,11 @@
	1	+/*
	2	+ * menu_defaults.js
	3	+ */
	4	+
	5	+var menu_defaults = {
	6	+ disabled: false,
	7	+ navigationFilter: function() {}
	8	+
	9	+};
	10	+
	11	+commonWidgetTests('menu', { defaults: menu_defaults });

tests/unit/menu/menu_events.js

View file @ 92723de

...	...	@@ -0,0 +1,24 @@
	1	+/*
	2	+ * menu_events.js
	3	+ */
	4	+(function($) {
	5	+
	6	+module("menu: events");
	7	+
	8	+test("handle click on menu", function() {
	9	+ expect(1);
	10	+ var ac = $('#menu1').menu({
	11	+ select: function(event, ui) {
	12	+ log();
	13	+ }
	14	+ });
	15	+ log("click",true);
	16	+ clickMenu($('#menu1'),"1");
	17	+ log("afterclick");
	18	+ clickMenu( ac,"2");
	19	+ clickMenu($('#menu1'),"3");
	20	+ clickMenu( ac,"1");
	21	+ equals( $("#log").html(), "1,3,2,afterclick,1,click,", "Click order not valid.");
	22	+});
	23	+
	24	+})(jQuery);

tests/unit/menu/menu_methods.js

View file @ 92723de

...	...	@@ -0,0 +1,19 @@
	1	+/*
	2	+ * menu_methods.js
	3	+ */
	4	+(function($) {
	5	+
	6	+module("menu: methods");
	7	+
	8	+test("destroy", function() {
	9	+ var beforeHtml = $("#menu1").find("div").css("font-style", "normal").end().parent().html();
	10	+ var afterHtml = $("#menu1").menu().menu("destroy").parent().html();
	11	+ // Opera 9 outputs role="" instead of removing the attribute like everyone else
	12	+ if ($.browser.opera) {
	13	+ afterHtml = afterHtml.replace(/ role=""/g, "");
	14	+ }
	15	+ equal( afterHtml, beforeHtml );
	16	+});
	17	+
	18	+
	19	+})(jQuery);

tests/unit/menu/menu_options.js

View file @ 92723de

...	...	@@ -0,0 +1,10 @@
	1	+/*
	2	+ * menu_options.js
	3	+ */
	4	+(function($) {
	5	+
	6	+module("menu: options");
	7	+
	8	+
	9	+
	10	+})(jQuery);

tests/unit/menu/menu_tickets.js

View file @ 92723de

...	...	@@ -0,0 +1,8 @@
	1	+/*
	2	+ * menu_tickets.js
	3	+ */
	4	+(function($) {
	5	+
	6	+module("menu: tickets");
	7	+
	8	+})(jQuery);

tests/visual/all.html

View file @ 92723de

@@ -11,6 +11,7 @@
   <script type="text/javascript" src="../../ui/jquery.ui.mouse.js"></script>
   <script type="text/javascript" src="../../ui/jquery.ui.position.js"></script>
   <script type="text/javascript" src="../../ui/jquery.ui.accordion.js"></script>
+  <script type="text/javascript" src="../../ui/jquery.ui.menu.js"></script>
   <script type="text/javascript" src="../../ui/jquery.ui.autocomplete.js"></script>
   <script type="text/javascript" src="../../ui/jquery.ui.button.js"></script>
   <script type="text/javascript" src="../../ui/jquery.ui.datepicker.js"></script>

tests/visual/autocomplete/autocomplete.html

View file @ 92723de

@@ -9,6 +9,7 @@
   <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="../../../ui/jquery.ui.autocomplete.js"></script>
   <script type="text/javascript" src="http://jqueryui.com/themeroller/themeswitchertool/"></script>
   <script type="text/javascript">

tests/visual/compound/widgets_in_dialog.html

View file @ 92723de

@@ -13,7 +13,7 @@
   <script type="text/javascript" src="../../../ui/jquery.ui.resizable.js"></script>
   <script type="text/javascript" src="../../../ui/jquery.ui.draggable.js"></script>
   <script type="text/javascript" src="../../../ui/jquery.ui.accordion.js"></script>
-  <script type="text/javascript" src="../../../ui/jquery.ui.autocomplete.js"></script>
+  <script type="text/javascript" src="../../../ui/jquery.ui.menu.js"></script>
   <script type="text/javascript" src="../../../ui/jquery.ui.button.js"></script>
   <script type="text/javascript" src="../../../ui/jquery.ui.datepicker.js"></script>
   <script type="text/javascript" src="../../../ui/jquery.ui.dialog.js"></script>

tests/visual/index.html

View file @ 92723de

@@ -42,6 +42,14 @@
   <li><a href="button/button.html">Button</a></li>
   <li><a href="datepicker/datepicker.html">Datepicker</a></li>
   <li><a href="dialog/dialog.html">Dialog</a></li>
+  <li>
+    <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/drilldown.html">Drilldown Menu</a></li>
+    </ul>
+  </li>
   <li><a href="progressbar/progressbar.html">Progressbar</a></li>
   <li><a href="slider/slider.html">Slider</a></li>
   <li><a href="tabs/tabs.html">Tabs</a></li>

tests/visual/menu/contextmenu.html

View file @ 92723de

@@ -8,7 +8,7 @@
   <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="../../../ui/jquery.ui.menu.js"></script>
   <script type="text/javascript" src="http://jqueryui.com/themeroller/themeswitchertool/"></script>
   <script type="text/javascript">
   $(function() {
@@ -18,23 +18,24 @@
       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) {
+    $("button").each(function() {
+      $(this).next().menu({
+        selected: function(event, ui) {
+          $(this).hide();
+          $("#log").append("<div>Selected " + ui.item.text() + "</div>");
+        },
+        input: $(this)
+      }).hide();
+    }).click(function(event) {
       // TODO required to prevent the click handler below from handling this event
       event.stopPropagation();
-      $("#menu" + this.id).menu("deactivate").show().position({
+      var menu = $("#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();
+        menu.hide();
       })
     }).keydown(function(event) {
       var menu = $("#menu" + this.id).data("menu");
@@ -42,24 +43,8 @@
         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();
@@ -86,7 +71,7 @@
           });
         }
         if (match.length) {
-          menu.activate(match);
+          menu.activate(event, match);
           if (match.length > 1) {
             menu.previousFilter = character;
             menu.filterTimer = setTimeout(function() {
@@ -111,7 +96,6 @@
 <body>
   
 <button id="1">Show context menu 1</button>
-
 <ul id="menu1">
   <li><a href="#">Amsterdam</a></li>
   <li><a href="#">Anaheim</a></li>
@@ -123,6 +107,12 @@
   <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>
+
+<button id="2">Show context menu 2</button>
 <ul id="menu2">
   <li><a href="#">Aberdeen</a></li>
   <li><a href="#">Ada</a></li>
@@ -164,12 +154,5 @@
   <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/drilldown.html

View file @ 92723de

@@ -9,9 +9,16 @@
   <script type="text/javascript" src="../../../ui/jquery.ui.widget.js"></script>
   <script type="text/javascript" src="../../../ui/jquery.ui.position.js"></script>
   <script type="text/javascript" src="../../../ui/jquery.ui.button.js"></script>
-  <script type="text/javascript" src="../../../ui/jquery.ui.autocomplete.js"></script>
+  <script type="text/javascript" src="../../../ui/jquery.ui.menu.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();
+    
     $.widget("ui.drilldown", {
       _init: function() {
         var self = this;
@@ -21,10 +28,12 @@
         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({
+          // disable built-in key handling
+          input: $(),
           focus: function(event, ui) {
             self.activeItem = ui.item;
           },
-          selected: function(event, ui) {
+          select: function(event, ui) {
             if (this != self.active[0]) {
               return;
             }
@@ -33,7 +42,7 @@
               self._open(nested);
             } else {
               self.element.find("h3").text(ui.item.text());
-              self.options.selected.apply(this, arguments);
+              self.options.select.apply(this, arguments);
             }
           }
         });
@@ -115,7 +124,7 @@
     });
     
     var drilldown = $("#drilldown").drilldown({
-      selected: function(event, ui) {
+      select: function(event, ui) {
         $("#log").append("<div>Selected " + ui.item.text() + "</div>");
       }
     });

tests/visual/menu/menu.html

View file @ 92723de

@@ -7,7 +7,7 @@
   <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="../../../ui/jquery.ui.menu.js"></script>
   <script type="text/javascript" src="http://jqueryui.com/themeroller/themeswitchertool/"></script>
   <script type="text/javascript">
   $(function() {
@@ -17,39 +17,25 @@
       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;
-      }
-    });
+    function create() {
+      menus.menu({
+        select: function(event, ui) {
+          $("<div/>").text("Selected: " + ui.item.text()).appendTo("#log");
+        }
+      });
+    }
+    
+    var menus = $("#menu1, #menu2");
+    create();
 
+    $("#toggle-destroy").toggle(function() {
+      menus.menu("destroy");
+    }, create);
+    $("#toggle-disable").toggle(function() {
+      menus.menu("disable");
+    }, function() {
+      menus.menu("enable");
+    });
   });
   </script>
   <style>
@@ -60,7 +46,7 @@
 </head>
 <body>
   
-<ul id="menu1" tabindex="0">
+<ul id="menu1">
   <li><a href="#">Aberdeen</a></li>
   <li><a href="#">Ada</a></li>
   <li><a href="#">Adamsville</a></li>
@@ -68,7 +54,7 @@
   <li><a href="#">Adelphi</a></li>
 </ul>
 
-<ul id="menu2" tabindex="0">
+<ul id="menu2">
   <li><a href="#">Aberdeen</a></li>
   <li><a href="#">Ada</a></li>
   <li><a href="#">Adamsville</a></li>
@@ -114,5 +100,8 @@
   <div id="log" style="height: 400px; width: 300px; overflow: auto;" class="ui-widget-content"></div>
 </div>
 
+<button id="toggle-disable">Disable / Enable</button>
+<button id="toggle-destroy">Destroy / Create</button>
+
 </body>
 </html>

tests/visual/menu/menubar.html

View file @ 92723de

...	...	@@ -0,0 +1,94 @@
	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.button.js"></script>
	12	+ <script type="text/javascript" src="../../../ui/jquery.ui.menu.js"></script>
	13	+ <script type="text/javascript" src="http://jqueryui.com/themeroller/themeswitchertool/"></script>
	14	+ <script type="text/javascript">
	15	+ $(function() {
	16	+ $.fn.themeswitcher && $('<div/>').css({
	17	+ position: "absolute",
	18	+ right: 10,
	19	+ top: 10
	20	+ }).appendTo(document.body).themeswitcher();
	21	+
	22	+ $(".menubar").children("a")
	23	+ .button()
	24	+ .click(function() {
	25	+ var button = $(this);
	26	+ var menu = button.next();
	27	+ if (menu.is(":visible")) {
	28	+ menu.hide();
	29	+ return false;
	30	+ }
	31	+ menu.parent().find(".ui-menu").not(menu).hide();
	32	+ menu.show().css({ left:0, top: 0 }).position({
	33	+ my: "left top",
	34	+ at: "left bottom",
	35	+ of: button
	36	+ });
	37	+ $(document).bind("click.menubar", function(event) {
	38	+ if ($(event.target).closest(".ui-menu")[0] == menu[0]) {
	39	+ return;
	40	+ }
	41	+ $(this).unbind(".menubar");
	42	+ menu.hide();
	43	+ });
	44	+ return false;
	45	+ })
	46	+ .each(function() {
	47	+ $(this).next().hide().menu({
	48	+ input: $(this),
	49	+ select: function(event, ui) {
	50	+ $("<div/>").text("Selected: " + ui.item.text()).appendTo("#log");
	51	+ }
	52	+ });
	53	+ });
	54	+
	55	+ });
	56	+ </script>
	57	+ <style>
	58	+ body { font-size:62.5%; }
	59	+ .ui-menu { width: 200px; }
	60	+ .menubar .ui-menu { position: absolute; }
	61	+ </style>
	62	+</head>
	63	+<body>
	64	+
	65	+<div class="menubar ui-widget-header">
	66	+ <a href="#">File</a>
	67	+ <ul>
	68	+ <li><a href="#">Open...</a></li>
	69	+ <li><a href="#">Save</a></li>
	70	+ <li><a href="#">Save as...</a></li>
	71	+ <li><a href="#">Close</a></li>
	72	+ <li><a href="#">Quit</a></li>
	73	+ </ul>
	74	+ <a href="#">Edit</a>
	75	+ <ul>
	76	+ <li><a href="#">Copy</a></li>
	77	+ <li><a href="#">Cut</a></li>
	78	+ <li><a href="#">Paste</a></li>
	79	+ </ul>
	80	+ <a href="#">View</a>
	81	+ <ul>
	82	+ <li><a href="#">Fullscreen</a></li>
	83	+ <li><a href="#">Fit into view</a></li>
	84	+ <li><a href="#">Customize...</a></li>
	85	+ </ul>
	86	+</div>
	87	+
	88	+<div class="ui-widget" style="margin-top:2em; font-family:Arial">
	89	+ Log:
	90	+ <div id="log" style="height: 400px; width: 300px; overflow: auto;" class="ui-widget-content"></div>
	91	+</div>
	92	+
	93	+</body>
	94	+</html>

tests/visual/menu/nested.html

View file @ 92723de

@@ -8,7 +8,7 @@
   <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="../../../ui/jquery.ui.menu.js"></script>
   <script type="text/javascript" src="../../../external/jquery.bgiframe-2.1.1.js"></script>
   <script type="text/javascript" src="http://jqueryui.com/themeroller/themeswitchertool/"></script>
   <script type="text/javascript">
@@ -28,7 +28,9 @@
         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,
+          // disable built-in key handling
+          input: $(),
+          select: this.options.select,
           focus: function(event, ui) {
             self.active = ui.item.parent();
             self.activeItem = ui.item;
@@ -75,7 +77,7 @@
     });
     
     var nestedmenu = $("#menu").nestedmenu({
-      selected: function(event, ui) {
+      select: function(event, ui) {
         $("#log").append("<div>Selected " + ui.item.text() + "</div>");
       }
     }).hide();

tests/visual/position/position.html

View file @ 92723de

@@ -9,7 +9,7 @@
   <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="../../../ui/jquery.ui.menu.js"></script>
   <script type="text/javascript" src="http://jqueryui.com/themeroller/themeswitchertool/"></script>
   <script type="text/javascript">
   $(function() {

themes/base/jquery.ui.autocomplete.css

View file @ 92723de

@@ -5,35 +5,3 @@
 
 /* workarounds */
 * html .ui-autocomplete { width:1px; } /* without this, the menu expands to 100% in IE6 */
-
-/* Menu
-----------------------------------*/
-.ui-menu {
-  list-style:none;
-  padding: 2px;
-  margin: 0;
-  display:block;
-}
-.ui-menu .ui-menu {
-  margin-top: -3px;
-}
-.ui-menu .ui-menu-item {
-  margin:0;
-  padding: 0;
-  zoom: 1;
-  float: left;
-  clear: left;
-  width: 100%;
-}
-.ui-menu .ui-menu-item a {
-  text-decoration:none;
-  display:block;
-  padding:.2em .4em;
-  line-height:1.5;
-  zoom:1;
-}
-.ui-menu .ui-menu-item a.ui-state-hover,
-.ui-menu .ui-menu-item a.ui-state-active {
-  font-weight: normal;
-  margin: -1px;
-}

themes/base/jquery.ui.base.css

View file @ 92723de

@@ -5,6 +5,7 @@
 @import url("jquery.ui.button.css");
 @import url("jquery.ui.datepicker.css");
 @import url("jquery.ui.dialog.css");
+@import url("jquery.ui.menu.css");
 @import url("jquery.ui.progressbar.css");
 @import url("jquery.ui.resizable.css");
 @import url("jquery.ui.selectable.css");

themes/base/jquery.ui.menu.css

View file @ 92723de

...	...	@@ -0,0 +1,32 @@
	1	+/* Menu
	2	+----------------------------------*/
	3	+.ui-menu {
	4	+ list-style:none;
	5	+ padding: 2px;
	6	+ margin: 0;
	7	+ display:block;
	8	+}
	9	+.ui-menu .ui-menu {
	10	+ margin-top: -3px;
	11	+}
	12	+.ui-menu .ui-menu-item {
	13	+ margin:0;
	14	+ padding: 0;
	15	+ zoom: 1;
	16	+ width: 100%;
	17	+}
	18	+.ui-menu .ui-menu-item a {
	19	+ text-decoration:none;
	20	+ display:block;
	21	+ padding:.2em .4em;
	22	+ line-height:1.5;
	23	+ zoom:1;
	24	+}
	25	+.ui-menu .ui-menu-item a {
	26	+ font-weight: normal;
	27	+}
	28	+.ui-menu .ui-menu-item a.ui-state-hover,
	29	+.ui-menu .ui-menu-item a.ui-state-active {
	30	+ font-weight: normal;
	31	+ margin: -1px;
	32	+}

ui/jquery.ui.autocomplete.js

View file @ 92723de

@@ -11,6 +11,7 @@
  *  jquery.ui.core.js
  *  jquery.ui.widget.js
  *  jquery.ui.position.js
+ *  jquery.ui.menu.js
  */
 (function( $ ) {
 
@@ -116,6 +117,8 @@ $.widget( "ui.autocomplete", {
         }, 13);
       })
       .menu({
+        // custom key handling for now
+        input: $(),
         focus: function( event, ui ) {
           var item = ui.item.data( "item.autocomplete" );
           if ( false !== self._trigger( "focus", null, { item: item } ) ) {
@@ -125,7 +128,7 @@ $.widget( "ui.autocomplete", {
             }
           }
         },
-        selected: function( event, ui ) {
+        select: function( event, ui ) {
           var item = ui.item.data( "item.autocomplete" );
           if ( false !== self._trigger( "select", event, { item: item } ) ) {
             self.element.val( item.value );
@@ -327,185 +330,3 @@ $.extend( $.ui.autocomplete, {
 });
 
 }( jQuery ));
-
-/*
- * jQuery UI Menu (not officially released)
- * 
- * This widget isn't yet finished and the API is subject to change. We plan to finish
- * it for the next release. You're welcome to give it a try anyway and give us feedback,
- * as long as you're okay with migrating your code later on. We can help with that, too.
- *
- * Copyright (c) 2010 AUTHORS.txt (http://jqueryui.com/about)
- * Dual licensed under the MIT (MIT-LICENSE.txt)
- * and GPL (GPL-LICENSE.txt) licenses.
- *
- * http://docs.jquery.com/UI/Menu
- *
- * Depends:
- *  jquery.ui.core.js
- *  jquery.ui.widget.js
- */
-(function($) {
-
-$.widget("ui.menu", {
-  _create: function() {
-    var self = this;
-    this.element
-      .addClass("ui-menu ui-widget ui-widget-content ui-corner-all")
-      .attr({
-        role: "listbox",
-        "aria-activedescendant": "ui-active-menuitem"
-      })
-      .click(function( event ) {
-        if ( !$( event.target ).closest( ".ui-menu-item a" ).length ) {
-          return;
-        }
-        // temporary
-        event.preventDefault();
-        self.select( event );
-      });
-    this.refresh();
-  },
-  
-  refresh: function() {
-    var self = this;
-
-    // don't refresh list items that are already adapted
-    var items = this.element.children("li:not(.ui-menu-item):has(a)")
-      .addClass("ui-menu-item")
-      .attr("role", "menuitem");
-    
-    items.children("a")
-      .addClass("ui-corner-all")
-      .attr("tabindex", -1)
-      // mouseenter doesn't work with event delegation
-      .mouseenter(function( event ) {
-        self.activate( event, $(this).parent() );
-      })
-      .mouseleave(function() {
-        self.deactivate();
-      });
-  },
-
-  activate: function( event, item ) {
-    this.deactivate();
-    if (this.hasScroll()) {
-      var offset = item.offset().top - this.element.offset().top,
-        scroll = this.element.attr("scrollTop"),
-        elementHeight = this.element.height();
-      if (offset < 0) {
-        this.element.attr("scrollTop", scroll + offset);
-      } else if (offset > elementHeight) {
-        this.element.attr("scrollTop", scroll + offset - elementHeight + item.height());
-      }
-    }
-    this.active = item.eq(0)
-      .children("a")
-        .addClass("ui-state-hover")
-        .attr("id", "ui-active-menuitem")
-      .end();
-    this._trigger("focus", event, { item: item });
-  },
-
-  deactivate: function() {
-    if (!this.active) { return; }
-
-    this.active.children("a")
-      .removeClass("ui-state-hover")
-      .removeAttr("id");
-    this._trigger("blur");
-    this.active = null;
-  },
-
-  next: function(event) {
-    this.move("next", ".ui-menu-item:first", event);
-  },
-
-  previous: function(event) {
-    this.move("prev", ".ui-menu-item:last", event);
-  },
-
-  first: function() {
-    return this.active && !this.active.prev().length;
-  },
-
-  last: function() {
-    return this.active && !this.active.next().length;
-  },
-
-  move: function(direction, edge, event) {
-    if (!this.active) {
-      this.activate(event, this.element.children(edge));
-      return;
-    }
-    var next = this.active[direction + "All"](".ui-menu-item").eq(0);
-    if (next.length) {
-      this.activate(event, next);
-    } else {
-      this.activate(event, this.element.children(edge));
-    }
-  },
-
-  // TODO merge with previousPage
-  nextPage: function(event) {
-    if (this.hasScroll()) {
-      // TODO merge with no-scroll-else
-      if (!this.active || this.last()) {
-        this.activate(event, this.element.children(":first"));
-        return;
-      }
-      var base = this.active.offset().top,
-        height = this.element.height(),
-        result = this.element.children("li").filter(function() {
-          var close = $(this).offset().top - base - height + $(this).height();
-          // TODO improve approximation
-          return close < 10 && close > -10;
-        });
-
-      // TODO try to catch this earlier when scrollTop indicates the last page anyway
-      if (!result.length) {
-        result = this.element.children(":last");
-      }
-      this.activate(event, result);
-    } else {
-      this.activate(event, this.element.children(!this.active || this.last() ? ":first" : ":last"));
-    }
-  },
-
-  // TODO merge with nextPage
-  previousPage: function(event) {
-    if (this.hasScroll()) {
-      // TODO merge with no-scroll-else
-      if (!this.active || this.first()) {
-        this.activate(event, this.element.children(":last"));
-        return;
-      }
-
-      var base = this.active.offset().top,
-        height = this.element.height();
-        result = this.element.children("li").filter(function() {
-          var close = $(this).offset().top - base + height - $(this).height();
-          // TODO improve approximation
-          return close < 10 && close > -10;
-        });
-
-      // TODO try to catch this earlier when scrollTop indicates the last page anyway
-      if (!result.length) {
-        result = this.element.children(":first");
-      }
-      this.activate(event, result);
-    } else {
-      this.activate(event, this.element.children(!this.active || this.first() ? ":last" : ":first"));
-    }
-  },
-
-  hasScroll: function() {
-    return this.element.height() < this.element.attr("scrollHeight");
-  },
-
-  select: function( event ) {
-    this._trigger("selected", event, { item: this.active });
-  }
-});
-
-}(jQuery));

ui/jquery.ui.menu.js

View file @ 92723de

...	...	@@ -0,0 +1,240 @@
	1	+/*
	2	+ * jQuery UI Menu @VERSION
	3	+ *
	4	+ * Copyright (c) 2010 AUTHORS.txt (http://jqueryui.com/about)
	5	+ * Dual licensed under the MIT (MIT-LICENSE.txt)
	6	+ * and GPL (GPL-LICENSE.txt) licenses.
	7	+ *
	8	+ * http://docs.jquery.com/UI/Menu
	9	+ *
	10	+ * Depends:
	11	+ * jquery.ui.core.js
	12	+ * jquery.ui.widget.js
	13	+ */
	14	+(function($) {
	15	+
	16	+$.widget("ui.menu", {
	17	+ _create: function() {
	18	+ var self = this;
	19	+ this.element
	20	+ .addClass("ui-menu ui-widget ui-widget-content ui-corner-all")
	21	+ .attr({
	22	+ role: "listbox",
	23	+ "aria-activedescendant": "ui-active-menuitem"
	24	+ })
	25	+ .bind("click.menu", function( event ) {
	26	+ if (self.options.disabled) {
	27	+ return false;
	28	+ }
	29	+ if ( !$( event.target ).closest( ".ui-menu-item a" ).length ) {
	30	+ return;
	31	+ }
	32	+ // temporary
	33	+ event.preventDefault();
	34	+ self.select( event );
	35	+ });
	36	+ this.refresh();
	37	+
	38	+ if (!this.options.input) {
	39	+ this.options.input = this.element.attr("tabIndex", 0);
	40	+ }
	41	+ this.options.input.bind("keydown.menu", function(event) {
	42	+ if (self.options.disabled) {
	43	+ return;
	44	+ }
	45	+ switch (event.keyCode) {
	46	+ case $.ui.keyCode.PAGE_UP:
	47	+ self.previousPage();
	48	+ event.preventDefault();
	49	+ event.stopImmediatePropagation();
	50	+ break;
	51	+ case $.ui.keyCode.PAGE_DOWN:
	52	+ self.nextPage();
	53	+ event.preventDefault();
	54	+ event.stopImmediatePropagation();
	55	+ break;
	56	+ case $.ui.keyCode.UP:
	57	+ self.previous();
	58	+ event.preventDefault();
	59	+ event.stopImmediatePropagation();
	60	+ break;
	61	+ case $.ui.keyCode.DOWN:
	62	+ self.next();
	63	+ event.preventDefault();
	64	+ event.stopImmediatePropagation();
	65	+ break;
	66	+ case $.ui.keyCode.ENTER:
	67	+ self.select();
	68	+ event.preventDefault();
	69	+ event.stopImmediatePropagation();
	70	+ break;
	71	+ }
	72	+ });
	73	+ },
	74	+
	75	+ destroy: function() {
	76	+ $.Widget.prototype.destroy.apply(this, arguments);
	77	+
	78	+ this.element
	79	+ .removeClass("ui-menu ui-widget ui-widget-content ui-corner-all")
	80	+ .removeAttr("tabIndex")
	81	+ .removeAttr("role")
	82	+ .removeAttr("aria-activedescendant");
	83	+
	84	+ this.element.children(".ui-menu-item")
	85	+ .removeClass("ui-menu-item")
	86	+ .removeAttr("role")
	87	+ .children("a")
	88	+ .removeClass("ui-corner-all")
	89	+ .removeAttr("tabIndex")
	90	+ .unbind(".menu");
	91	+ },
	92	+
	93	+ refresh: function() {
	94	+ var self = this;
	95	+
	96	+ // don't refresh list items that are already adapted
	97	+ var items = this.element.children("li:not(.ui-menu-item):has(a)")
	98	+ .addClass("ui-menu-item")
	99	+ .attr("role", "menuitem");
	100	+
	101	+ items.children("a")
	102	+ .addClass("ui-corner-all")
	103	+ .attr("tabIndex", -1)
	104	+ // mouseenter doesn't work with event delegation
	105	+ .bind("mouseenter.menu", function( event ) {
	106	+ if (self.options.disabled) {
	107	+ return;
	108	+ }
	109	+ self.activate( event, $(this).parent() );
	110	+ })
	111	+ .bind("mouseleave.menu", function() {
	112	+ if (self.options.disabled) {
	113	+ return;
	114	+ }
	115	+ self.deactivate();
	116	+ });
	117	+ },
	118	+
	119	+ activate: function( event, item ) {
	120	+ this.deactivate();
	121	+ if (this._hasScroll()) {
	122	+ var offset = item.offset().top - this.element.offset().top,
	123	+ scroll = this.element.attr("scrollTop"),
	124	+ elementHeight = this.element.height();
	125	+ if (offset < 0) {
	126	+ this.element.attr("scrollTop", scroll + offset);
	127	+ } else if (offset > elementHeight) {
	128	+ this.element.attr("scrollTop", scroll + offset - elementHeight + item.height());
	129	+ }
	130	+ }
	131	+ this.active = item.eq(0)
	132	+ .children("a")
	133	+ .addClass("ui-state-hover")
	134	+ .attr("id", "ui-active-menuitem")
	135	+ .end();
	136	+ this._trigger("focus", event, { item: item });
	137	+ },
	138	+
	139	+ deactivate: function() {
	140	+ if (!this.active) { return; }
	141	+
	142	+ this.active.children("a")
	143	+ .removeClass("ui-state-hover")
	144	+ .removeAttr("id");
	145	+ this._trigger("blur");
	146	+ this.active = null;
	147	+ },
	148	+
	149	+ next: function(event) {
	150	+ this._move("next", ".ui-menu-item:first", event);
	151	+ },
	152	+
	153	+ previous: function(event) {
	154	+ this._move("prev", ".ui-menu-item:last", event);
	155	+ },
	156	+
	157	+ first: function() {
	158	+ return this.active && !this.active.prevAll(".ui-menu-item").length;
	159	+ },
	160	+
	161	+ last: function() {
	162	+ return this.active && !this.active.nextAll(".ui-menu-item").length;
	163	+ },
	164	+
	165	+ _move: function(direction, edge, event) {
	166	+ if (!this.active) {
	167	+ this.activate(event, this.element.children(edge));
	168	+ return;
	169	+ }
	170	+ var next = this.active[direction + "All"](".ui-menu-item").eq(0);
	171	+ if (next.length) {
	172	+ this.activate(event, next);
	173	+ } else {
	174	+ this.activate(event, this.element.children(edge));
	175	+ }
	176	+ },
	177	+
	178	+ // TODO merge with previousPage
	179	+ nextPage: function(event) {
	180	+ if (this._hasScroll()) {
	181	+ // TODO merge with no-scroll-else
	182	+ if (!this.active \|\| this.last()) {
	183	+ this.activate(event, this.element.children(":first"));
	184	+ return;
	185	+ }
	186	+ var base = this.active.offset().top,
	187	+ height = this.element.height(),
	188	+ result = this.element.children("li").filter(function() {
	189	+ var close = $(this).offset().top - base - height + $(this).height();
	190	+ // TODO improve approximation
	191	+ return close < 10 && close > -10;
	192	+ });
	193	+
	194	+ // TODO try to catch this earlier when scrollTop indicates the last page anyway
	195	+ if (!result.length) {
	196	+ result = this.element.children(":last");
	197	+ }
	198	+ this.activate(event, result);
	199	+ } else {
	200	+ this.activate(event, this.element.children(!this.active \|\| this.last() ? ":first" : ":last"));
	201	+ }
	202	+ },
	203	+
	204	+ // TODO merge with nextPage
	205	+ previousPage: function(event) {
	206	+ if (this._hasScroll()) {
	207	+ // TODO merge with no-scroll-else
	208	+ if (!this.active \|\| this.first()) {
	209	+ this.activate(event, this.element.children(":last"));
	210	+ return;
	211	+ }
	212	+
	213	+ var base = this.active.offset().top,
	214	+ height = this.element.height();
	215	+ result = this.element.children("li").filter(function() {
	216	+ var close = $(this).offset().top - base + height - $(this).height();
	217	+ // TODO improve approximation
	218	+ return close < 10 && close > -10;
	219	+ });
	220	+
	221	+ // TODO try to catch this earlier when scrollTop indicates the last page anyway
	222	+ if (!result.length) {
	223	+ result = this.element.children(":first");
	224	+ }
	225	+ this.activate(event, result);
	226	+ } else {
	227	+ this.activate(event, this.element.children(!this.active \|\| this.first() ? ":last" : ":first"));
	228	+ }
	229	+ },
	230	+
	231	+ _hasScroll: function() {
	232	+ return this.element.height() < this.element.attr("scrollHeight");
	233	+ },
	234	+
	235	+ select: function( event ) {
	236	+ this._trigger("select", event, { item: this.active });
	237	+ }
	238	+});
	239	+
	240	+}(jQuery));

jquery / jquery-ui

0 notes on commit `92723de` Show line notes below

M	demos/autocomplete/categories.html	1 •
M	demos/autocomplete/combobox.html	1 •
M	demos/autocomplete/custom-data.html	1 •
M	demos/autocomplete/default.html	1 •
M	demos/autocomplete/folding.html	1 •
M	demos/autocomplete/multiple-remote.html	1 •
M	demos/autocomplete/multiple.html	1 •
M	demos/autocomplete/remote-jsonp.html	1 •
M	demos/autocomplete/remote-with-cache.html	1 •
M	demos/autocomplete/remote.html	1 •
M	demos/autocomplete/xml.html	1 •
M	demos/index.html	2 ••
A	demos/menu/contextmenu.html	82 •••••
A	demos/menu/default.html	54 •••••
A	demos/menu/index.html	17 •••••
M	tests/static/index.html	2 ••
A	tests/unit/menu/menu.html	74 •••••
A	tests/unit/menu/menu_core.js	32 •••••
A	tests/unit/menu/menu_defaults.js	11 •••••
A	tests/unit/menu/menu_events.js	24 •••••
A	tests/unit/menu/menu_methods.js	19 •••••
A	tests/unit/menu/menu_options.js	10 •••••
A	tests/unit/menu/menu_tickets.js	8 •••••
M	tests/visual/all.html	1 •
M	tests/visual/autocomplete/autocomplete.html	1 •
M	tests/visual/compound/widgets_in_dialog.html	2 ••
M	tests/visual/index.html	8 •••••
M	tests/visual/menu/contextmenu.html	55 ••••
M	tests/visual/menu/drilldown.html	17 ••••
M	tests/visual/menu/menu.html	59 ••••
A	tests/visual/menu/menubar.html	94 •••••
M	tests/visual/menu/nested.html	8 ••••
M	tests/visual/position/position.html	2 ••
M	themes/base/jquery.ui.autocomplete.css	32 •••••
M	themes/base/jquery.ui.base.css	1 •
A	themes/base/jquery.ui.menu.css	32 •••••
M	ui/jquery.ui.autocomplete.js	187 ••••
A	ui/jquery.ui.menu.js	240 •••••

...	...	@@ -8,6 +8,7 @@
8	8	<script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
9	9	<script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
10	10	<script type="text/javascript" src="../../ui/jquery.ui.position.js"></script>
	11	+ <script type="text/javascript" src="../../ui/jquery.ui.menu.js"></script>
11	12	<script type="text/javascript" src="../../ui/jquery.ui.autocomplete.js"></script>
12	13	<link type="text/css" href="../demos.css" rel="stylesheet" />
13	14	<style type="text/css">

...	...	@@ -9,6 +9,7 @@
9	9	<script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
10	10	<script type="text/javascript" src="../../ui/jquery.ui.button.js"></script>
11	11	<script type="text/javascript" src="../../ui/jquery.ui.position.js"></script>
	12	+ <script type="text/javascript" src="../../ui/jquery.ui.menu.js"></script>
12	13	<script type="text/javascript" src="../../ui/jquery.ui.autocomplete.js"></script>
13	14	<script type="text/javascript" src="../../ui/jquery.ui.tooltip.js"></script>
14	15	<link type="text/css" href="../demos.css" rel="stylesheet" />

...	...	@@ -18,6 +18,7 @@
18	18	<script type="text/javascript" src="../ui/jquery.ui.dialog.js"></script>
19	19	<script type="text/javascript" src="../ui/jquery.ui.draggable.js"></script>
20	20	<script type="text/javascript" src="../ui/jquery.ui.droppable.js"></script>
	21	+ <script type="text/javascript" src="../ui/jquery.ui.menu.js"></script>
21	22	<script type="text/javascript" src="../ui/jquery.ui.position.js"></script>
22	23	<script type="text/javascript" src="../ui/jquery.ui.progressbar.js"></script>
23	24	<script type="text/javascript" src="../ui/jquery.ui.resizable.js"></script>
...	...	@@ -266,6 +267,7 @@
266	267	<dd><a href="button/index.html">Button</a></dd>
267	268	<dd><a href="datepicker/index.html">Datepicker</a></dd>
268	269	<dd><a href="dialog/index.html">Dialog</a></dd>
	270	+ <dd><a href="menu/index.html">Menu</a></dd>
269	271	<dd><a href="progressbar/index.html">Progressbar</a></dd>
270	272	<dd><a href="slider/index.html">Slider</a></dd>
271	273	<dd><a href="tabs/index.html">Tabs</a></dd>

...	...	@@ -32,6 +32,8 @@
32	32	<li><a href="button/default.html">Button</a></li>
33	33	<li><a href="datepicker/default.html">Datepicker</a></li>
34	34	<li><a href="dialog/default.html">Dialog</a></li>
	35	+ <li><a href="menu/default.html">Menu</a></li>
	36	+ <li><a href="menu/all-menus-icons.html">Menu with icons</a></li>
35	37	<li><a href="progressbar/default.html">Progressbar</a></li>
36	38	<li><a href="slider/default.html">Slider</a></li>
37	39	<li><a href="tabs/default.html">Tabs</a></li>

...	...	@@ -11,6 +11,7 @@
11	11	<script type="text/javascript" src="../../ui/jquery.ui.mouse.js"></script>
12	12	<script type="text/javascript" src="../../ui/jquery.ui.position.js"></script>
13	13	<script type="text/javascript" src="../../ui/jquery.ui.accordion.js"></script>
	14	+ <script type="text/javascript" src="../../ui/jquery.ui.menu.js"></script>
14	15	<script type="text/javascript" src="../../ui/jquery.ui.autocomplete.js"></script>
15	16	<script type="text/javascript" src="../../ui/jquery.ui.button.js"></script>
16	17	<script type="text/javascript" src="../../ui/jquery.ui.datepicker.js"></script>

...	...	@@ -13,7 +13,7 @@
13	13	<script type="text/javascript" src="../../../ui/jquery.ui.resizable.js"></script>
14	14	<script type="text/javascript" src="../../../ui/jquery.ui.draggable.js"></script>
15	15	<script type="text/javascript" src="../../../ui/jquery.ui.accordion.js"></script>
16		- <script type="text/javascript" src="../../../ui/jquery.ui.autocomplete.js"></script>
	16	+ <script type="text/javascript" src="../../../ui/jquery.ui.menu.js"></script>
17	17	<script type="text/javascript" src="../../../ui/jquery.ui.button.js"></script>
18	18	<script type="text/javascript" src="../../../ui/jquery.ui.datepicker.js"></script>
19	19	<script type="text/javascript" src="../../../ui/jquery.ui.dialog.js"></script>

...	...	@@ -42,6 +42,14 @@
42	42	<li><a href="button/button.html">Button</a></li>
43	43	<li><a href="datepicker/datepicker.html">Datepicker</a></li>
44	44	<li><a href="dialog/dialog.html">Dialog</a></li>
	45	+ <li>
	46	+ <a href="menu/menu.html">Menu</a>
	47	+ <ul>
	48	+ <li><a href="menu/contextmenu.html">Context Menu</a></li>
	49	+ <li><a href="menu/nested.html">Nested Menu</a></li>
	50	+ <li><a href="menu/drilldown.html">Drilldown Menu</a></li>
	51	+ </ul>
	52	+ </li>
45	53	<li><a href="progressbar/progressbar.html">Progressbar</a></li>
46	54	<li><a href="slider/slider.html">Slider</a></li>
47	55	<li><a href="tabs/tabs.html">Tabs</a></li>

...	...	@@ -8,7 +8,7 @@
8	8	<script type="text/javascript" src="../../../ui/jquery.ui.core.js"></script>
9	9	<script type="text/javascript" src="../../../ui/jquery.ui.widget.js"></script>
10	10	<script type="text/javascript" src="../../../ui/jquery.ui.position.js"></script>
11		- <script type="text/javascript" src="../../../ui/jquery.ui.autocomplete.js"></script>
	11	+ <script type="text/javascript" src="../../../ui/jquery.ui.menu.js"></script>
12	12	<script type="text/javascript" src="http://jqueryui.com/themeroller/themeswitchertool/"></script>
13	13	<script type="text/javascript">
14	14	$(function() {
...	...	@@ -18,23 +18,24 @@
18	18	top: 10
19	19	}).appendTo(document.body).themeswitcher();
20	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) {
	21	+ $("button").each(function() {
	22	+ $(this).next().menu({
	23	+ selected: function(event, ui) {
	24	+ $(this).hide();
	25	+ $("#log").append("<div>Selected " + ui.item.text() + "</div>");
	26	+ },
	27	+ input: $(this)
	28	+ }).hide();
	29	+ }).click(function(event) {
29	30	// TODO required to prevent the click handler below from handling this event
30	31	event.stopPropagation();
31		- $("#menu" + this.id).menu("deactivate").show().position({
	32	+ var menu = $("#menu" + this.id).menu("deactivate").show().position({
32	33	my: "left top",
33	34	at: "right top",
34	35	of: event.pageX > 0 ? event : this
35	36	});
36	37	$(document).one("click", function() {
37		- menus.hide();
	38	+ menu.hide();
38	39	})
39	40	}).keydown(function(event) {
40	41	var menu = $("#menu" + this.id).data("menu");
...	...	@@ -42,24 +43,8 @@
42	43	return;
43	44	event.stopPropagation();
44	45	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	46	case $.ui.keyCode.TAB:
60		- menu.select();
61	47	menu.widget().hide();
62		- event.preventDefault();
63	48	break;
64	49	case $.ui.keyCode.ESCAPE:
65	50	menu.widget().hide();
...	...	@@ -86,7 +71,7 @@
86	71	});
87	72	}
88	73	if (match.length) {
89		- menu.activate(match);
	74	+ menu.activate(event, match);
90	75	if (match.length > 1) {
91	76	menu.previousFilter = character;
92	77	menu.filterTimer = setTimeout(function() {
...	...	@@ -111,7 +96,6 @@
111	96	<body>
112	97
113	98	<button id="1">Show context menu 1</button>
114		-
115	99	<ul id="menu1">
116	100	<li><a href="#">Amsterdam</a></li>
117	101	<li><a href="#">Anaheim</a></li>
...	...	@@ -123,6 +107,12 @@
123	107	<li><a href="#">Zurich</a></li>
124	108	</ul>
125	109
	110	+<div class="ui-widget" style="margin-top:2em; font-family:Arial">
	111	+ Log:
	112	+ <div id="log" style="height: 400px; width: 300px; overflow: auto;" class="ui-widget-content"></div>
	113	+</div>
	114	+
	115	+<button id="2">Show context menu 2</button>
126	116	<ul id="menu2">
127	117	<li><a href="#">Aberdeen</a></li>
128	118	<li><a href="#">Ada</a></li>
...	...	@@ -164,12 +154,5 @@
164	154	<li><a href="#">Amesville</a></li>
165	155	</ul>
166	156
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	157	</body>
175	158	</html>

...	...	@@ -9,9 +9,16 @@
9	9	<script type="text/javascript" src="../../../ui/jquery.ui.widget.js"></script>
10	10	<script type="text/javascript" src="../../../ui/jquery.ui.position.js"></script>
11	11	<script type="text/javascript" src="../../../ui/jquery.ui.button.js"></script>
12		- <script type="text/javascript" src="../../../ui/jquery.ui.autocomplete.js"></script>
	12	+ <script type="text/javascript" src="../../../ui/jquery.ui.menu.js"></script>
	13	+ <script type="text/javascript" src="http://jqueryui.com/themeroller/themeswitchertool/"></script>
13	14	<script type="text/javascript">
14	15	$(function() {
	16	+ $.fn.themeswitcher && $('<div/>').css({
	17	+ position: "absolute",
	18	+ right: 10,
	19	+ top: 10
	20	+ }).appendTo(document.body).themeswitcher();
	21	+
15	22	$.widget("ui.drilldown", {
16	23	_init: function() {
17	24	var self = this;
...	...	@@ -21,10 +28,12 @@
21	28	this.element.find("ul").hide().prev("a").prepend('<span class="ui-icon ui-icon-carat-1-e"></span>').end().filter(":first").show();
22	29
23	30	this.element.find("ul").menu({
	31	+ // disable built-in key handling
	32	+ input: $(),
24	33	focus: function(event, ui) {
25	34	self.activeItem = ui.item;
26	35	},
27		- selected: function(event, ui) {
	36	+ select: function(event, ui) {
28	37	if (this != self.active[0]) {
29	38	return;
30	39	}
...	...	@@ -33,7 +42,7 @@
33	42	self._open(nested);
34	43	} else {
35	44	self.element.find("h3").text(ui.item.text());
36		- self.options.selected.apply(this, arguments);
	45	+ self.options.select.apply(this, arguments);
37	46	}
38	47	}
39	48	});
...	...	@@ -115,7 +124,7 @@
115	124	});
116	125
117	126	var drilldown = $("#drilldown").drilldown({
118		- selected: function(event, ui) {
	127	+ select: function(event, ui) {
119	128	$("#log").append("<div>Selected " + ui.item.text() + "</div>");
120	129	}
121	130	});

...	...	@@ -7,7 +7,7 @@
7	7	<script type="text/javascript" src="../../../jquery-1.4.2.js"></script>
8	8	<script type="text/javascript" src="../../../ui/jquery.ui.core.js"></script>
9	9	<script type="text/javascript" src="../../../ui/jquery.ui.widget.js"></script>
10		- <script type="text/javascript" src="../../../ui/jquery.ui.autocomplete.js"></script>
	10	+ <script type="text/javascript" src="../../../ui/jquery.ui.menu.js"></script>
11	11	<script type="text/javascript" src="http://jqueryui.com/themeroller/themeswitchertool/"></script>
12	12	<script type="text/javascript">
13	13	$(function() {
...	...	@@ -17,39 +17,25 @@
17	17	top: 10
18	18	}).appendTo(document.body).themeswitcher();
19	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		- });
	20	+ function create() {
	21	+ menus.menu({
	22	+ select: function(event, ui) {
	23	+ $("<div/>").text("Selected: " + ui.item.text()).appendTo("#log");
	24	+ }
	25	+ });
	26	+ }
	27	+
	28	+ var menus = $("#menu1, #menu2");
	29	+ create();
52	30
	31	+ $("#toggle-destroy").toggle(function() {
	32	+ menus.menu("destroy");
	33	+ }, create);
	34	+ $("#toggle-disable").toggle(function() {
	35	+ menus.menu("disable");
	36	+ }, function() {
	37	+ menus.menu("enable");
	38	+ });
53	39	});
54	40	</script>
55	41	<style>
...	...	@@ -60,7 +46,7 @@
60	46	</head>
61	47	<body>
62	48
63		-<ul id="menu1" tabindex="0">
	49	+<ul id="menu1">
64	50	<li><a href="#">Aberdeen</a></li>
65	51	<li><a href="#">Ada</a></li>
66	52	<li><a href="#">Adamsville</a></li>
...	...	@@ -68,7 +54,7 @@
68	54	<li><a href="#">Adelphi</a></li>
69	55	</ul>
70	56
71		-<ul id="menu2" tabindex="0">
	57	+<ul id="menu2">
72	58	<li><a href="#">Aberdeen</a></li>
73	59	<li><a href="#">Ada</a></li>
74	60	<li><a href="#">Adamsville</a></li>
...	...	@@ -114,5 +100,8 @@
114	100	<div id="log" style="height: 400px; width: 300px; overflow: auto;" class="ui-widget-content"></div>
115	101	</div>
116	102
	103	+<button id="toggle-disable">Disable / Enable</button>
	104	+<button id="toggle-destroy">Destroy / Create</button>
	105	+
117	106	</body>
118	107	</html>

...	...	@@ -9,7 +9,7 @@
9	9	<script type="text/javascript" src="../../../ui/jquery.ui.core.js"></script>
10	10	<script type="text/javascript" src="../../../ui/jquery.ui.widget.js"></script>
11	11	<script type="text/javascript" src="../../../ui/jquery.ui.position.js"></script>
12		- <script type="text/javascript" src="../../../ui/jquery.ui.autocomplete.js"></script>
	12	+ <script type="text/javascript" src="../../../ui/jquery.ui.menu.js"></script>
13	13	<script type="text/javascript" src="http://jqueryui.com/themeroller/themeswitchertool/"></script>
14	14	<script type="text/javascript">
15	15	$(function() {

...	...	@@ -5,35 +5,3 @@
5	5
6	6	/* workarounds */
7	7	* html .ui-autocomplete { width:1px; } /* without this, the menu expands to 100% in IE6 */
8		-
9		-/* Menu
10		-----------------------------------*/
11		-.ui-menu {
12		- list-style:none;
13		- padding: 2px;
14		- margin: 0;
15		- display:block;
16		-}
17		-.ui-menu .ui-menu {
18		- margin-top: -3px;
19		-}
20		-.ui-menu .ui-menu-item {
21		- margin:0;
22		- padding: 0;
23		- zoom: 1;
24		- float: left;
25		- clear: left;
26		- width: 100%;
27		-}
28		-.ui-menu .ui-menu-item a {
29		- text-decoration:none;
30		- display:block;
31		- padding:.2em .4em;
32		- line-height:1.5;
33		- zoom:1;
34		-}
35		-.ui-menu .ui-menu-item a.ui-state-hover,
36		-.ui-menu .ui-menu-item a.ui-state-active {
37		- font-weight: normal;
38		- margin: -1px;
39		-}

...	...	@@ -5,6 +5,7 @@
5	5	@import url("jquery.ui.button.css");
6	6	@import url("jquery.ui.datepicker.css");
7	7	@import url("jquery.ui.dialog.css");
	8	+@import url("jquery.ui.menu.css");
8	9	@import url("jquery.ui.progressbar.css");
9	10	@import url("jquery.ui.resizable.css");
10	11	@import url("jquery.ui.selectable.css");

...	...	@@ -11,6 +11,7 @@
11	11	* jquery.ui.core.js
12	12	* jquery.ui.widget.js
13	13	* jquery.ui.position.js
	14	+ * jquery.ui.menu.js
14	15	*/
15	16	(function( $ ) {
16	17
...	...	@@ -116,6 +117,8 @@ $.widget( "ui.autocomplete", {
116	117	}, 13);
117	118	})
118	119	.menu({
	120	+ // custom key handling for now
	121	+ input: $(),
119	122	focus: function( event, ui ) {
120	123	var item = ui.item.data( "item.autocomplete" );
121	124	if ( false !== self._trigger( "focus", null, { item: item } ) ) {
...	...	@@ -125,7 +128,7 @@ $.widget( "ui.autocomplete", {
125	128	}
126	129	}
127	130	},
128		- selected: function( event, ui ) {
	131	+ select: function( event, ui ) {
129	132	var item = ui.item.data( "item.autocomplete" );
130	133	if ( false !== self._trigger( "select", event, { item: item } ) ) {
131	134	self.element.val( item.value );
...	...	@@ -327,185 +330,3 @@ $.extend( $.ui.autocomplete, {
327	330	});
328	331
329	332	}( jQuery ));
330		-
331		-/*
332		- * jQuery UI Menu (not officially released)
333		- *
334		- * This widget isn't yet finished and the API is subject to change. We plan to finish
335		- * it for the next release. You're welcome to give it a try anyway and give us feedback,
336		- * as long as you're okay with migrating your code later on. We can help with that, too.
337		- *
338		- * Copyright (c) 2010 AUTHORS.txt (http://jqueryui.com/about)
339		- * Dual licensed under the MIT (MIT-LICENSE.txt)
340		- * and GPL (GPL-LICENSE.txt) licenses.
341		- *
342		- * http://docs.jquery.com/UI/Menu
343		- *
344		- * Depends:
345		- * jquery.ui.core.js
346		- * jquery.ui.widget.js
347		- */
348		-(function($) {
349		-
350		-$.widget("ui.menu", {
351		- _create: function() {
352		- var self = this;
353		- this.element
354		- .addClass("ui-menu ui-widget ui-widget-content ui-corner-all")
355		- .attr({
356		- role: "listbox",
357		- "aria-activedescendant": "ui-active-menuitem"
358		- })
359		- .click(function( event ) {
360		- if ( !$( event.target ).closest( ".ui-menu-item a" ).length ) {
361		- return;
362		- }
363		- // temporary
364		- event.preventDefault();
365		- self.select( event );
366		- });
367		- this.refresh();
368		- },
369		-
370		- refresh: function() {
371		- var self = this;
372		-
373		- // don't refresh list items that are already adapted
374		- var items = this.element.children("li:not(.ui-menu-item):has(a)")
375		- .addClass("ui-menu-item")
376		- .attr("role", "menuitem");
377		-
378		- items.children("a")
379		- .addClass("ui-corner-all")
380		- .attr("tabindex", -1)
381		- // mouseenter doesn't work with event delegation
382		- .mouseenter(function( event ) {
383		- self.activate( event, $(this).parent() );
384		- })
385		- .mouseleave(function() {
386		- self.deactivate();
387		- });
388		- },
389		-
390		- activate: function( event, item ) {
391		- this.deactivate();
392		- if (this.hasScroll()) {
393		- var offset = item.offset().top - this.element.offset().top,
394		- scroll = this.element.attr("scrollTop"),
395		- elementHeight = this.element.height();
396		- if (offset < 0) {
397		- this.element.attr("scrollTop", scroll + offset);
398		- } else if (offset > elementHeight) {
399		- this.element.attr("scrollTop", scroll + offset - elementHeight + item.height());
400		- }
401		- }
402		- this.active = item.eq(0)
403		- .children("a")
404		- .addClass("ui-state-hover")
405		- .attr("id", "ui-active-menuitem")
406		- .end();
407		- this._trigger("focus", event, { item: item });
408		- },
409		-
410		- deactivate: function() {
411		- if (!this.active) { return; }
412		-
413		- this.active.children("a")
414		- .removeClass("ui-state-hover")
415		- .removeAttr("id");
416		- this._trigger("blur");
417		- this.active = null;
418		- },
419		-
420		- next: function(event) {
421		- this.move("next", ".ui-menu-item:first", event);
422		- },
423		-
424		- previous: function(event) {
425		- this.move("prev", ".ui-menu-item:last", event);
426		- },
427		-
428		- first: function() {
429		- return this.active && !this.active.prev().length;
430		- },
431		-
432		- last: function() {
433		- return this.active && !this.active.next().length;
434		- },
435		-
436		- move: function(direction, edge, event) {
437		- if (!this.active) {
438		- this.activate(event, this.element.children(edge));
439		- return;
440		- }
441		- var next = this.active[direction + "All"](".ui-menu-item").eq(0);
442		- if (next.length) {
443		- this.activate(event, next);
444		- } else {
445		- this.activate(event, this.element.children(edge));
446		- }
447		- },
448		-
449		- // TODO merge with previousPage
450		- nextPage: function(event) {
451		- if (this.hasScroll()) {
452		- // TODO merge with no-scroll-else
453		- if (!this.active \|\| this.last()) {
454		- this.activate(event, this.element.children(":first"));
455		- return;
456		- }
457		- var base = this.active.offset().top,
458		- height = this.element.height(),
459		- result = this.element.children("li").filter(function() {
460		- var close = $(this).offset().top - base - height + $(this).height();
461		- // TODO improve approximation
462		- return close < 10 && close > -10;
463		- });
464		-
465		- // TODO try to catch this earlier when scrollTop indicates the last page anyway
466		- if (!result.length) {
467		- result = this.element.children(":last");
468		- }
469		- this.activate(event, result);
470		- } else {
471		- this.activate(event, this.element.children(!this.active \|\| this.last() ? ":first" : ":last"));
472		- }
473		- },
474		-
475		- // TODO merge with nextPage
476		- previousPage: function(event) {
477		- if (this.hasScroll()) {
478		- // TODO merge with no-scroll-else
479		- if (!this.active \|\| this.first()) {
480		- this.activate(event, this.element.children(":last"));
481		- return;
482		- }
483		-
484		- var base = this.active.offset().top,
485		- height = this.element.height();
486		- result = this.element.children("li").filter(function() {
487		- var close = $(this).offset().top - base + height - $(this).height();
488		- // TODO improve approximation
489		- return close < 10 && close > -10;
490		- });
491		-
492		- // TODO try to catch this earlier when scrollTop indicates the last page anyway
493		- if (!result.length) {
494		- result = this.element.children(":first");
495		- }
496		- this.activate(event, result);
497		- } else {
498		- this.activate(event, this.element.children(!this.active \|\| this.first() ? ":last" : ":first"));
499		- }
500		- },
501		-
502		- hasScroll: function() {
503		- return this.element.height() < this.element.attr("scrollHeight");
504		- },
505		-
506		- select: function( event ) {
507		- this._trigger("selected", event, { item: this.active });
508		- }
509		-});
510		-
511		-}(jQuery));

jquery / jquery-ui

0 notes on commit 92723de Show line notes below

0 notes on commit `92723de` Show line notes below