diff options
Diffstat (limited to 'src/main/webapp/jquery-ui-1.9pre/demos/menu')
5 files changed, 302 insertions, 0 deletions
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> diff --git a/src/main/webapp/jquery-ui-1.9pre/demos/menu/default.html b/src/main/webapp/jquery-ui-1.9pre/demos/menu/default.html new file mode 100644 index 0000000..fbaff7a --- /dev/null +++ b/src/main/webapp/jquery-ui-1.9pre/demos/menu/default.html @@ -0,0 +1,54 @@ +<!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 src="../../jquery-1.7.1.js"></script> + <script src="../../ui/jquery.ui.core.js"></script> + <script src="../../ui/jquery.ui.widget.js"></script> + <script src="../../ui/jquery.ui.menu.js"></script> + <link href="../demos.css" rel="stylesheet" /> + <script> + $(function() { + $(".demo ul").menu(); + }); + </script> + <style> + + </style> +</head> +<body> + +<div class="demo"> + + <ul> + <li><a href="#Aberdeen">Aberdeen</a></li> + <li><a href="#Ada">Ada</a></li> + <li><a href="#Adamsville">Adamsville</a></li> + <li><a href="#Addyston">Addyston</a></li> + <li><a href="#Adelphi">Adelphi</a></li> + <li><a href="#Adena">Adena</a></li> + <li><a href="#Adrian">Adrian</a></li> + <li><a href="#Akron">Akron</a></li> + <li><a href="#Albany">Albany</a></li> + <li><a href="#Alexandria">Alexandria</a></li> + <li><a href="#Alger">Alger</a></li> + <li><a href="#Alledonia">Alledonia</a></li> + <li><a href="#Alliance">Alliance</a></li> + <li><a href="#Alpha">Alpha</a></li> + <li><a href="#Alvada">Alvada</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> diff --git a/src/main/webapp/jquery-ui-1.9pre/demos/menu/index.html b/src/main/webapp/jquery-ui-1.9pre/demos/menu/index.html new file mode 100644 index 0000000..f55d165 --- /dev/null +++ b/src/main/webapp/jquery-ui-1.9pre/demos/menu/index.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="UTF-8" /> + <title>jQuery UI Menu Demos</title> + <link 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> + <li><a href="topalignmenu.html">Top-aligned sub menus</a></li> + <li><a href="navigationmenu.html">Navigation menu</a></li> + </ul> + </div> +</body> +</html> diff --git a/src/main/webapp/jquery-ui-1.9pre/demos/menu/navigationmenu.html b/src/main/webapp/jquery-ui-1.9pre/demos/menu/navigationmenu.html new file mode 100644 index 0000000..3b60673 --- /dev/null +++ b/src/main/webapp/jquery-ui-1.9pre/demos/menu/navigationmenu.html @@ -0,0 +1,84 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="UTF-8" /> + <title>jQuery UI Menu - Navigation Menu demo</title> + <link type="text/css" 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.widget.js"></script> + <script src="../../ui/jquery.ui.position.js"></script> + <script src="../../ui/jquery.ui.menu.js"></script> + <link href="../demos.css" rel="stylesheet" /> + <script> + $(function() { + $("#navMenu").menu({ + select: function( event, ui ) { + var link = ui.item.children( "a:first" ); + if ( link.attr( "target" ) || event.metaKey || event.shiftKey || event.ctrlKey ) { + return; + } + location.href = link.attr( "href" ); + } + }); + }); + </script> + <style> + body { font-size:62.5%; } + .ui-menu { width: 200px; margin-bottom: 2em; } + </style> +</head> +<body> + +<div class="demo"> + + <ul id="navMenu"> + <li><a href="?Aberdeen">Aberdeen</a></li> + <li><a href="?Ada">Ada</a></li> + <li><a href="?Adamsville">Adamsville</a></li> + <li><a href="?Addyston">Addyston</a></li> + <li> + <a href="?Delphi">Delphi</a> + <ul> + <li><a href="?Ada">Ada</a></li> + <li><a href="?Saarland">Saarland</a></li> + <li><a href="?Salzburg">Salzburg</a></li> + </ul> + </li> + <li><a href="?Saarland">Saarland</a></li> + <li> + <a href="?Salzburg">Salzburg</a> + <ul> + <li> + <a href="?Delphi">Delphi</a> + <ul> + <li><a href="?Ada">Ada</a></li> + <li><a href="?Saarland">Saarland</a></li> + <li><a href="?Salzburg">Salzburg</a></li> + </ul> + </li> + <li> + <a href="?Delphi">Delphi</a> + <ul> + <li><a href="?Ada">Ada</a></li> + <li><a href="?Saarland">Saarland</a></li> + <li><a href="?Salzburg">Salzburg</a></li> + </ul> + </li> + <li><a href="?Perch">Perch</a></li> + </ul> + </li> + </ul> + +</div><!-- End demo --> + +<div class="demo-description"> + +<p>A navigation menu. 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> diff --git a/src/main/webapp/jquery-ui-1.9pre/demos/menu/topalignmenu.html b/src/main/webapp/jquery-ui-1.9pre/demos/menu/topalignmenu.html new file mode 100644 index 0000000..1477b66 --- /dev/null +++ b/src/main/webapp/jquery-ui-1.9pre/demos/menu/topalignmenu.html @@ -0,0 +1,80 @@ +<!doctype html> +<html> +<head> + <title>Menu Demo: Top-aligned Menu</title> + <link rel="stylesheet" href="../demos.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.7.1.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.menu.js"></script> + <script type="text/javascript"> + $(function() { + $("#topMenu").menu({ + position: { of: "ul:has(a.ui-state-focus):last" } + }); + }); + </script> + <style> + .ui-menu { width: 200px; margin-bottom: 2em; } + </style> +</head> +<body> + +<ul id="topMenu"> + <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="#">Delphi</a> + <ul> + <li><a href="#">Ada</a></li> + <li><a href="#">Saarland</a></li> + <li><a href="#">Salzburg</a></li> + </ul> + </li> + <li><a href="#">Saarland</a></li> + <li> + <a href="#">Salzburg</a> + <ul> + <li> + <a href="#">Delphi</a> + <ul> + <li><a href="#">Ada</a></li> + <li><a href="#">Saarland</a></li> + <li><a href="#">Salzburg</a></li> + </ul> + </li> + <li> + <a href="#">Adamsville</a> + <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="#">Delphi</a> + <ul> + <li><a href="#">Ada</a></li> + <li><a href="#">Saarland</a></li> + <li><a href="#">Salzburg</a></li> + </ul> + </li> + <li><a href="#">Saarland</a></li> + </ul> + </li> + <li><a href="#">Perch</a> + <ul> + <li><a href="#">Addyston</a></li> + <li><a href="#">Delphi</a></li> + <li><a href="#">Perch</a></li> + </ul> + </li> + </ul> + </li> +</ul> + +</body> +</html> |