mirror of
https://github.com/jquery/jquery-ui.git
synced 2024-11-21 11:04:24 +00:00
0352c2c71f
and menubar demos. Change doesn't seem to affect autocomplete as that doesn't use href-attributes anyway.
66 lines
1.9 KiB
HTML
66 lines
1.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<title>jQuery UI Menu - Contextmenu demo</title>
|
|
<link href="../../themes/base/jquery.ui.all.css" rel="stylesheet" />
|
|
<script src="../../jquery-1.5.1.js"></script>
|
|
<script src="../../ui/jquery.ui.core.js"></script>
|
|
<script src="../../ui/jquery.ui.position.js"></script>
|
|
<script src="../../ui/jquery.ui.widget.js"></script>
|
|
<script src="../../ui/jquery.ui.menu.js"></script>
|
|
<script src="../../ui/jquery.ui.button.js"></script>
|
|
<script src="../../ui/jquery.ui.popup.js"></script>
|
|
<link href="../demos.css" rel="stylesheet" />
|
|
<script>
|
|
$(function() {
|
|
$(".demo button").button({
|
|
icons: {
|
|
primary: "ui-icon-home",
|
|
secondary: "ui-icon-triangle-1-s"
|
|
}
|
|
}).next().menu({
|
|
select: function(event, ui) {
|
|
$(this).hide();
|
|
$("#log").append("<div>Selected " + ui.item.text() + "</div>");
|
|
}
|
|
}).popup();
|
|
});
|
|
</script>
|
|
<style>
|
|
.ui-menu { width: 200px; position: absolute; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div class="demo">
|
|
|
|
<button>Select a city</button>
|
|
<ul>
|
|
<li><a href="#Amsterdam">Amsterdam</a></li>
|
|
<li><a href="#Anaheim">Anaheim</a></li>
|
|
<li><a href="#Cologne">Cologne</a></li>
|
|
<li><a href="#Frankfurt">Frankfurt</a></li>
|
|
<li><a href="#Magdeburg">Magdeburg</a></li>
|
|
<li><a href="#Munich">Munich</a></li>
|
|
<li><a href="#Utrecht">Utrecht</a></li>
|
|
<li><a href="#Zurich">Zurich</a></li>
|
|
</ul>
|
|
|
|
<div id="log"></div>
|
|
|
|
</div><!-- End demo -->
|
|
|
|
<div class="demo-description">
|
|
|
|
<p>TODO update - A simple contextmenu: Click the button, or tab to it and hit space to open the menu. Use the mouse or cursor keys to select an item, click it or hit enter to select it.</p>
|
|
|
|
<p>The keyboard handling is part of the menu. Using the input option to menu is configured to add the key event handlers to the button, as that button gets focused when clicked.</p>
|
|
|
|
</div><!-- End demo-description -->
|
|
|
|
|
|
|
|
</body>
|
|
</html>
|