mirror of
https://github.com/jquery/jquery-ui.git
synced 2024-10-05 01:44:18 +00:00
f8091f761c
working keyboard navigation, including nested menus. Still need to properly style the menu buttons, e.g. highlight the button of the currently open menu.
87 lines
2.5 KiB
HTML
87 lines
2.5 KiB
HTML
<!doctype html>
|
|
<html>
|
|
<head>
|
|
<title>Menu Visual Test: Default</title>
|
|
<link rel="stylesheet" href="../visual.css" type="text/css" />
|
|
<link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css" type="text/css" title="ui-theme" />
|
|
<script type="text/javascript" src="../../../jquery-1.4.4.js"></script>
|
|
<script type="text/javascript" src="../../../ui/jquery.ui.core.js"></script>
|
|
<script type="text/javascript" src="../../../ui/jquery.ui.widget.js"></script>
|
|
<script type="text/javascript" src="../../../ui/jquery.ui.position.js"></script>
|
|
<script type="text/javascript" src="../../../ui/jquery.ui.button.js"></script>
|
|
<script type="text/javascript" src="../../../ui/jquery.ui.menu.js"></script>
|
|
<script type="text/javascript" src="flyoutmenu.js"></script>
|
|
<script type="text/javascript" src="menubar.js"></script>
|
|
<!--
|
|
<script type="text/javascript" src="http://jqueryui.com/themeroller/themeswitchertool/"></script>
|
|
-->
|
|
<script type="text/javascript">
|
|
$(function() {
|
|
$.fn.themeswitcher && $('<div/>').css({
|
|
position: "absolute",
|
|
right: 10,
|
|
top: 10
|
|
}).appendTo(document.body).themeswitcher();
|
|
|
|
$(".menubar").menubar({
|
|
select: function(event, ui) {
|
|
$("<div/>").text("Selected: " + ui.item.text()).appendTo("#log");
|
|
ui.item.parents("ul:last").prev().focus()
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
<style>
|
|
body { font-size:62.5%; }
|
|
.ui-menu { width: 200px; position: absolute; outline: none; }
|
|
.ui-menu .ui-icon { float: right; }
|
|
.ui-menu li.ui-state-disabled {
|
|
font-weight: bold;
|
|
padding: .0em .4em;
|
|
margin: .4em 0 .2em;
|
|
line-height: 1.5;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div class="menubar ui-widget-header">
|
|
<a href="#">File</a>
|
|
<ul>
|
|
<li><a href="#">Open...</a></li>
|
|
<li class="ui-state-disabled">Open recent...</li>
|
|
<li><a href="#">Save</a></li>
|
|
<li><a href="#">Save as...</a></li>
|
|
<li><a href="#">Close</a></li>
|
|
<li><a href="#">Quit</a></li>
|
|
</ul>
|
|
<a href="#">Edit</a>
|
|
<ul>
|
|
<li><a href="#">Copy</a></li>
|
|
<li><a href="#">Cut</a></li>
|
|
<li class="ui-state-disabled">Paste</li>
|
|
</ul>
|
|
<a href="#">View</a>
|
|
<ul>
|
|
<li><a href="#">Fullscreen</a></li>
|
|
<li><a href="#">Fit into view</a></li>
|
|
<li>
|
|
<a href="#">Encoding</a>
|
|
<ul>
|
|
<li><a href="#">Auto-detect</a></li>
|
|
<li><a href="#">UTF-8</a></li>
|
|
<li><a href="#">UTF-16</a></li>
|
|
</ul>
|
|
</li>
|
|
<li><a href="#">Customize...</a></li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="ui-widget" style="margin-top:2em; font-family:Arial">
|
|
Log:
|
|
<div id="log" style="height: 400px; width: 300px; overflow: auto;" class="ui-widget-content"></div>
|
|
</div>
|
|
|
|
</body>
|
|
</html>
|