library-mirrors/jquery-ui
1
0
Fork 0
mirror of https://github.com/jquery/jquery-ui.git synced 2024-11-21 11:04:24 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Menu: default and contextmenu demos

Browse Source
This commit is contained in:
jzaefferer 2010-06-18 10:23:41 +02:00
parent c3d3249656
commit f1edd5b62e
3 changed files with 153 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

76
demos/menu/contextmenu.html Normal file
View File

@ -0,0 +1,76 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>jQuery UI Menu - Contextmenu demo</title>
<link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" />
<script type="text/javascript" src="../../jquery-1.4.2.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.position.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.menu.js"></script>
<link type="text/css" href="../demos.css" rel="stylesheet" />
<script type="text/javascript">
$(function() {
$("button").each(function() {
$(this).next().menu({
select: function(event, ui) {
$(this).hide();
$("#log").append("<div>Selected " + ui.item.text() + "</div>");
},
input: $(this)
}).hide();
}).click(function(event) {
var menu = $(this).next();
if (menu.is(":visible")) {
menu.hide();
return false;
}
menu.menu("deactivate").show().css({top:0, left:0}).position({
my: "left top",
at: "right top",
of: this
});
$(document).one("click", function() {
menu.hide();
});
return false;
})
});
</script>
<style>
.ui-menu { width: 200px; position: absolute; }
</style>
</head>
<body>
<div class="demo">
<button>Select a city</button>
<ul>
<li><a href="#">Amsterdam</a></li>
<li><a href="#">Anaheim</a></li>
<li><a href="#">Cologne</a></li>
<li><a href="#">Frankfurt</a></li>
<li><a href="#">Magdeburg</a></li>
<li><a href="#">Munich</a></li>
<li><a href="#">Utrecht</a></li>
<li><a href="#">Zurich</a></li>
</ul>
<div id="log"></div>
</div><!-- End demo -->
<div class="demo-description">
<p>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>

60
demos/menu/default.html Normal file
View File

@ -0,0 +1,60 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>jQuery UI Menu - Default demo</title>
<link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" />
<script type="text/javascript" src="../../jquery-1.4.2.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.menu.js"></script>
<link type="text/css" href="../demos.css" rel="stylesheet" />
<script type="text/javascript">
$(function() {
$("ul").menu();
});
</script>
<style>
</style>
</head>
<body>
<div class="demo">
<ul>
<li><a href="#">Aberdeen</a></li>
<li><a href="#">Ada</a></li>
<li><a href="#">Adamsville</a></li>
<li><a href="#">Addyston</a></li>
<li><a href="#">Adelphi</a></li>
<li><a href="#">Adena</a></li>
<li><a href="#">Adrian</a></li>
<li><a href="#">Akron</a></li>
<li><a href="#">Albany</a></li>
<li><a href="#">Alexandria</a></li>
<li><a href="#">Alger</a></li>
<li><a href="#">Alledonia</a></li>
<li><a href="#">Alliance</a></li>
<li><a href="#">Alpha</a></li>
<li><a href="#">Alvada</a></li>
<li><a href="#">Alvordton</a></li>
<li><a href="#">Amanda</a></li>
<li><a href="#">Amelia</a></li>
<li><a href="#">Amesville</a></li>
<li><a href="#">Aberdeen</a></li>
<li><a href="#">Ada</a></li>
</ul>
</div><!-- End demo -->
<div class="demo-description">
<p>A menu with the default configuration. A list is transformed, adding themeing, mouse and keyboard navigation support. Try to tab to the menu and use the cursor keys to navigate.</p>
</div><!-- End demo-description -->
</body>
</html>

17
demos/menu/index.html Normal file
View File

@ -0,0 +1,17 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>jQuery UI Menu Demos</title>
<link type="text/css" href="../demos.css" rel="stylesheet" />
</head>
<body>
<div class="demos-nav">
<h4>Examples</h4>
<ul>
<li class="demo-config-on"><a href="default.html">Default functionality</a></li>
<li><a href="contextmenu.html">Contextmenu</a></li>
</ul>
</div>
</body>
</html>