library-mirrors/jquery-ui
1
0
Fork 0
mirror of https://github.com/jquery/jquery-ui.git synced 2025-01-07 20:34:24 +00:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

Menu: Add icons support

Browse Source
This commit is contained in:
jzaefferer 2011-04-20 17:18:15 +02:00
parent f0d5a0008f
commit 34e3a2401a
3 changed files with 56 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
tests/visual/menu/menu.html
View File

@ -25,7 +25,7 @@
}); });
} }
var menus = $("#menu1, #menu2, #menu3"); var menus = $("#menu1, #menu2, #menu3, #menu4");
create(); create();
$("#toggle-destroy").toggle(function() { $("#toggle-destroy").toggle(function() {
@ -41,7 +41,7 @@
<style> <style>
body { font-size:62.5%; } body { font-size:62.5%; }
.ui-menu { width: 200px; margin-bottom: 2em; } .ui-menu { width: 200px; margin-bottom: 2em; }
#menu3 { height: 200px; overflow: auto; } #menu4 { height: 200px; overflow: auto; }
</style> </style>
</head> </head>
<body> <body>
@ -56,7 +56,7 @@
<li><a href="#">Salzburg</a></li> <li><a href="#">Salzburg</a></li>
</ul> </ul>
<ul id="menu1"> <ul id="menu2">
<li><a href="#">Aberdeen</a></li> <li><a href="#">Aberdeen</a></li>
<li><a href="#">Ada</a></li> <li><a href="#">Ada</a></li>
<li><a href="#">Adamsville</a></li> <li><a href="#">Adamsville</a></li>
@ -95,6 +95,44 @@
</ul> </ul>
<ul id="menu3"> <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="#">Aberdeen</a></li>
<li><a href="#">Ada</a></li> <li><a href="#">Ada</a></li>
<li><a href="#">Adamsville</a></li> <li><a href="#">Adamsville</a></li>

13
themes/base/jquery.ui.menu.css vendored
View File

@ -39,6 +39,15 @@
margin: -1px; margin: -1px;
} }
.ui-menu .ui-icon { float: right; } /* nested menus */
.ui-menu .ui-menu { position: absolute; } .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; }

5
ui/jquery.ui.menu.js vendored
View File

@ -28,6 +28,9 @@ $.widget("ui.menu", {
var self = this; var self = this;
this.activeMenu = this.element; this.activeMenu = this.element;
this.menuId = this.element.attr( "id" ) || "ui-menu-" + idIncrement++; this.menuId = this.element.attr( "id" ) || "ui-menu-" + idIncrement++;
if (this.element.find(".ui-icon").length) {
this.element.addClass("ui-menu-icons");
}
this.element this.element
.addClass( "ui-menu ui-widget ui-widget-content ui-corner-all" ) .addClass( "ui-menu ui-widget ui-widget-content ui-corner-all" )
.attr({ .attr({
@ -184,7 +187,7 @@ $.widget("ui.menu", {
submenus submenus
.prev("a") .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 // don't refresh list items that are already adapted