aboutsummaryrefslogtreecommitdiffstats
path: root/demos
diff options
context:
space:
mode:
Diffstat (limited to 'demos')
-rw-r--r--demos/autocomplete/categories.html1
-rw-r--r--demos/autocomplete/combobox.html1
-rw-r--r--demos/autocomplete/custom-data.html1
-rw-r--r--demos/autocomplete/default.html1
-rw-r--r--demos/autocomplete/folding.html1
-rw-r--r--demos/autocomplete/multiple-remote.html2
-rw-r--r--demos/autocomplete/multiple.html1
-rw-r--r--demos/autocomplete/remote-jsonp.html1
-rw-r--r--demos/autocomplete/remote-with-cache.html1
-rw-r--r--demos/autocomplete/remote.html1
-rw-r--r--demos/autocomplete/xml.html1
-rw-r--r--demos/button/splitbutton.html59
-rw-r--r--demos/index.html2
-rw-r--r--demos/menu/contextmenu.html82
-rw-r--r--demos/menu/default.html54
-rw-r--r--demos/menu/index.html17
16 files changed, 208 insertions, 18 deletions
diff --git a/demos/autocomplete/categories.html b/demos/autocomplete/categories.html
index 494445b25..163c969dd 100644
--- a/demos/autocomplete/categories.html
+++ b/demos/autocomplete/categories.html
@@ -8,6 +8,7 @@
<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>
<script src="../../ui/jquery.ui.autocomplete.js"></script>
<link rel="stylesheet" href="../demos.css">
<style>
diff --git a/demos/autocomplete/combobox.html b/demos/autocomplete/combobox.html
index 37bb0c179..f74f0f106 100644
--- a/demos/autocomplete/combobox.html
+++ b/demos/autocomplete/combobox.html
@@ -9,6 +9,7 @@
<script src="../../ui/jquery.ui.widget.js"></script>
<script src="../../ui/jquery.ui.button.js"></script>
<script src="../../ui/jquery.ui.position.js"></script>
+ <script src="../../ui/jquery.ui.menu.js"></script>
<script src="../../ui/jquery.ui.autocomplete.js"></script>
<link rel="stylesheet" href="../demos.css">
<style>
diff --git a/demos/autocomplete/custom-data.html b/demos/autocomplete/custom-data.html
index 9b6a2e6d4..8a3a0b235 100644
--- a/demos/autocomplete/custom-data.html
+++ b/demos/autocomplete/custom-data.html
@@ -8,6 +8,7 @@
<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>
<script src="../../ui/jquery.ui.autocomplete.js"></script>
<link rel="stylesheet" href="../demos.css">
<style>
diff --git a/demos/autocomplete/default.html b/demos/autocomplete/default.html
index 2f1495925..9de61467f 100644
--- a/demos/autocomplete/default.html
+++ b/demos/autocomplete/default.html
@@ -8,6 +8,7 @@
<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>
<script src="../../ui/jquery.ui.autocomplete.js"></script>
<link rel="stylesheet" href="../demos.css">
<script>
diff --git a/demos/autocomplete/folding.html b/demos/autocomplete/folding.html
index 5a06faa23..cea358a8d 100644
--- a/demos/autocomplete/folding.html
+++ b/demos/autocomplete/folding.html
@@ -8,6 +8,7 @@
<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>
<script src="../../ui/jquery.ui.autocomplete.js"></script>
<link rel="stylesheet" href="../demos.css">
<script>
diff --git a/demos/autocomplete/multiple-remote.html b/demos/autocomplete/multiple-remote.html
index 9494da98a..f0ea7aafd 100644
--- a/demos/autocomplete/multiple-remote.html
+++ b/demos/autocomplete/multiple-remote.html
@@ -1,6 +1,7 @@
<!DOCTYPE html>
<html lang="en">
<head>
+<<<<<<< HEAD
<meta charset="utf-8">
<title>jQuery UI Autocomplete - Multiple, remote</title>
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
@@ -8,6 +9,7 @@
<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>
<script src="../../ui/jquery.ui.autocomplete.js"></script>
<link rel="stylesheet" href="../demos.css">
<style>
diff --git a/demos/autocomplete/multiple.html b/demos/autocomplete/multiple.html
index 44e6971e5..0b8e14478 100644
--- a/demos/autocomplete/multiple.html
+++ b/demos/autocomplete/multiple.html
@@ -8,6 +8,7 @@
<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>
<script src="../../ui/jquery.ui.autocomplete.js"></script>
<link rel="stylesheet" href="../demos.css">
<script>
diff --git a/demos/autocomplete/remote-jsonp.html b/demos/autocomplete/remote-jsonp.html
index ab14bcd14..986e9f0f0 100644
--- a/demos/autocomplete/remote-jsonp.html
+++ b/demos/autocomplete/remote-jsonp.html
@@ -8,6 +8,7 @@
<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>
<script src="../../ui/jquery.ui.autocomplete.js"></script>
<link rel="stylesheet" href="../demos.css">
<style>
diff --git a/demos/autocomplete/remote-with-cache.html b/demos/autocomplete/remote-with-cache.html
index 1f4cce74b..a6b02f255 100644
--- a/demos/autocomplete/remote-with-cache.html
+++ b/demos/autocomplete/remote-with-cache.html
@@ -8,6 +8,7 @@
<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>
<script src="../../ui/jquery.ui.autocomplete.js"></script>
<link rel="stylesheet" href="../demos.css">
<style>
diff --git a/demos/autocomplete/remote.html b/demos/autocomplete/remote.html
index de8062100..c8ee849fe 100644
--- a/demos/autocomplete/remote.html
+++ b/demos/autocomplete/remote.html
@@ -8,6 +8,7 @@
<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>
<script src="../../ui/jquery.ui.autocomplete.js"></script>
<link rel="stylesheet" href="../demos.css">
<style>
diff --git a/demos/autocomplete/xml.html b/demos/autocomplete/xml.html
index ca338716b..fff432e58 100644
--- a/demos/autocomplete/xml.html
+++ b/demos/autocomplete/xml.html
@@ -8,6 +8,7 @@
<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>
<script src="../../ui/jquery.ui.autocomplete.js"></script>
<link rel="stylesheet" href="../demos.css">
<style>
diff --git a/demos/button/splitbutton.html b/demos/button/splitbutton.html
index 580c49cc5..8baf12f00 100644
--- a/demos/button/splitbutton.html
+++ b/demos/button/splitbutton.html
@@ -8,6 +8,8 @@
<script src="../../ui/jquery.ui.core.js"></script>
<script src="../../ui/jquery.ui.widget.js"></script>
<script src="../../ui/jquery.ui.button.js"></script>
+ <script src="../../ui/jquery.ui.position.js"></script>
+ <script src="../../ui/jquery.ui.menu.js"></script>
<link rel="stylesheet" href="../demos.css">
<script>
$(function() {
@@ -16,39 +18,60 @@
.click(function() {
alert( "Running the last action" );
})
- .next()
- .button( {
- text: false,
- icons: {
- primary: "ui-icon-triangle-1-s"
- }
- })
- .click(function() {
- alert( "Could display a menu to select an action" );
- })
- .parent()
- .buttonset();
+ .next()
+ .button( {
+ text: false,
+ icons: {
+ primary: "ui-icon-triangle-1-s"
+ }
+ })
+ .click( function() {
+ var menu = $(this).parent().next().show().position({
+ my: "left top",
+ at: "left bottom",
+ of: this
+ });
+ $(document).one("click", function() {
+ menu.hide();
+ });
+ return false;
+ })
+ .parent()
+ .buttonset()
+ .next()
+ .hide()
+ .menu();
});
</script>
<style>
-
+ .ui-menu { position: absolute; width: 100px; }
</style>
</head>
<body>
<div class="demo">
-<div>
- <button id="rerun">Run last action</button>
- <button id="select">Select an action</button>
-</div>
+ <div>
+ <div>
+ <button id="rerun">Run last action</button>
+ <button id="select">Select an action</button>
+ </div>
+ <ul>
+ <li><a href="#">Open...</a></li>
+ <li><a href="#">Save</a></li>
+ <li><a href="#">Delete</a></li>
+ </ul>
+ </div>
</div><!-- End demo -->
<div class="demo-description">
-<p>An example of a split button built with two buttons: A plan button with just text, one with only a primary icon and no text. Both are grouped together in a set.</p>
+
+<p>An example of a split button built with two buttons: A plain button with just text, one with only a primary icon
+and no text. Both are grouped together in a set.</p>
+
</div><!-- End demo-description -->
</body>
diff --git a/demos/index.html b/demos/index.html
index fed42a23c..298803d2f 100644
--- a/demos/index.html
+++ b/demos/index.html
@@ -19,6 +19,7 @@
<script src="../ui/jquery.ui.dialog.js"></script>
<script src="../ui/jquery.ui.draggable.js"></script>
<script src="../ui/jquery.ui.droppable.js"></script>
+ <script src="../ui/jquery.ui.menu.js"></script>
<script src="../ui/jquery.ui.position.js"></script>
<script src="../ui/jquery.ui.progressbar.js"></script>
<script src="../ui/jquery.ui.resizable.js"></script>
@@ -270,6 +271,7 @@
<dd><a href="button/index.html">Button</a></dd>
<dd><a href="datepicker/index.html">Datepicker</a></dd>
<dd><a href="dialog/index.html">Dialog</a></dd>
+ <dd><a href="menu/index.html">Menu</a></dd>
<dd><a href="progressbar/index.html">Progressbar</a></dd>
<dd><a href="slider/index.html">Slider</a></dd>
<dd><a href="spinner/index.html">Spinner</a></dd>
diff --git a/demos/menu/contextmenu.html b/demos/menu/contextmenu.html
new file mode 100644
index 000000000..682d016dc
--- /dev/null
+++ b/demos/menu/contextmenu.html
@@ -0,0 +1,82 @@
+<!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>
+ <script type="text/javascript" src="../../ui/jquery.ui.button.js"></script>
+ <link type="text/css" href="../demos.css" rel="stylesheet" />
+ <script type="text/javascript">
+ $(function() {
+ $(".demo button").button({
+ icons: {
+ primary: "ui-icon-home",
+ secondary: "ui-icon-triangle-1-s"
+ }
+ }).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>
diff --git a/demos/menu/default.html b/demos/menu/default.html
new file mode 100644
index 000000000..580439acb
--- /dev/null
+++ b/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 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() {
+ $(".demo 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>
+ </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/demos/menu/index.html b/demos/menu/index.html
new file mode 100644
index 000000000..cfc12bc1d
--- /dev/null
+++ b/demos/menu/index.html
@@ -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>
generated by cgit v1.2.3 (git 2.39.1) at 2024-12-28 10:19:53 +0000