aboutsummaryrefslogtreecommitdiffstats
path: root/tests
diff options
context:
space:
mode:
authorjzaefferer <joern.zaefferer@gmail.com>2011-02-24 15:51:51 +0100
committerjzaefferer <joern.zaefferer@gmail.com>2011-02-24 15:51:51 +0100
commit0ddf677e40a7feaaeefcc44f2a4910923f1bc258 (patch)
tree385812d1fbb9f0e0bafc40457330ec5b6d1d98e7 /tests
parent38cfcfffe92f2ac2572ab7ebc51e860de9312baf (diff)
downloadjquery-ui-0ddf677e40a7feaaeefcc44f2a4910923f1bc258.tar.gz
jquery-ui-0ddf677e40a7feaaeefcc44f2a4910923f1bc258.zip
Menu: Integrated flyoutmenu into menu, and moved flyoutmenu.html
testmenu into contextmenu.html
Diffstat (limited to 'tests')
-rw-r--r--tests/visual/menu/contextmenu.html74
-rw-r--r--tests/visual/menu/flyoutmenu.html127
-rw-r--r--tests/visual/menu/flyoutmenu.js110
-rw-r--r--tests/visual/menu/menu.html12
4 files changed, 79 insertions, 244 deletions
diff --git a/tests/visual/menu/contextmenu.html b/tests/visual/menu/contextmenu.html
index dae366158..c91b4ea1b 100644
--- a/tests/visual/menu/contextmenu.html
+++ b/tests/visual/menu/contextmenu.html
@@ -20,15 +20,28 @@
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) {
- // TODO required to prevent the click handler below from handling this 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",
@@ -36,7 +49,7 @@
of: event.pageX > 0 ? event : this
}).focus();
$(document).one("click", function() {
- menu.hide();
+ menu.menu("closeAll").menu("widget").hide();
})
}).next().keydown(function(event) {
var menu = $(this).data("menu");
@@ -45,10 +58,14 @@
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:
@@ -59,7 +76,7 @@
<style>
body { font-size:62.5%; }
.ui-menu { width: 200px; position: absolute; }
- #menu2 { height: 200px; overflow: auto; }
+ #menu3 { height: 200px; overflow: auto; }
</style>
</head>
<body>
@@ -76,13 +93,60 @@
<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="2">Show context menu 2</button>
-<ul id="menu2">
+<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>
diff --git a/tests/visual/menu/flyoutmenu.html b/tests/visual/menu/flyoutmenu.html
deleted file mode 100644
index 150a20731..000000000
--- a/tests/visual/menu/flyoutmenu.html
+++ /dev/null
@@ -1,127 +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.4.4.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="../../../external/jquery.bgiframe-2.1.2.js"></script>
- <script type="text/javascript" src="flyoutmenu.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 menu = $("#menu");
-
- var button = $("button").click(function(event) {
- // TODO required to prevent the click handler below from handling this event
- event.stopPropagation();
- menu.flyoutmenu("show")
- .focus()
- .position({
- my: "left top",
- at: "right top",
- of: this
- });
- $(document).one("click", function() {
- menu.flyoutmenu("hide");
- });
- });
-
- menu.flyoutmenu({
- /* top-alignment
- position: function(item) {
- return {
- my: "left top",
- at: "right top",
- of: item.parent()
- }
- },
- */
- select: function(event, ui) {
- $("#log").append("<div>Selected " + ui.item.children("a").text() + "(" + ui.item.children("a").attr("id") + ")</div>");
- button.focus();
- }
- }).hide();
-
- // equal height
- //menu.find("ul").height(menu.height());
- });
- </script>
- <style>
- body { font-size:62.5%; }
- .ui-menu { width: 200px; position: absolute; outline: none; }
- .ui-menu .ui-icon { float: right; }
- </style>
-</head>
-<body>
-
-<button>Show context menu</button>
-<br/>
-<select>
- <option>some option with some text</option>
-</select>
-
-<ul id="menu">
- <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>
-
-</body>
-</html>
diff --git a/tests/visual/menu/flyoutmenu.js b/tests/visual/menu/flyoutmenu.js
deleted file mode 100644
index 0564120a2..000000000
--- a/tests/visual/menu/flyoutmenu.js
+++ /dev/null
@@ -1,110 +0,0 @@
-/*
- * jQuery UI flyoutmenu
- *
- * backported from Michael Lang's fork: http://www.nexul.com/prototypes/toolbar/demo.html
- */
-(function($) {
-
-$.widget("ui.flyoutmenu", {
-
- options: {
- position: {
- my: "left top",
- at: "right top"
- }
- },
-
- _create: function() {
- var self = this;
- this.activeItem = this.element.children("li").first();
- // hide submenus and create indicator icons
- this.element.find("ul").addClass("ui-menu-flyout").hide().prev("a").prepend('<span class="ui-icon ui-icon-carat-1-e"></span>');
-
- this.element.find("ul").andSelf().menu({
- select: function(event) {
- self._select(event);
- },
- focus: function(event, ui) {
- self.activeItem = ui.item;
- ui.item.parent().focus();
- ui.item.parent().find("ul").hide();
- var nested = $(">ul", ui.item);
- if (nested.length && event.originalEvent && /^mouse/.test(event.originalEvent.type)) {
- self._open(nested);
- nested.focus();
- }
- }
- }).keydown(function(event) {
- if (self.element.is(":hidden"))
- return;
- switch (event.keyCode) {
- case $.ui.keyCode.LEFT:
- if (self.left(event)) {
- event.stopImmediatePropagation();
- }
- event.preventDefault();
- break;
- case $.ui.keyCode.RIGHT:
- if (self.right(event)) {
- event.stopImmediatePropagation();
- }
- event.preventDefault();
- break;
- case $.ui.keyCode.ESCAPE:
- self.hide();
- break;
- }
- });
- },
-
- _open: function(submenu) {
- // TODO restrict to widget
- //only one menu can have items open at a time.
- $(document).find(".ui-menu-flyout").not(submenu.parents()).hide().data("menu").blur();
-
- var position = $.extend({}, {
- of: this.activeItem
- }, $.type(this.options.position) == "function"
- ? this.options.position(this.activeItem)
- : this.options.position
- );
-
- submenu.show().position(position);
- },
- _select: function(event) {
- event.stopPropagation();
- // TODO make _select cancelable?
- this._trigger( "select", event, { item: this.activeItem } );
- this.hide();
- },
- left: function(event) {
- var newItem = this.activeItem.parents("li").first();
- if (newItem.length) {
- this.activate(event, newItem);
- return true;
- }
- },
- right: function(event) {
- var newItem = this.activeItem.children("ul").children("li").first();
- if (newItem.length) {
- this._open(newItem.parent());
- this.activate(event, newItem);
- return true;
- }
- },
- activate: function(event, item) {
- var parent = item.parent();
- parent.data("menu").focus(event, item);
- this.activeItem = item;
- parent.focus();
- },
- show: function() {
- this.element.show();
- },
- hide: function() {
- this.activeItem = this.element.children("li").first();
- this.element.find("ul").andSelf().menu("blur").hide();
- }
-});
-
-}(jQuery));
diff --git a/tests/visual/menu/menu.html b/tests/visual/menu/menu.html
index 32fb98ea8..b5fdf938b 100644
--- a/tests/visual/menu/menu.html
+++ b/tests/visual/menu/menu.html
@@ -7,6 +7,7 @@
<script type="text/javascript" src="../../../jquery-1.4.4.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() {
@@ -40,7 +41,7 @@
<style>
body { font-size:62.5%; }
.ui-menu { width: 200px; }
- #menu2 { height: 200px; overflow: auto; }
+ #menu3 { height: 200px; overflow: auto; }
</style>
</head>
<body>
@@ -69,7 +70,14 @@
</ul>
</li>
<li><a href="#">Saarland</a></li>
- <li><a href="#">Salzburg</a></li>
+ <li>
+ <a href="#">Salzburg</a>
+ <ul>
+ <li><a href="#">Alliance</a></li>
+ <li><a href="#">Krombach</a></li>
+ <li><a href="#">Perch</a></li>
+ </ul>
+ </li>
</ul>
<ul id="menu3">
generated by cgit v1.2.3 (git 2.39.1) at 2024-12-27 02:16:15 +0000