Skip to content
Permalink
Browse files

Menu: Add icons support

  • Loading branch information
jzaefferer committed Apr 20, 2011
1 parent f0d5a00 commit 34e3a2401afc831ad084af1942670118a3ccabb1
Showing with 56 additions and 6 deletions.
  1. +41 −3 tests/visual/menu/menu.html
  2. +11 −2 themes/base/jquery.ui.menu.css
  3. +4 −1 ui/jquery.ui.menu.js
@@ -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>
@@ -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; }
@@ -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

0 comments on commit 34e3a24

Please sign in to comment.
You can’t perform that action at this time.