mirror of
https://github.com/jquery/jquery-ui.git
synced 2024-11-21 11:04:24 +00:00
Added left icons and CSS to indent menu option text.
This commit is contained in:
maggiewachs
parent
f2873b6ebf
commit
4ffe07457c
172
tests/static/menu/all-menus-icons.html
Normal file
172
tests/static/menu/all-menus-icons.html
Normal file
@ -0,0 +1,172 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>Menu Static Test : Default</title>
|
||||
<link rel="stylesheet" href="../static.css" type="text/css" />
|
||||
<link rel="stylesheet" href="../../../themes/base/jquery.ui.base.css" type="text/css" />
|
||||
<link rel="stylesheet" href="../../../themes/base/jquery.ui.theme.css" type="text/css" title="ui-theme" />
|
||||
<script type="text/javascript" src="../../../jquery-1.4.2.js"></script>
|
||||
<script type="text/javascript" src="../static.js"></script>
|
||||
|
||||
<script src="http://jqueryui.com/themeroller/themeswitchertool/" type="text/javascript"></script>
|
||||
<script>
|
||||
$(document).ready(function(){
|
||||
$('#switcher').themeswitcher();
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
<style type="text/css">
|
||||
/* styles for this page only */
|
||||
.ui-menu { width: 200px; }
|
||||
#flyout .ui-menu { position: relative; }
|
||||
#flyout .ui-menu.ui-menu-icons { position: absolute; }
|
||||
|
||||
.ui-menu.ui-menu-icons { position: relative; }
|
||||
.ui-menu.ui-menu-icons .ui-menu-item a { position: relative; padding-left: 2em; }
|
||||
|
||||
/* left-aligned icon */
|
||||
.ui-menu .ui-icon { position: absolute; top: .2em; left: .2em; }
|
||||
|
||||
/* right-aligned icon */
|
||||
.ui-menu .ui-icon.ui-menu-icon { position: static; float: right; }
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="switcher" style="position: absolute; top: 20px; right: 20px;"></div>
|
||||
|
||||
|
||||
<!-- NOTES:
|
||||
|
||||
* Added "ui-menu-icons" class to set a left indent value for all menu items in a single menu
|
||||
|
||||
-->
|
||||
|
||||
|
||||
<h2>Default</h2>
|
||||
|
||||
<ul role="menu" aria-activedescendant="ui-active-menuitem" class="ui-menu ui-menu-icons ui-widget ui-widget-content ui-corner-bottom">
|
||||
<li class="ui-menu-item" role="menuitem"><a href="#" tabindex="-1" class="ui-corner-all"><span class="ui-icon ui-icon-print"></span>Aberdeen</a></li>
|
||||
<li class="ui-menu-item" role="menuitem" id="ui-active-menuitem"><a href="#" tabindex="-1" class="ui-state-hover ui-corner-all">Ada</a></li>
|
||||
<li class="ui-menu-item" role="menuitem"><a href="#" tabindex="-1" class="ui-corner-all">Adamsville</a></li>
|
||||
<li class="ui-menu-item" role="menuitem"><a href="#" tabindex="-1" class="ui-corner-all"><span class="ui-icon ui-icon-scissors"></span>Addyston really long menu option to show wrap</a></li>
|
||||
<li class="ui-menu-item" role="menuitem"><a href="#" tabindex="-1" class="ui-corner-all"><span class="ui-icon ui-icon-wrench"></span>Adelphi</a></li>
|
||||
<li class="ui-menu-item" role="menuitem"><a href="#" tabindex="-1" class="ui-corner-all"><span class="ui-icon ui-icon-star"></span>Adena</a></li>
|
||||
<li class="ui-menu-item" role="menuitem"><a href="#" tabindex="-1" class="ui-corner-all">Adrian</a></li>
|
||||
<li class="ui-menu-item" role="menuitem"><a href="#" tabindex="-1" class="ui-corner-all">Akron</a></li>
|
||||
<li class="ui-menu-item" role="menuitem"><a href="#" tabindex="-1" class="ui-corner-all">Albany</a></li>
|
||||
</ul>
|
||||
|
||||
<br /><br />
|
||||
|
||||
<div id="drilldown">
|
||||
|
||||
<h2>Drilldown</h2>
|
||||
|
||||
<ul role="listbox" aria-activedescendant="ui-active-menuitem" class="ui-menu ui-menu-icons ui-widget ui-widget-content ui-corner-all">
|
||||
<li role="menuitem" class="ui-menu-item">
|
||||
<a href="#" tabindex="-1" class="ui-state-hover ui-corner-all"><span class="ui-icon ui-icon-print"></span><span class="ui-icon ui-menu-icon ui-icon-carat-1-e"></span>Amsterdam</a>
|
||||
<ul aria-activedescendant="ui-active-menuitem" role="listbox" class="ui-menu ui-widget ui-widget-content ui-corner-all" style="display: none;">
|
||||
<li role="menuitem" class="ui-menu-item"><a tabindex="-1" class="ui-corner-all" href="#">Aberdeen</a></li>
|
||||
<li role="menuitem" class="ui-menu-item"><a tabindex="-1" class="ui-corner-all" href="#">Ada</a></li>
|
||||
<li role="menuitem" class="ui-menu-item">
|
||||
<a tabindex="-1" class="ui-corner-all" href="#"><span class="ui-icon ui-menu-icon ui-icon-carat-1-e"></span>Adamsville</a>
|
||||
<ul aria-activedescendant="ui-active-menuitem" role="listbox" class="ui-menu ui-widget ui-widget-content ui-corner-all" style="display: none;">
|
||||
<li role="menuitem" class="ui-menu-item"><a tabindex="-1" class="ui-corner-all" href="#">Anaheim</a></li>
|
||||
<li role="menuitem" class="ui-menu-item">
|
||||
<a tabindex="-1" class="ui-corner-all" href="#"><span class="ui-icon ui-menu-icon ui-icon-carat-1-e"></span>Cologne</a>
|
||||
<ul aria-activedescendant="ui-active-menuitem" role="listbox" class="ui-menu ui-widget ui-widget-content ui-corner-all" style="display: none;">
|
||||
<li role="menuitem" class="ui-menu-item"><a tabindex="-1" class="ui-corner-all" href="#">Mberdeen</a></li>
|
||||
<li role="menuitem" class="ui-menu-item"><a tabindex="-1" class="ui-corner-all" href="#">Mda</a></li>
|
||||
<li role="menuitem" class="ui-menu-item"><a tabindex="-1" class="ui-corner-all" href="#">Mdamsville</a></li>
|
||||
<li role="menuitem" class="ui-menu-item"><a tabindex="-1" class="ui-corner-all" href="#">Mddyston</a></li>
|
||||
<li role="menuitem" class="ui-menu-item"><a tabindex="-1" class="ui-corner-all" href="#">Mmesville</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li role="menuitem" class="ui-menu-item"><a tabindex="-1" class="ui-corner-all" href="#">Frankfurt</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li role="menuitem" class="ui-menu-item"><a tabindex="-1" class="ui-corner-all" href="#">Addyston</a></li>
|
||||
<li role="menuitem" class="ui-menu-item"><a tabindex="-1" class="ui-corner-all" href="#">Amesville</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li role="menuitem" class="ui-menu-item"><a tabindex="-1" class="ui-corner-all" href="#"><span class="ui-icon ui-icon-star"></span>Anaheim</a></li>
|
||||
<li role="menuitem" class="ui-menu-item"><a tabindex="-1" class="ui-corner-all" href="#"><span class="ui-icon ui-icon-heart"></span>Cologne</a></li>
|
||||
<li role="menuitem" class="ui-menu-item"><a tabindex="-1" class="ui-corner-all" href="#"><span class="ui-icon ui-icon-key"></span>Frankfurt</a></li>
|
||||
<li role="menuitem" class="ui-menu-item">
|
||||
<a tabindex="-1" class="ui-corner-all" href="#"><span class="ui-icon ui-menu-icon ui-icon-carat-1-e"></span>Magdeburg</a>
|
||||
<ul aria-activedescendant="ui-active-menuitem" role="listbox" class="ui-menu ui-widget ui-widget-content ui-corner-all" style="display: none;">
|
||||
<li role="menuitem" class="ui-menu-item"><a tabindex="-1" class="ui-corner-all" href="#">Mberdeen</a></li>
|
||||
<li role="menuitem" class="ui-menu-item"><a tabindex="-1" class="ui-corner-all" href="#">Mda</a></li>
|
||||
<li role="menuitem" class="ui-menu-item"><a tabindex="-1" class="ui-corner-all" href="#">Mdamsville</a></li>
|
||||
<li role="menuitem" class="ui-menu-item"><a tabindex="-1" class="ui-corner-all" href="#">Mddyston</a></li>
|
||||
<li role="menuitem" class="ui-menu-item"><a tabindex="-1" class="ui-corner-all" href="#">Mmesville</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li role="menuitem" class="ui-menu-item"><a tabindex="-1" class="ui-corner-all" href="#">Munich</a></li>
|
||||
<li role="menuitem" class="ui-menu-item"><a tabindex="-1" class="ui-corner-all" href="#">Utrecht</a></li>
|
||||
<li role="menuitem" class="ui-menu-item"><a tabindex="-1" class="ui-corner-all" href="#">Zurich</a></li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
|
||||
<br /><br />
|
||||
|
||||
<div id="flyout">
|
||||
|
||||
<h2>Flyout / nested</h2>
|
||||
|
||||
<ul aria-activedescendant="ui-active-menuitem" role="listbox" class="ui-menu ui-menu-icons ui-widget ui-widget-content ui-corner-all" id="menu">
|
||||
<li role="menuitem" class="ui-menu-item">
|
||||
<a tabindex="-1" class="ui-corner-all" href="#"><span class="ui-icon ui-icon-scissors"></span>Amsterdam</a>
|
||||
<ul style="display: block; top: 88.5px; left: 205px;" aria-activedescendant="ui-active-menuitem" role="listbox" class="ui-menu ui-menu-icons ui-widget ui-widget-content ui-corner-all">
|
||||
<li role="menuitem" class="ui-menu-item"><a tabindex="-1" class="ui-corner-all" href="#">Aberdeen</a></li>
|
||||
<li role="menuitem" class="ui-menu-item"><a tabindex="-1" class="ui-corner-all" href="#">Ada</a></li>
|
||||
<li role="menuitem" class="ui-menu-item">
|
||||
<a tabindex="-1" class="ui-state-active ui-corner-all" href="#"><span class="ui-icon ui-icon-print"></span><span class="ui-icon ui-menu-icon ui-icon-carat-1-e"></span>Adamsville</a>
|
||||
<ul style="display: block; top: 73px; left: -11px; z-index: 9999;" aria-activedescendant="ui-active-menuitem" role="listbox" class="ui-menu ui-menu-icons ui-widget ui-widget-content ui-corner-all">
|
||||
<li role="menuitem" class="ui-menu-item"><a tabindex="-1" class="ui-corner-all" href="#">Anaheim</a></li>
|
||||
<li role="menuitem" class="ui-menu-item">
|
||||
<a tabindex="-1" class="ui-corner-all" href="#">Cologne</a>
|
||||
<ul style="display: none;" aria-activedescendant="ui-active-menuitem" role="listbox" class="ui-menu ui-menu-icons ui-widget ui-widget-content ui-corner-all">
|
||||
<li role="menuitem" class="ui-menu-item"><a tabindex="-1" class="ui-corner-all" href="#">Mberdeen</a></li>
|
||||
<li role="menuitem" class="ui-menu-item"><a tabindex="-1" class="ui-corner-all" href="#">Mda</a></li>
|
||||
<li role="menuitem" class="ui-menu-item"><a tabindex="-1" class="ui-corner-all" href="#">Mdamsville</a></li>
|
||||
<li role="menuitem" class="ui-menu-item"><a tabindex="-1" class="ui-corner-all" href="#">Mddyston</a></li>
|
||||
<li role="menuitem" class="ui-menu-item"><a tabindex="-1" class="ui-corner-all" href="#">Mmesville</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li role="menuitem" class="ui-menu-item"><a tabindex="-1" class="ui-state-hover ui-corner-all" href="#">Frankfurt</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li role="menuitem" class="ui-menu-item"><a tabindex="-1" class="ui-corner-all" href="#">Addyston</a></li>
|
||||
<li role="menuitem" class="ui-menu-item"><a tabindex="-1" class="ui-corner-all" href="#">Amesville</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li role="menuitem" class="ui-menu-item"><a tabindex="-1" class="ui-corner-all" href="#">Anaheim</a></li>
|
||||
<li role="menuitem" class="ui-menu-item"><a tabindex="-1" class="ui-corner-all" href="#"><span class="ui-icon ui-icon-pencil"></span>Cologne</a></li>
|
||||
<li role="menuitem" class="ui-menu-item"><a tabindex="-1" class="ui-corner-all" href="#"><span class="ui-icon ui-icon-clock"></span>Frankfurt</a></li>
|
||||
<li role="menuitem" class="ui-menu-item">
|
||||
<a tabindex="-1" class="ui-state-active ui-corner-all" href="#"><span class="ui-icon ui-icon-print"></span><span class="ui-icon ui-menu-icon ui-icon-carat-1-e"></span>Magdeburg</a>
|
||||
<ul style="display: none;" aria-activedescendant="ui-active-menuitem" role="listbox" class="ui-menu ui-menu-icons ui-widget ui-widget-content ui-corner-all">
|
||||
<li role="menuitem" class="ui-menu-item"><a tabindex="-1" class="ui-corner-all" href="#">Mberdeen</a></li>
|
||||
<li role="menuitem" class="ui-menu-item"><a tabindex="-1" class="ui-corner-all" href="#">Mda</a></li>
|
||||
<li role="menuitem" class="ui-menu-item"><a tabindex="-1" class="ui-corner-all" href="#">Mdamsville</a></li>
|
||||
<li role="menuitem" class="ui-menu-item"><a tabindex="-1" class="ui-corner-all" href="#">Mddyston</a></li>
|
||||
<li role="menuitem" class="ui-menu-item"><a tabindex="-1" class="ui-corner-all" href="#">Mmesville</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li role="menuitem" class="ui-menu-item"><a tabindex="-1" class="ui-corner-all" href="#"><span class="ui-icon ui-icon-lightbulb"></span>Munich</a></li>
|
||||
<li role="menuitem" class="ui-menu-item"><a tabindex="-1" class="ui-corner-all" href="#"><span class="ui-icon ui-icon-clipboard"></span>Utrecht</a></li>
|
||||
<li role="menuitem" class="ui-menu-item"><a tabindex="-1" class="ui-corner-all" href="#">Zurich</a></li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in New Issue
Block a user