diff options
| author | maggiewachs <maggie@filamentgroup.com> | 2010-04-16 11:29:05 -0400 |
|---|---|---|
| committer | maggiewachs <maggie@filamentgroup.com> | 2010-04-16 11:29:05 -0400 |
| commit | 4ffe07457cb21332e9a33c319c1f1f610e532a27 (patch) | |
| tree | a164299471608a205894d5c95bec628ca3d8396d | |
| parent | f2873b6ebf427edd013eaef37adf5cbd4c06a1cf (diff) | |
| download | jquery-ui-4ffe07457cb21332e9a33c319c1f1f610e532a27.tar.gz jquery-ui-4ffe07457cb21332e9a33c319c1f1f610e532a27.zip | |
Added left icons and CSS to indent menu option text.
| -rw-r--r-- | tests/static/menu/all-menus-icons.html | 172 |
1 files changed, 172 insertions, 0 deletions
diff --git a/tests/static/menu/all-menus-icons.html b/tests/static/menu/all-menus-icons.html new file mode 100644 index 000000000..b23ab0072 --- /dev/null +++ b/tests/static/menu/all-menus-icons.html @@ -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> |