Menu: Add icons support

jzaefferer · jzaefferer · commit 34e3a2401afc · 2011-04-20T17:18:15.000+02:00
diff --git a/tests/visual/menu/menu.html b/tests/visual/menu/menu.html
@@ -25,7 +25,7 @@
 			});
 		}
 		
-		var menus = $("#menu1, #menu2, #menu3");
+		var menus = $("#menu1, #menu2, #menu3, #menu4");
 		create();
 
 		$("#toggle-destroy").toggle(function() {
@@ -41,7 +41,7 @@
 	<style>
 		body { font-size:62.5%; }
 		.ui-menu { width: 200px; margin-bottom: 2em; }
-		#menu3 { height: 200px; overflow: auto; }
+		#menu4 { height: 200px; overflow: auto; }
 	</style>
 </head>
 <body>
@@ -56,7 +56,7 @@
 	<li><a href="#">Salzburg</a></li>
 </ul>
 
-<ul id="menu1">
+<ul id="menu2">
 	<li><a href="#">Aberdeen</a></li>
 	<li><a href="#">Ada</a></li>
 	<li><a href="#">Adamsville</a></li>
@@ -95,6 +95,44 @@
 </ul>
 
 <ul id="menu3">
+	<li><a href="#"><span class="ui-icon ui-icon-print"></span>Aberdeen</a></li>
+	<li><a href="#"><span class="ui-icon ui-icon-scissors"></span>Ada</a></li>
+	<li><a href="#">Adamsville</a></li>
+	<li><a href="#"><span class="ui-icon ui-icon-wrench"></span>Addyston</a></li>
+	<li>
+		<a href="#">Delphi</a>
+		<ul>
+			<li><a href="#">Ada</a></li>
+			<li><a href="#"><span class="ui-icon ui-icon-wrench"></span>Saarland</a></li>
+			<li><a href="#">Salzburg</a></li>
+		</ul>
+	</li>
+	<li><a href="#">Saarland</a></li>
+	<li>
+		<a href="#"><span class="ui-icon ui-icon-print"></span>Salzburg</a>
+		<ul>
+			<li>
+				<a href="#"><span class="ui-icon ui-icon-wrench"></span>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="#">Delphi</a>
+				<ul>
+					<li><a href="#"><span class="ui-icon ui-icon-wrench"></span>Ada</a></li>
+					<li><a href="#"><span class="ui-icon ui-icon-wrench"></span>Saarland</a></li>
+					<li><a href="#"><span class="ui-icon ui-icon-wrench"></span>Salzburg</a></li>
+				</ul>
+			</li>
+			<li><a href="#">Perch</a></li>
+		</ul>
+	</li>
+</ul>
+
+<ul id="menu4">
 	<li><a href="#">Aberdeen</a></li>
 	<li><a href="#">Ada</a></li>
 	<li><a href="#">Adamsville</a></li>
diff --git a/themes/base/jquery.ui.menu.css b/themes/base/jquery.ui.menu.css
@@ -39,6 +39,15 @@
 	margin: -1px;
 }
 
-.ui-menu .ui-icon { float: right; }
-
+/* nested menus */
 .ui-menu .ui-menu { position: absolute; }
+
+/* icon support */
+.ui-menu-icons { position: relative; }
+.ui-menu-icons .ui-menu-item a { position: relative; padding-left: 2em; }
+
+/* left-aligned */
+.ui-menu .ui-icon { position: absolute; top: .2em; left: .2em; }
+
+/* right-aligned */
+.ui-menu .ui-menu-icon { position: static; float: right; }
diff --git a/ui/jquery.ui.menu.js b/ui/jquery.ui.menu.js
@@ -28,6 +28,9 @@ $.widget("ui.menu", {
 		var self = this;
 		this.activeMenu = this.element;
 		this.menuId = this.element.attr( "id" ) || "ui-menu-" + idIncrement++;
+		if (this.element.find(".ui-icon").length) {
+			this.element.addClass("ui-menu-icons");
+		}
 		this.element
 			.addClass( "ui-menu ui-widget ui-widget-content ui-corner-all" )
 			.attr({
@@ -184,7 +187,7 @@ $.widget("ui.menu", {
 		
 		submenus
 			.prev("a")
-			.prepend('<span class="ui-icon ui-icon-carat-1-e"></span>');
+			.prepend('<span class="ui-menu-icon ui-icon ui-icon-carat-1-e"></span>');
 		
 		
 		// don't refresh list items that are already adapted
