aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
Diffstat
-rw-r--r--demos/demos.css3
-rw-r--r--demos/index.html4
-rw-r--r--demos/menu/contextmenu.html48
-rw-r--r--demos/menu/default.html12
-rw-r--r--demos/menu/index.html2
-rw-r--r--demos/menubar/default.html (renamed from tests/visual/menu/menubar.html)48
-rw-r--r--demos/menubar/index.html16
-rw-r--r--demos/popup/default.html83
-rw-r--r--demos/popup/index.html18
-rw-r--r--demos/popup/popup-menu-table.html108
-rw-r--r--demos/popup/popup-menu.html98
-rw-r--r--demos/resizable/constrain-area.html2
-rw-r--r--demos/tooltip/video-player.html22
-rw-r--r--tests/visual/menu/contextmenu.html191
-rw-r--r--tests/visual/menu/popup.html176
-rw-r--r--ui/jquery.ui.menubar.js (renamed from tests/visual/menu/menubar.js)16
-rw-r--r--ui/jquery.ui.popup.js (renamed from tests/visual/menu/popup.js)33
17 files changed, 434 insertions, 446 deletions
diff --git a/demos/demos.css b/demos/demos.css
index f5f2dbe64..cf6da8bd1 100644
--- a/demos/demos.css
+++ b/demos/demos.css
@@ -129,8 +129,7 @@ eventually we should convert the font sizes to ems -- using px for now to minimi
.normal h3.demo-header { font-size:32px; padding:0 0 5px; border-bottom:1px solid #eee; text-transform: capitalize; }
.normal h4.demo-subheader { font-size:10px; text-transform: uppercase; color:#999; padding:8px 0 3px; border:0; margin:0; }
-.normal a:link,
-.normal a:visited { color:#1b75bb; text-decoration:none; }
+#demo-notes a, #demo-link a, #demo-source a { color:#1b75bb; text-decoration:none; }
.normal a:hover,
.normal a:active { color:#0b559b; }
diff --git a/demos/index.html b/demos/index.html
index 22dbfc5c5..b1cfcdd44 100644
--- a/demos/index.html
+++ b/demos/index.html
@@ -20,6 +20,8 @@
<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.menubar.js"></script>
+ <script src="../ui/jquery.ui.popup.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>
@@ -279,6 +281,8 @@
<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="menubar/index.html">Menubar</a></dd>
+ <dd><a href="popup/index.html">Popup</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
index 0fb98c140..115f15b24 100644
--- a/demos/menu/contextmenu.html
+++ b/demos/menu/contextmenu.html
@@ -3,44 +3,28 @@
<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.5.1.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">
+ <link href="../../themes/base/jquery.ui.all.css" rel="stylesheet" />
+ <script src="../../jquery-1.5.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() {
$(".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>");
- }
- }).hide();
- }).click(function(event) {
- var menu = $(this).next();
- if (menu.is(":visible")) {
- menu.hide();
- return false;
+ }).next().menu({
+ select: function(event, ui) {
+ $(this).hide();
+ $("#log").append("<div>Selected " + ui.item.text() + "</div>");
}
- menu.menu("blur").show().position({
- my: "left top",
- at: "right top",
- of: this
- });
- $(document).one("click", function() {
- menu.hide();
- });
- return false;
- })
+ }).popup();
});
</script>
<style>
@@ -69,7 +53,7 @@
<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>TODO update - 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>
diff --git a/demos/menu/default.html b/demos/menu/default.html
index 2d9dddf28..7a1dd99e7 100644
--- a/demos/menu/default.html
+++ b/demos/menu/default.html
@@ -4,12 +4,12 @@
<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.5.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.menu.js"></script>
- <link type="text/css" href="../demos.css" rel="stylesheet" />
- <script type="text/javascript">
+ <script src="../../jquery-1.5.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();
});
diff --git a/demos/menu/index.html b/demos/menu/index.html
index cfc12bc1d..3088f9d7d 100644
--- a/demos/menu/index.html
+++ b/demos/menu/index.html
@@ -3,7 +3,7 @@
<head>
<meta charset="UTF-8" />
<title>jQuery UI Menu Demos</title>
- <link type="text/css" href="../demos.css" rel="stylesheet" />
+ <link href="../demos.css" rel="stylesheet" />
</head>
<body>
<div class="demos-nav">
diff --git a/tests/visual/menu/menubar.html b/demos/menubar/default.html
index d2185e97c..be49b4589 100644
--- a/tests/visual/menu/menubar.html
+++ b/demos/menubar/default.html
@@ -1,27 +1,18 @@
<!DOCTYPE html>
<html>
<head>
- <title>Menu Visual Test: Default</title>
- <link rel="stylesheet" href="../visual.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.5.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.button.js"></script>
- <script type="text/javascript" src="../../../ui/jquery.ui.menu.js"></script>
- <script type="text/javascript" src="menubar.js"></script>
- <!--
- <script type="text/javascript" src="http://jqueryui.com/themeroller/themeswitchertool/"></script>
- -->
- <script type="text/javascript">
+ <title>jQuery UI Menubar - Default demo</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 src="../../jquery-1.5.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.button.js"></script>
+ <script src="../../ui/jquery.ui.menu.js"></script>
+ <script src="../../ui/jquery.ui.menubar.js"></script>
+ <script>
$(function() {
- $.fn.themeswitcher && $('<div/>').css({
- position: "absolute",
- right: 10,
- top: 10
- }).appendTo(document.body).themeswitcher();
-
$("td:has(.menubar)").clone().appendTo("tbody tr:not(:first)");
$("#bar1, .menubar").menubar({
@@ -40,7 +31,6 @@
});
</script>
<style type="text/css">
- body { font-size:62.5%; }
#bar1, #bar2 { margin: 0 0 4em; } /* style for this page only */
.ui-menu { width: 200px; position: absolute; outline: none; z-index: 9999; }
.ui-menu .ui-icon { float: right; }
@@ -64,7 +54,7 @@
.ui-menubar-item {
float: left;
}
-
+ /*
table {
border-collapse: collapse;
}
@@ -72,10 +62,12 @@
padding: 0.5em;
border: 1px solid black;
}
+ */
</style>
</head>
<body>
+<div class="demo">
<ul id="bar1" class="menubar">
<li>
<a href="#">File</a>
@@ -168,6 +160,7 @@
</li>
</ul>
+<!--
<table id="movies" class="ui-widget">
<thead>
<tr>
@@ -222,11 +215,20 @@
</tr>
</tbody>
</table>
+-->
<div class="ui-widget" style="margin-top:2em; font-family:Arial">
Log:
- <div id="log" style="height: 400px; width: 300px; overflow: auto;" class="ui-widget-content"></div>
+ <div id="log" style="height: 100px; width: 300px; overflow: auto;" class="ui-widget-content"></div>
</div>
+</div>
+
+<div class="demo-description">
+
+<p>TODO</p>
+
+</div><!-- End demo-description -->
+
</body>
</html>
diff --git a/demos/menubar/index.html b/demos/menubar/index.html
new file mode 100644
index 000000000..3eebda2d0
--- /dev/null
+++ b/demos/menubar/index.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8" />
+ <title>jQuery UI Menubar 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>
+ </ul>
+ </div>
+</body>
+</html>
diff --git a/demos/popup/default.html b/demos/popup/default.html
new file mode 100644
index 000000000..71b3c8dd2
--- /dev/null
+++ b/demos/popup/default.html
@@ -0,0 +1,83 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>jQuery UI Popup - Default demo</title>
+ <link rel="stylesheet" href="../demos.css" />
+ <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css" title="ui-theme" />
+ <script src="../../jquery-1.5.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.button.js"></script>
+ <script src="../../ui/jquery.ui.menu.js"></script>
+ <script src="../../ui/jquery.ui.popup.js"></script>
+ <script>
+ $(function() {
+ var selected = {
+ select: function( event, ui ) {
+ $( "<div/>" ).text( "Selected: " + ui.item.text() ).appendTo( "#log" );
+ $(this).popup("close");
+ }
+ };
+
+ $("#login-form").popup()
+ .find(":submit").button().click(function(event) {
+ event.preventDefault();
+ });
+ });
+ </script>
+ <style type="text/css">
+ .ui-popup { position: absolute; z-index: 5000; }
+ .ui-menu { width: 200px; }
+
+ /*
+ table {
+ border-collapse: collapse;
+ }
+ th, td {
+ padding: 0.5em;
+ border: 1px solid black;
+ }
+ */
+
+ #login-form {
+ width: 16em; border: 1px solid gray; border-radius: 5px;
+ padding: 1em;
+ box-shadow: 3px 3px 5px -1px rgba(0, 0, 0, 0.5);
+ background: lightgray; background-image: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#ddd));
+ font-size: 1.3em; outline: none;
+ }
+ #login-form label { display: inline-block; width: 5em; }
+ #login-form .submit { margin-left: 5em; }
+ </style>
+</head>
+<body>
+
+<div class="demo">
+ <a href="#login-form">Log In</a>
+ <div id="login-form" class="ui-widget-content" tabIndex="0">
+ <form>
+ <div>
+ <label>Username</label>
+ <input type="username" />
+ </div>
+ <div>
+ <label>Password</label>
+ <input type="password" />
+ </div>
+ <div>
+ <input type="submit" class="submit" value="Login" />
+ </div>
+ </form>
+ </div>
+</div>
+
+<div class="demo-description">
+
+<p>A link to a login form that opens as a popup. [Not quite functional, focus handling needs to get better]</p>
+
+</div><!-- End demo-description -->
+
+
+</body>
+</html>
diff --git a/demos/popup/index.html b/demos/popup/index.html
new file mode 100644
index 000000000..e69365c98
--- /dev/null
+++ b/demos/popup/index.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8" />
+ <title>jQuery UI Popup 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="popup-menu.html">Menu's as popup</a></li>
+ <li><a href="popup-menu-table.html">Menu's as popup in a table</a></li>
+ </ul>
+ </div>
+</body>
+</html>
diff --git a/demos/popup/popup-menu-table.html b/demos/popup/popup-menu-table.html
new file mode 100644
index 000000000..a06a38434
--- /dev/null
+++ b/demos/popup/popup-menu-table.html
@@ -0,0 +1,108 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>jQuery UI Popup - Menu as Popup in table demo</title>
+ <link rel="stylesheet" href="../demos.css" />
+ <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css" title="ui-theme" />
+ <script src="../../jquery-1.5.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.button.js"></script>
+ <script src="../../ui/jquery.ui.menu.js"></script>
+ <script src="../../ui/jquery.ui.popup.js"></script>
+ <script>
+ $(function() {
+ var selected = {
+ select: function( event, ui ) {
+ $( "<div/>" ).text( "Selected: " + ui.item.text() ).appendTo( "#log" );
+ $(this).popup("close");
+ }
+ };
+
+ $(".demo td:has(.menubar)").clone().appendTo(".demo tbody tr:not(:first)");
+ $("table .menubar > ul").menu(selected).popup().prev().button();
+ });
+ </script>
+ <style type="text/css">
+ .ui-popup { position: absolute; z-index: 5000; }
+ .ui-menu { width: 200px; }
+
+ .demo table {
+ border-collapse: collapse;
+ }
+ .demo th, .demo td {
+ padding: 0.5em;
+ }
+ </style>
+</head>
+<body>
+
+<div class="demo">
+
+ <table id="movies" class="ui-widget">
+ <thead>
+ <tr>
+ <th data-field="Name" class="ui-widget-header">Name</th>
+ <th data-field="ReleaseYear" class="ui-widget-header">Release Year</th>
+ <th data-field="AverageRating" class="ui-widget-header">Average Rating</th>
+ <th class="ui-widget-header"></th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td class="ui-widget-content">Red Hot Chili Peppers: Funky Monks</td>
+ <td class="ui-widget-content">1993</td>
+ <td class="ui-widget-content">3.6</td>
+ <td class="ui-widget-content">
+ <div class="menubar">
+ <a href="#">Options</a>
+ <ul>
+ <li><a href="#">Order...</a></li>
+ <li class="ui-state-disabled">Write a Review...</li>
+ <li><a href="#">Find Similar Movies...</a></li>
+ <li>
+ <a href="#">Rate</a>
+ <ul>
+ <li><a href="#">5 stars</a></li>
+ <li><a href="#">4 stars</a></li>
+ <li><a href="#">3 stars</a></li>
+ <li><a href="#">2 stars</a></li>
+ <li><a href="#">1 stars</a></li>
+ </ul>
+ </li>
+ </ul>
+ </div>
+ </td>
+ </tr>
+ <tr>
+ <td class="ui-widget-content">Rod Stewart: Storyteller 1984-1991</td>
+ <td class="ui-widget-content">1991</td>
+ <td class="ui-widget-content">3.1</td>
+ </tr>
+ <tr>
+ <td class="ui-widget-content">Stevie Ray Vaughan and Double Trouble: Live at the El Mocambo 1983</td>
+ <td class="ui-widget-content">1991</td>
+ <td class="ui-widget-content">3.9</td>
+ </tr>
+ <tr>
+ <td class="ui-widget-content">Spike and Mike's Sick &amp; Twisted Festival of Animation</td>
+ <td class="ui-widget-content">1997</td>
+ <td class="ui-widget-content">2.6</td>
+ </tr>
+ </tbody>
+ </table>
+
+ <div id="log"></div>
+</div>
+
+
+<div class="demo-description">
+
+<p>Poup menu in a table. Works okay standalone, not so much in the scrolling demo view. For that to work better, position() would have to take the closest scrolled parent into account for collision detection.</p>
+
+</div><!-- End demo-description -->
+
+
+</body>
+</html>
diff --git a/demos/popup/popup-menu.html b/demos/popup/popup-menu.html
new file mode 100644
index 000000000..7152d85bc
--- /dev/null
+++ b/demos/popup/popup-menu.html
@@ -0,0 +1,98 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>jQuery UI Popup - Popup Menu</title>
+ <link rel="stylesheet" href="../demos.css" />
+ <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css" title="ui-theme" />
+ <script src="../../jquery-1.5.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.button.js"></script>
+ <script src="../../ui/jquery.ui.menu.js"></script>
+ <script src="../../ui/jquery.ui.popup.js"></script>
+ <script>
+ $(function() {
+ function log( msg ) {
+ $( "<div/>" ).text( msg ).appendTo( "#log" );
+ }
+ var selected = {
+ select: function( event, ui ) {
+ log( "Selected: " + ui.item.text() );
+ $(this).popup("close");
+ }
+ };
+
+ $("#button1").button()
+ .next().menu(selected).popup();
+
+ $( "#rerun" )
+ .button()
+ .click(function() {
+ log( "Selected: " + $( this ).text() );
+ })
+ .next()
+ .button({
+ text: false,
+ icons: {
+ primary: "ui-icon-triangle-1-s"
+ }
+ })
+ .next()
+ .menu(selected)
+ .popup({
+ trigger: $("#select")
+ })
+ .parent()
+ .buttonset({
+ items: "button"
+ });
+ });
+ </script>
+ <style type="text/css">
+ .ui-popup { position: absolute; z-index: 5000; }
+ .ui-menu { width: 200px; }
+ </style>
+</head>
+<body>
+
+<div class="demo">
+
+ <button id="button1">Show context menu 1</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>
+ <div>
+ <button id="rerun">Run last action</button>
+ <button id="select">Select an action</button>
+ <ul>
+ <li><a href="#">Open...</a></li>
+ <li><a href="#">Save</a></li>
+ <li><a href="#">Delete</a></li>
+ </ul>
+ </div>
+ </div>
+
+ <div id="log"></div>
+</div>
+
+
+<div class="demo-description">
+
+<p>Make the popup a menu (or the menu a popup) and you get context menus.</p>
+
+</div><!-- End demo-description -->
+
+
+</body>
+</html>
diff --git a/demos/resizable/constrain-area.html b/demos/resizable/constrain-area.html
index a7003352c..33539f940 100644
--- a/demos/resizable/constrain-area.html
+++ b/demos/resizable/constrain-area.html
@@ -10,7 +10,7 @@
<script src="../../ui/jquery.ui.mouse.js"></script>
<script src="../../ui/jquery.ui.resizable.js"></script>
<link rel="stylesheet" href="../demos.css">
- <style\>
+ <style>
#container { width: 300px; height: 300px; }
#container h3 { text-align: center; margin: 0; margin-bottom: 10px; }
#resizable { background-position: top left; width: 150px; height: 150px; }
diff --git a/demos/tooltip/video-player.html b/demos/tooltip/video-player.html
index 473c6a6a3..56003ab5a 100644
--- a/demos/tooltip/video-player.html
+++ b/demos/tooltip/video-player.html
@@ -10,24 +10,34 @@
<script type="text/javascript" src="../../ui/jquery.ui.tooltip.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.button.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.menu.js"></script>
- <script type="text/javascript" src="../../tests/visual/menu/popup.js"></script>
+ <script type="text/javascript" src="../../ui/jquery.ui.popup.js"></script>
+ <script type="text/javascript" src="../../ui/jquery.effects.core.js"></script>
+ <script type="text/javascript" src="../../ui/jquery.effects.blind.js"></script>
<link type="text/css" href="../demos.css" rel="stylesheet" />
<script type="text/javascript">
$(function() {
function notify( input ) {
var msg = "Selected " + $.trim($(input).text());
- $("<div/>").appendTo(document.body).text(msg).addClass("notification ui-state-highlight").position({
- my: "center top+20",
+ $("<div/>").appendTo(document.body).text(msg).addClass("notification ui-state-default ui-corner-bottom").position({
+ my: "center top",
at: "center top",
of: window
- }).delay(1000).fadeOut("slow", function() {
+ }).show({
+ effect: "blind"
+ }).delay(1000).hide({
+ effect: "blind",
+ duration: "slow"
+ }, function() {
$(this).remove();
});
}
$("ul").menu({
select: function(event, ui) {
- // stop button from handling the click
+ // TODO stop button from handling the click
$(this).popup("close");
+ // TODO should probably be handled by poup, see ESCAPE key handler
+ // affects key handling
+ $(this).prev().focus();
notify(ui.item);
}
}).popup();
@@ -75,7 +85,7 @@
.set { display: inline-block; }
- .notification { position: absolute; display: inline-block; font-size: 2em; padding: 1em; border-radius: 15px; box-shadow: 2px 2px 5px -2px rgba(0,0,0,0.5); }
+ .notification { position: absolute; display: inline-block; font-size: 2em; padding: .5em; box-shadow: 2px 2px 5px -2px rgba(0,0,0,0.5); }
</style>
</head>
<body>
diff --git a/tests/visual/menu/contextmenu.html b/tests/visual/menu/contextmenu.html
deleted file mode 100644
index 63d9877a0..000000000
--- a/tests/visual/menu/contextmenu.html
+++ /dev/null
@@ -1,191 +0,0 @@
-<!doctype html>
-<html>
-<head>
- <title>Menu Visual Test: Default</title>
- <link rel="stylesheet" href="../visual.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.5.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" src="http://jqueryui.com/themeroller/themeswitchertool/"></script>
- -->
- <script type="text/javascript">
- $(function() {
- $.fn.themeswitcher && $('<div/>').css({
- position: "absolute",
- right: 10,
- top: 10
- }).appendTo(document.body).themeswitcher();
-
- // TODO close other menus when opening a new one
- $("button").each(function() {
- $(this).next().menu({
- /* top-alignment
- position: function(item) {
- return {
- my: "left top",
- at: "right top",
- of: item.parent()
- }
- },
- */
- select: function(event, ui) {
- $(this).hide().prev().focus();
- $("#log").append("<div>Selected " + ui.item.text() + "</div>");
- }
- }).hide();
-
- // equal height
- //menu.find("ul").height(menu.height());
- }).click(function(event) {
- // required to prevent the click handler below from handling this event
- event.stopPropagation();
- var menu = $("#menu" + this.id).menu("blur").show().position({
- my: "left top",
- at: "right top",
- of: event.pageX > 0 ? event : this
- }).focus();
- $(document).one("click", function() {
- menu.menu("closeAll").menu("widget").hide();
- })
- }).next().keydown(function(event) {
- var menu = $(this).data("menu");
- if (menu.widget().is(":hidden"))
- return;
- event.stopPropagation();
- switch (event.keyCode) {
- case $.ui.keyCode.TAB:
- menu.closeAll();
- menu.widget().hide();
- $(this).prev().focus()
- break;
- case $.ui.keyCode.ESCAPE:
- menu.closeAll();
- menu.widget().hide();
- $(this).prev().focus()
- break;
- default:
-
- }
- });
- });
- </script>
- <style>
- body { font-size:62.5%; }
- .ui-menu { width: 200px; position: absolute; }
- #menu3 { height: 200px; overflow: auto; }
- </style>
-</head>
-<body>
-
-<button id="1">Show context menu 1</button>
-<ul id="menu1">
- <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>
-
-<button id="2">Show context menu 2</button>
-<ul id="menu2">
- <li>
- <a id="a1" href="#">Amsterdam</a>
- <ul>
- <li><a id="b1" href="#">Aberdeen</a></li>
- <li><a id="b2" href="#">Ada</a></li>
- <li>
- <a href="#">Adamsville</a>
- <ul>
- <li><a href="#">Anaheim</a></li>
- <li>
- <a href="#">Cologne</a>
- <ul>
- <li><a href="#">Mberdeen</a></li>
- <li><a href="#">Mda</a></li>
- <li><a href="#">Mdamsville</a></li>
- <li><a href="#">Mddyston</a></li>
- <li><a href="#">Mmesville</a></li>
- </ul>
- </li>
- <li><a href="#">Frankfurt</a></li>
- </ul>
- </li>
- <li><a href="#">Addyston</a></li>
- <li><a href="#">Amesville</a></li>
- </ul>
- </li>
- <li><a id="a2" href="#">Anaheim</a></li>
- <li><a id="a3" href="#">Cologne</a></li>
- <li><a href="#">Frankfurt</a></li>
- <li>
- <a href="#">Magdeburg</a>
- <ul>
- <li><a href="#">Mberdeen</a></li>
- <li><a href="#">Mda</a></li>
- <li><a href="#">Mdamsville</a></li>
- <li><a href="#">Mddyston</a></li>
- <li><a href="#">Mmesville</a></li>
- </ul>
- </li>
- <li><a href="#">Munich</a></li>
- <li><a href="#">Utrecht</a></li>
- <li><a href="#">Zurich</a></li>
-</ul>
-
-
-<div class="ui-widget" style="margin-top:2em; font-family:Arial">
- Log:
- <div id="log" style="height: 400px; width: 300px; overflow: auto;" class="ui-widget-content"></div>
-</div>
-
-<button id="3">Show context menu 3</button>
-<ul id="menu3">
- <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>
- <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>
-</ul>
-
-</body>
-</html>
diff --git a/tests/visual/menu/popup.html b/tests/visual/menu/popup.html
deleted file mode 100644
index 2a712b00a..000000000
--- a/tests/visual/menu/popup.html
+++ /dev/null
@@ -1,176 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
- <title>Visual Test for Popup Utility</title>
- <link rel="stylesheet" href="../visual.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.5.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.button.js"></script>
- <script type="text/javascript" src="../../../ui/jquery.ui.menu.js"></script>
- <script type="text/javascript" src="popup.js"></script>
- <!--
- <script type="text/javascript" src="http://jqueryui.com/themeroller/themeswitchertool/"></script>
- -->
- <script type="text/javascript">
- $(function() {
- $.fn.themeswitcher && $('<div/>').css({
- position: "absolute",
- right: 10,
- top: 10
- }).appendTo(document.body).themeswitcher();
-
- var selected = {
- select: function( event, ui ) {
- $( "<div/>" ).text( "Selected: " + ui.item.text() ).appendTo( "#log" );
- $(this).popup("close");
- }
- };
-
- $("#members-popup").popup();
-
- $("#button1").button();
- $("#menu1").menu(selected).popup();
-
- $( "#rerun" )
- .button()
- .click(function() {
- alert( "Running the last action" );
- })
- .next()
- .button({
- text: false,
- icons: {
- primary: "ui-icon-triangle-1-s"
- }
- })
- .parent()
- .buttonset()
- .next()
- .menu(selected)
- .popup({
- trigger: $("#select")
- });
-
- $("td:has(.menubar)").clone().appendTo("tbody tr:not(:first)");
- $("table .menubar > ul").menu(selected).popup().prev().button();
- });
- </script>
- <style type="text/css">
- body { font-size:62.5%; }
-
- .ui-popup { position: absolute; z-index: 5000; }
- .ui-menu { width: 200px; }
-
- table {
- border-collapse: collapse;
- }
- th, td {
- padding: 0.5em;
- border: 1px solid black;
- }
-
- #members-popup {
- width: 200px; height: 150px; border: 1px solid gray; border-radius: 5px;
- box-shadow: 3px 3px 5px -1px rgba(0, 0, 0, 0.5);
- background: lightgray; background-image: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#ddd));
- font-size: 120%; text-align: center; line-height: 150px; outline: none;
- }
- </style>
-</head>
-<body>
-
-<div>
- <a href="#members-popup">Project members</a>
- <div id="members-popup" tabIndex="0">
- some form controls in here
- </div>
-</div>
-
-<button id="button1">Show context menu 1</button>
-<ul id="menu1">
- <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>
- <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>
-
-<table id="movies" class="ui-widget">
- <thead>
- <tr>
- <th data-field="Name" class="ui-widget-header">Name</th>
- <th data-field="ReleaseYear" class="ui-widget-header">Release Year</th>
- <th data-field="AverageRating" class="ui-widget-header">Average Rating</th>
- <th class="ui-widget-header"></th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td class="ui-widget-content">Red Hot Chili Peppers: Funky Monks</td>
- <td class="ui-widget-content">1993</td>
- <td class="ui-widget-content">3.6</td>
- <td class="ui-widget-content">
- <div class="menubar">
- <a href="#">Options</a>
- <ul>
- <li><a href="#">Order...</a></li>
- <li class="ui-state-disabled">Write a Review...</li>
- <li><a href="#">Find Similar Movies...</a></li>
- <li>
- <a href="#">Rate</a>
- <ul>
- <li><a href="#">5 stars</a></li>
- <li><a href="#">4 stars</a></li>
- <li><a href="#">3 stars</a></li>
- <li><a href="#">2 stars</a></li>
- <li><a href="#">1 stars</a></li>
- </ul>
- </li>
- </ul>
- </div>
- </td>
- </tr>
- <tr>
- <td class="ui-widget-content">Rod Stewart: Storyteller 1984-1991</td>
- <td class="ui-widget-content">1991</td>
- <td class="ui-widget-content">3.1</td>
- </tr>
- <tr>
- <td class="ui-widget-content">Stevie Ray Vaughan and Double Trouble: Live at the El Mocambo 1983</td>
- <td class="ui-widget-content">1991</td>
- <td class="ui-widget-content">3.9</td>
- </tr>
- <tr>
- <td class="ui-widget-content">Spike and Mike's Sick &amp; Twisted Festival of Animation</td>
- <td class="ui-widget-content">1997</td>
- <td class="ui-widget-content">2.6</td>
- </tr>
- </tbody>
-</table>
-
-<div class="ui-widget" style="margin-top:2em; font-family:Arial">
- Log:
- <div id="log" style="height: 400px; width: 300px; overflow: auto;" class="ui-widget-content"></div>
-</div>
-
-</body>
-</html>
diff --git a/tests/visual/menu/menubar.js b/ui/jquery.ui.menubar.js
index b9abacb9b..2879d079c 100644
--- a/tests/visual/menu/menubar.js
+++ b/ui/jquery.ui.menubar.js
@@ -1,7 +1,17 @@
/*
- * jQuery UI menubar
- *
- * TODO move to jquery.ui.menubar.js
+ * jQuery UI Menubar @VERSION
+ *
+ * Copyright 2011, AUTHORS.txt (http://jqueryui.com/about)
+ * Dual licensed under the MIT or GPL Version 2 licenses.
+ * http://jquery.org/license
+ *
+ * http://docs.jquery.com/UI/Menubar
+ *
+ * Depends:
+ * jquery.ui.core.js
+ * jquery.ui.widget.js
+ * jquery.ui.position.js
+ * jquery.ui.menu.js
*/
(function( $ ) {
diff --git a/tests/visual/menu/popup.js b/ui/jquery.ui.popup.js
index 97f12c053..10361a35c 100644
--- a/tests/visual/menu/popup.js
+++ b/ui/jquery.ui.popup.js
@@ -1,5 +1,16 @@
/*
- * jQuery UI popup utility
+ * jQuery UI Popup @VERSION
+ *
+ * Copyright 2011, AUTHORS.txt (http://jqueryui.com/about)
+ * Dual licensed under the MIT or GPL Version 2 licenses.
+ * http://jquery.org/license
+ *
+ * http://docs.jquery.com/UI/Popup
+ *
+ * Depends:
+ * jquery.ui.core.js
+ * jquery.ui.widget.js
+ * jquery.ui.position.js
*/
(function($) {
@@ -39,12 +50,20 @@ $.widget( "ui.popup", {
this._bind(this.options.trigger, {
keydown: function( event ) {
// prevent space-to-open to scroll the page, only hapens for anchor ui.button
- if ($( event.currentTarget ).is( "a:ui-button" ) && event.keyCode == $.ui.keyCode.SPACE) {
+ if ( this.options.trigger.is( "a:ui-button" ) && event.keyCode == $.ui.keyCode.SPACE) {
event.preventDefault()
}
- // TODO handle keydown to open popup? only when not handled by ui.button
- //if (event.keyCode == $.ui.keyCode.SPACE) {
- //}
+ // TODO handle SPACE to open popup? only when not handled by ui.button
+ if ( event.keyCode == $.ui.keyCode.SPACE && this.options.trigger.is("a:not(:ui-button)") ) {
+ this.options.trigger.trigger( "click", event );
+ }
+ // translate keydown to click
+ // opens popup and let's tooltip hide itself
+ if ( event.keyCode == $.ui.keyCode.DOWN ) {
+ // prevent scrolling
+ event.preventDefault();
+ this.options.trigger.trigger( "click", event );
+ }
},
click: function( event ) {
event.preventDefault();
@@ -61,6 +80,7 @@ $.widget( "ui.popup", {
});
this._bind(this.element, {
+ // TODO use focusout so that element itself doesn't need to be focussable
blur: function( event ) {
var that = this;
// use a timer to allow click to clear it and letting that
@@ -74,9 +94,11 @@ $.widget( "ui.popup", {
this._bind({
// TODO only triggerd on element if it can receive focus
// bind to document instead?
+ // either element itself or a child should be focusable
keyup: function( event ) {
if (event.keyCode == $.ui.keyCode.ESCAPE && this.element.is( ":visible" )) {
this.close( event );
+ // TODO move this to close()? would allow menu.select to call popup.close, and get focus back to trigger
this.options.trigger.focus();
}
}
@@ -120,6 +142,7 @@ $.widget( "ui.popup", {
.attr( "aria-hidden", false )
.attr( "aria-expanded", true )
.position( position )
+ // TODO find a focussable child, otherwise put focus on element, add tabIndex=0 if not focussable
.focus();
if (this.element.is(":ui-menu")) {
generated by cgit v1.2.3 (git 2.39.1) at 2025-05-12 15:46:12 +0000