diff options
| author | jzaefferer <joern.zaefferer@gmail.com> | 2011-04-20 17:18:15 +0200 |
|---|---|---|
| committer | jzaefferer <joern.zaefferer@gmail.com> | 2011-04-20 17:18:15 +0200 |
| commit | 34e3a2401afc831ad084af1942670118a3ccabb1 (patch) | |
| tree | 4273482e7c1ee539c49c1080e9545e43a5b24d39 | |
| parent | f0d5a0008f193c1ebabd808ff0a9f88455b02658 (diff) | |
| download | jquery-ui-34e3a2401afc831ad084af1942670118a3ccabb1.tar.gz jquery-ui-34e3a2401afc831ad084af1942670118a3ccabb1.zip | |
Menu: Add icons support
| -rw-r--r-- | tests/visual/menu/menu.html | 44 | ||||
| -rw-r--r-- | themes/base/jquery.ui.menu.css | 13 | ||||
| -rw-r--r-- | ui/jquery.ui.menu.js | 5 |
3 files changed, 56 insertions, 6 deletions
diff --git a/tests/visual/menu/menu.html b/tests/visual/menu/menu.html index cc1f4a939..1db12f25b 100644 --- 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 index 20fd2ce56..a700d2895 100644 --- 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; }
\ No newline at end of file diff --git a/ui/jquery.ui.menu.js b/ui/jquery.ui.menu.js index f233aeeb0..3b48d29a3 100644 --- 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 |