jquery / jquery-ui

Source
Commits
Network (134)
Graphs
Tree: f1edd5b

The official jQuery user interface library. — Read more

This URL has Read+Write access

Menu: default and contextmenu demos

jzaefferer (author)

Fri Jun 18 01:23:41 -0700 2010

commit f1edd5b62e61e675af81
tree 52067893d1b7d3df7a42
parent c3d32496565bb29ba5e0

A	demos/menu/contextmenu.html	76 •••••
A	demos/menu/default.html	60 •••••
A	demos/menu/index.html	17 •••••

demos/menu/contextmenu.html

View file @ f1edd5b

...	...	@@ -0,0 +1,76 @@
	1	+<!DOCTYPE html>
	2	+<html lang="en">
	3	+<head>
	4	+ <meta charset="UTF-8" />
	5	+ <title>jQuery UI Menu - Contextmenu demo</title>
	6	+ <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" />
	7	+ <script type="text/javascript" src="../../jquery-1.4.2.js"></script>
	8	+ <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
	9	+ <script type="text/javascript" src="../../ui/jquery.ui.position.js"></script>
	10	+ <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
	11	+ <script type="text/javascript" src="../../ui/jquery.ui.menu.js"></script>
	12	+ <link type="text/css" href="../demos.css" rel="stylesheet" />
	13	+ <script type="text/javascript">
	14	+ $(function() {
	15	+ $("button").each(function() {
	16	+ $(this).next().menu({
	17	+ select: function(event, ui) {
	18	+ $(this).hide();
	19	+ $("#log").append("<div>Selected " + ui.item.text() + "</div>");
	20	+ },
	21	+ input: $(this)
	22	+ }).hide();
	23	+ }).click(function(event) {
	24	+ var menu = $(this).next();
	25	+ if (menu.is(":visible")) {
	26	+ menu.hide();
	27	+ return false;
	28	+ }
	29	+ menu.menu("deactivate").show().css({top:0, left:0}).position({
	30	+ my: "left top",
	31	+ at: "right top",
	32	+ of: this
	33	+ });
	34	+ $(document).one("click", function() {
	35	+ menu.hide();
	36	+ });
	37	+ return false;
	38	+ })
	39	+ });
	40	+ </script>
	41	+ <style>
	42	+ .ui-menu { width: 200px; position: absolute; }
	43	+ </style>
	44	+</head>
	45	+<body>
	46	+
	47	+<div class="demo">
	48	+
	49	+ <button>Select a city</button>
	50	+ <ul>
	51	+ <li><a href="#">Amsterdam</a></li>
	52	+ <li><a href="#">Anaheim</a></li>
	53	+ <li><a href="#">Cologne</a></li>
	54	+ <li><a href="#">Frankfurt</a></li>
	55	+ <li><a href="#">Magdeburg</a></li>
	56	+ <li><a href="#">Munich</a></li>
	57	+ <li><a href="#">Utrecht</a></li>
	58	+ <li><a href="#">Zurich</a></li>
	59	+ </ul>
	60	+
	61	+ <div id="log"></div>
	62	+
	63	+</div><!-- End demo -->
	64	+
	65	+<div class="demo-description">
	66	+
	67	+<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>
	68	+
	69	+<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>
	70	+
	71	+</div><!-- End demo-description -->
	72	+
	73	+
	74	+
	75	+</body>
	76	+</html>

demos/menu/default.html

View file @ f1edd5b

...	...	@@ -0,0 +1,60 @@
	1	+<!DOCTYPE html>
	2	+<html lang="en">
	3	+<head>
	4	+ <meta charset="UTF-8" />
	5	+ <title>jQuery UI Menu - Default demo</title>
	6	+ <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" />
	7	+ <script type="text/javascript" src="../../jquery-1.4.2.js"></script>
	8	+ <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
	9	+ <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
	10	+ <script type="text/javascript" src="../../ui/jquery.ui.menu.js"></script>
	11	+ <link type="text/css" href="../demos.css" rel="stylesheet" />
	12	+ <script type="text/javascript">
	13	+ $(function() {
	14	+ $("ul").menu();
	15	+ });
	16	+ </script>
	17	+ <style>
	18	+
	19	+ </style>
	20	+</head>
	21	+<body>
	22	+
	23	+<div class="demo">
	24	+
	25	+ <ul>
	26	+ <li><a href="#">Aberdeen</a></li>
	27	+ <li><a href="#">Ada</a></li>
	28	+ <li><a href="#">Adamsville</a></li>
	29	+ <li><a href="#">Addyston</a></li>
	30	+ <li><a href="#">Adelphi</a></li>
	31	+ <li><a href="#">Adena</a></li>
	32	+ <li><a href="#">Adrian</a></li>
	33	+ <li><a href="#">Akron</a></li>
	34	+ <li><a href="#">Albany</a></li>
	35	+ <li><a href="#">Alexandria</a></li>
	36	+ <li><a href="#">Alger</a></li>
	37	+ <li><a href="#">Alledonia</a></li>
	38	+ <li><a href="#">Alliance</a></li>
	39	+ <li><a href="#">Alpha</a></li>
	40	+ <li><a href="#">Alvada</a></li>
	41	+ <li><a href="#">Alvordton</a></li>
	42	+ <li><a href="#">Amanda</a></li>
	43	+ <li><a href="#">Amelia</a></li>
	44	+ <li><a href="#">Amesville</a></li>
	45	+ <li><a href="#">Aberdeen</a></li>
	46	+ <li><a href="#">Ada</a></li>
	47	+ </ul>
	48	+
	49	+</div><!-- End demo -->
	50	+
	51	+<div class="demo-description">
	52	+
	53	+<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>
	54	+
	55	+</div><!-- End demo-description -->
	56	+
	57	+
	58	+
	59	+</body>
	60	+</html>

demos/menu/index.html

View file @ f1edd5b

...	...	@@ -0,0 +1,17 @@
	1	+<!DOCTYPE html>
	2	+<html lang="en">
	3	+<head>
	4	+ <meta charset="UTF-8" />
	5	+ <title>jQuery UI Menu Demos</title>
	6	+ <link type="text/css" href="../demos.css" rel="stylesheet" />
	7	+</head>
	8	+<body>
	9	+ <div class="demos-nav">
	10	+ <h4>Examples</h4>
	11	+ <ul>
	12	+ <li class="demo-config-on"><a href="default.html">Default functionality</a></li>
	13	+ <li><a href="contextmenu.html">Contextmenu</a></li>
	14	+ </ul>
	15	+ </div>
	16	+</body>
	17	+</html>

0 notes on commit `f1edd5b` Show line notes below

Please log in to comment.

jquery / jquery-ui

0 notes on commit f1edd5b Show line notes below

0 notes on commit `f1edd5b` Show line notes below