Menu: Implemented destroy method and disabled option, modified test t…

…o pass html-compare-destroy test and extended default visual test for testing destroy and disabled features
jquery · Jun 18, 2010 · b376fa8 · b376fa8
1 parent 921e40f
commit b376fa8
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 15 deletions.
diff --git a/tests/unit/menu/menu.html b/tests/unit/menu/menu.html
@@ -59,12 +59,12 @@ <h2 id="qunit-userAgent"></h2>
 
 <div id="main" class="mainOnMoon">
 
-<ul id="menu1">
-	<li><a href="#">Aberdeen</a></li>
-	<li><a href="#">Ada</a></li>
-	<li><a href="#">Adamsville</a></li>
-	<li><a href="#">Addyston</a></li>
-	<li><a href="#">Adelphi</a></li>
+<ul class="foo" id="menu1">
+	<li class="foo"><a class="foo" href="#">Aberdeen</a></li>
+	<li class="foo"><a class="foo" href="#">Ada</a></li>
+	<li class="foo"><a class="foo" href="#">Adamsville</a></li>
+	<li class="foo"><a class="foo" href="#">Addyston</a></li>
+	<li class="foo"><a class="foo" href="#">Adelphi</a></li>
 </ul>
 <div id="log"></div>
 

diff --git a/tests/visual/menu/menu.html b/tests/visual/menu/menu.html
@@ -17,12 +17,25 @@
 			top: 10
 		}).appendTo(document.body).themeswitcher();
 
-		$("#menu1, #menu2").menu({
-			select: function(event, ui) {
-				$("<div/>").text("Selected: " + ui.item.text()).appendTo("#log");
-			}
-		});
+		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>
@@ -87,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>
diff --git a/ui/jquery.ui.menu.js b/ui/jquery.ui.menu.js
@@ -23,6 +23,9 @@ $.widget("ui.menu", {
 				"aria-activedescendant": "ui-active-menuitem"
 			})
 			.click(function( event ) {
+				if (self.options.disabled) {
+					return false;
+				}
 				if ( !$( event.target ).closest( ".ui-menu-item a" ).length ) {
 					return;
 				}
@@ -36,6 +39,9 @@ $.widget("ui.menu", {
 			this.options.input = this.element.attr("tabindex", 0);
 		}
 		this.options.input.bind("keydown.menu", function(event) {
+			if (self.options.disabled) {
+				return;
+			}
 			switch (event.keyCode) {
 			case $.ui.keyCode.PAGE_UP:
 				self.previousPage();
@@ -67,8 +73,21 @@ $.widget("ui.menu", {
 	},
 
 	destroy: function() {
-		// TODO implement destroy
-		$.Widget.prototype.apply(this, arguments);
+		$.Widget.prototype.destroy.apply(this, arguments);
+
+		this.element
+			.removeClass("ui-menu ui-widget ui-widget-content ui-corner-all")
+			.removeAttr("tabindex")
+			.removeAttr("role")
+			.removeAttr("aria-activedescendant");
+
+		this.element.children(".ui-menu-item")
+			.removeClass("ui-menu-item")
+			.removeAttr("role")
+			.children("a")
+			.removeClass("ui-corner-all")
+			.removeAttr("tabindex")
+			.unbind(".menu");
 	},
 
 	refresh: function() {
@@ -83,10 +102,16 @@ $.widget("ui.menu", {
 			.addClass("ui-corner-all")
 			.attr("tabindex", -1)
 			// mouseenter doesn't work with event delegation
-			.mouseenter(function( event ) {
+			.bind("mouseenter.menu", function( event ) {
+				if (self.options.disabled) {
+					return;
+				}
 				self.activate( event, $(this).parent() );
 			})
-			.mouseleave(function() {
+			.bind("mouseleave.menu", function() {
+				if (self.options.disabled) {
+					return;
+				}
 				self.deactivate();
 			});
 	},