From 3909e6d89e01e4cd8777377c63037896bb95aa2f Mon Sep 17 00:00:00 2001 From: Leif Johansson <leifj@sunet.se> Date: Fri, 25 Nov 2011 21:18:19 +0100 Subject: new jq layout --- .../jquery-ui-1.9pre/demos/menu/contextmenu.html | 65 ++++++++++++++++++++++ 1 file changed, 65 insertions(+) create mode 100644 src/main/webapp/jquery-ui-1.9pre/demos/menu/contextmenu.html (limited to 'src/main/webapp/jquery-ui-1.9pre/demos/menu/contextmenu.html') diff --git a/src/main/webapp/jquery-ui-1.9pre/demos/menu/contextmenu.html b/src/main/webapp/jquery-ui-1.9pre/demos/menu/contextmenu.html new file mode 100644 index 0000000..33e07f7 --- /dev/null +++ b/src/main/webapp/jquery-ui-1.9pre/demos/menu/contextmenu.html @@ -0,0 +1,65 @@ +<!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.7.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() { + var btn = $(".demo button").button({ + icons: { + primary: "ui-icon-home", + secondary: "ui-icon-triangle-1-s" + } + }); + $("#cities").menu({ + select: function(event, ui) { + $("#log").append("<div>Selected " + ui.item.text() + "</div>"); + }, + trigger : btn}); + }); + </script> + <style> + .ui-menu { width: 200px; position: absolute; } + </style> +</head> +<body> + +<div class="demo"> + + <button>Select a city</button> + <ul id="cities"> + <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>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> -- cgit v1.1