new jq layout

author: Leif Johansson <leifj@sunet.se> 2011-11-25 21:18:19 +0100
committer: Leif Johansson <leifj@sunet.se> 2011-11-25 21:18:19 +0100
commit: 3909e6d89e01e4cd8777377c63037896bb95aa2f (patch)
tree: 59679df287c2bee55087fb5afb8d42e7f93a44fb /src/main/webapp/jquery-ui-1.9pre/tests/visual/menu
parent: e5f94e9be5017f627c1ccd8c6306c5cc2e200432 (diff)
3 files changed, 616 insertions, 0 deletions
diff --git a/src/main/webapp/jquery-ui-1.9pre/tests/visual/menu/drilldown.html b/src/main/webapp/jquery-ui-1.9pre/tests/visual/menu/drilldown.html
new file mode 100644
index 0000000..a2ae9e8
--- /dev/null
+++ b/src/main/webapp/jquery-ui-1.9pre/tests/visual/menu/drilldown.html
@@ -0,0 +1,266 @@
+<!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.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.button.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();
+		
+		$.widget("ui.drilldown", {
+			_init: function() {
+				var self = this;
+				this.active = this.element.find(">ul").attr("tabindex", 0);
+				
+				// hide submenus and create indicator icons
+				this.element.find("ul").hide().prev("a").prepend('<span class="ui-icon ui-icon-carat-1-e"></span>').end().filter(":first").show();	
+				
+				this.element.find("ul").menu({
+					// disable built-in key handling
+					input: $(),
+					focus: function(event, ui) {
+						self.activeItem = ui.item;
+					},
+					select: function(event, ui) {
+						if (this != self.active[0]) {
+							return;
+						}
+						var nested = $(">ul", ui.item);
+						if (nested.length) {
+							self._open(nested);
+						} else {
+							self.element.find("h3").text(ui.item.text());
+							self.options.select.apply(this, arguments);
+						}
+					}
+				});
+				
+				this.back = this.element.children(":last").button({
+					icons: {
+						primary: "ui-icon-carat-1-w"
+					}
+				}).click(function() {
+					self.up();
+					return false;
+				}).hide();
+			},
+			
+			_open: function(submenu) {
+				this.active = submenu.show().css({
+					opacity: 0
+				}).position({
+					my: "left top",
+					at: "right top",
+					of: this.widget()
+				}).position({
+					my: "left top",
+					at: "left top",
+					of: this.widget(),
+					using: function(to) {
+						$(this).animate({
+							left: to.left,
+							top: to.top,
+							opacity: 1
+						});
+					}
+				});
+				this.back.show();
+			},
+			
+			up: function() {
+				if (this.active.parent()[0] == this.element[0]) {
+					return;
+				}
+				this.active.position({
+					my: "left top",
+					at: "right top",
+					of: this.widget(),
+					using: function(to) {
+						$(this).animate({
+							left: to.left,
+							top: to.top,
+							opacity: 0
+						});
+					}
+				});
+				this.active = this.active.parent().parent().show();
+				this.activeItem = this.active.data("menu").active;
+				if (!this.active.parent().parent().is(":ui-menu")) {
+					this.back.hide();
+				}
+			},
+			
+			down: function(event) {
+				var nested = this.activeItem.find(">ul");
+				if (nested.length) {
+					this._open(nested);
+					nested.menu("focus", event, nested.children(":first"))
+				}
+			},
+			
+			show: function() {
+			},
+			
+			hide: function() {
+			},
+			
+			widget: function() {
+				return this.element.find(">ul");
+			}
+		});
+		
+		var drilldown = $("#drilldown").drilldown({
+			select: function(event, ui) {
+				$("#log").append("<div>Selected " + ui.item.text() + "</div>");
+			}
+		});
+		
+		drilldown.drilldown("widget").keydown(function(event) {
+			var menu = drilldown.data("drilldown").active.data("menu");
+			if (menu.widget().is(":hidden"))
+				return;
+			event.stopPropagation();
+			switch (event.keyCode) {
+			case $.ui.keyCode.PAGE_UP:
+				menu.previousPage();
+				break;
+			case $.ui.keyCode.PAGE_DOWN:
+				menu.nextPage();
+				break;
+			case $.ui.keyCode.UP:
+				menu.previous();
+				break;
+			case $.ui.keyCode.LEFT:
+				drilldown.drilldown("up");
+				break;
+			case $.ui.keyCode.RIGHT:
+				drilldown.drilldown("down");
+				break;
+			case $.ui.keyCode.DOWN:
+				menu.next();
+				event.preventDefault();
+				break;
+			case $.ui.keyCode.ENTER:
+			case $.ui.keyCode.TAB:
+				menu.select();
+				drilldown.drilldown("hide");
+				event.preventDefault();
+				break;
+			case $.ui.keyCode.ESCAPE:
+				drilldown.drilldown("hide", event);
+				break;
+			default:
+				clearTimeout(menu.filterTimer);
+				var prev = menu.previousFilter || "";
+				var character = String.fromCharCode(event.keyCode);
+				var skip = false;
+				if (character == prev) {
+					skip = true;
+				} else {
+					character = prev + character;
+				}
+				
+				var match = menu.widget().children("li").filter(function() {
+					return new RegExp("^" + character, "i").test($("a", this).text());
+				});
+				var match = skip && match.index(menu.active.next()) != -1 ? match.next() : match;
+				if (!match.length) {
+					character = String.fromCharCode(event.keyCode);
+					match = menu.widget().children("li").filter(function() {
+						return new RegExp("^" + character, "i").test($(this).text());
+					});
+				}
+				if (match.length) {
+					menu.focus(event, match);
+					if (match.length > 1) {
+						menu.previousFilter = character;
+						menu.filterTimer = setTimeout(function() {
+							delete menu.previousFilter;
+						}, 1000);
+					} else {
+						delete menu.previousFilter;
+					}
+				} else {
+					delete menu.previousFilter;
+				}
+			}
+		});
+	});
+	</script>
+	<style>
+		body { font-size:62.5%; }
+		.ui-menu { width: 200px; height: 170px; }
+		.ui-menu .ui-menu { position: absolute; }
+		.ui-menu .ui-icon { float: right; }
+	</style>
+</head>
+<body>
+	
+<div id="drilldown">
+	<h3>Make a selection...</h3>
+	<ul>
+		<li>
+			<a href="#">Amsterdam</a>
+			<ul>
+				<li><a href="#">Aberdeen</a></li>
+				<li><a 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 href="#">Anaheim</a></li>
+		<li><a 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>
+	<a href="#">Go back</a>
+</div>
+
+<div class="ui-widget" style="clear: left; 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/src/main/webapp/jquery-ui-1.9pre/tests/visual/menu/menu.html b/src/main/webapp/jquery-ui-1.9pre/tests/visual/menu/menu.html
new file mode 100644
index 0000000..50837f4
--- /dev/null
+++ b/src/main/webapp/jquery-ui-1.9pre/tests/visual/menu/menu.html
@@ -0,0 +1,283 @@
+<!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.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() {
+		$.fn.themeswitcher && $('<div/>').css({
+			position: "absolute",
+			right: 10,
+			top: 10
+		}).appendTo(document.body).themeswitcher();
+
+		function create() {
+			menus.menu({
+				select: function(event, ui) {
+					$("<div/>").text("Selected: " + ui.item.text()).appendTo("#log");
+				}
+			});
+
+			$("#menu5").menu({
+				select: function(event, ui) {
+					$("<div/>").text("Selected: " + ui.item.text()).appendTo("#log");
+				},
+				items: "div"
+			});
+
+			$("#menu6").menu({
+				select: function(event, ui) {
+					$("<div/>").text("Selected: " + ui.item.text()).appendTo("#log");
+				},
+				items: ".menuElement"
+			});
+		}
+		
+		var menus = $("#menu1, #menu2, #menu3, .menu4");
+		create();
+
+		$("#toggle-destroy").toggle(function() {
+			menus.menu("destroy");
+		}, create);
+		$("#toggle-disable").toggle(function() {
+			menus.menu("disable");
+		}, function() {
+			menus.menu("enable");
+		});
+	});
+	</script>
+	<style>
+		body { font-size:62.5%; }
+		.ui-menu { width: 200px; margin-bottom: 2em; }
+		.menu4 { height: 200px; overflow-y: auto; overflow-x: hidden; }
+		.address-item { border-bottom: 1px solid #999; }
+		.address-header { display: block; margin-bottom: .2em; font-weight: bold; }
+		.address-content { display: block; margin-bottom: .2em; padding-left: 10px; }
+	</style>
+</head>
+<body>
+
+<ul id="menu1">
+	<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></li>
+	<li><a href="#">Saarland</a></li>
+	<li><a href="#">Salzburg</a></li>
+</ul>
+
+<ul id="menu2">
+	<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="#">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="#">Perch</a></li>
+		</ul>
+	</li>
+</ul>
+
+<ul id="menu3">
+	<li><a href="#"><span class="ui-icon ui-icon-print"></span>Aberdeen</a></li>
+	<li><a href="#"><span class="ui-icon ui-icon-scissors"></span>Ada</a></li>
+	<li><a href="#">Adamsville</a></li>
+	<li><a href="#"><span class="ui-icon ui-icon-wrench"></span>Addyston</a></li>
+	<li>
+		<a href="#">Delphi</a>
+		<ul>
+			<li><a href="#">Ada</a></li>
+			<li><a href="#"><span class="ui-icon ui-icon-wrench"></span>Saarland</a></li>
+			<li><a href="#">Salzburg</a></li>
+		</ul>
+	</li>
+	<li><a href="#">Saarland</a></li>
+	<li>
+		<a href="#"><span class="ui-icon ui-icon-print"></span>Salzburg</a>
+		<ul>
+			<li>
+				<a href="#"><span class="ui-icon ui-icon-wrench"></span>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="#">Delphi</a>
+				<ul>
+					<li><a href="#"><span class="ui-icon ui-icon-wrench"></span>Ada</a></li>
+					<li><a href="#"><span class="ui-icon ui-icon-wrench"></span>Saarland</a></li>
+					<li><a href="#"><span class="ui-icon ui-icon-wrench"></span>Salzburg</a></li>
+				</ul>
+			</li>
+			<li><a href="#">Perch</a></li>
+		</ul>
+	</li>
+</ul>
+
+<ul class="menu4">
+	<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>
+
+<div id="menu5">
+	<blockquote><a href="#">Aberdeen</a></blockquote>
+	<blockquote><a href="#">Ada</a></blockquote>
+	<blockquote><a href="#">Adamsville</a></blockquote>
+	<blockquote><a href="#">Addyston</a></blockquote>
+	<blockquote>
+		<a href="#">Delphi</a>
+		<div>
+			<blockquote><a href="#">Ada</a></blockquote>
+			<blockquote><a href="#">Saarland</a></blockquote>
+			<blockquote><a href="#">Salzburg</a></blockquote>
+		</div>
+	</blockquote>
+	<blockquote><a href="#">Saarland</a></blockquote>
+	<blockquote>
+		<a href="#">Salzburg</a>
+		<div>
+			<blockquote>
+				<a href="#">Delphi</a>
+				<div>
+					<blockquote><a href="#">Ada</a></blockquote>
+					<blockquote><a href="#">Saarland</a></blockquote>
+					<blockquote><a href="#">Salzburg</a></blockquote>
+				</div>
+			</blockquote>
+			<blockquote>
+				<a href="#">Delphi</a>
+				<div>
+					<blockquote><a href="#">Ada</a></blockquote>
+					<blockquote><a href="#">Saarland</a></blockquote>
+					<blockquote><a href="#">Salzburg</a></blockquote>
+				</div>
+			</blockquote>
+			<blockquote><a href="#">Perch</a></blockquote>
+		</div>
+	</blockquote>
+</div>
+
+<div class="menuElement" id="menu6">
+	<div class="address-item">
+		<a href="#">
+			<span class="address-header">John Doe</span>
+			<span class="address-content">78 West Main St Apt 3A</span>
+			<span class="address-content">Bloomsburg, PA 12345</span>
+		</a>
+	</div>
+	<div class="address-item">
+		<a href="#">
+			<span class="address-header">Jane Doe</span>
+			<span class="address-content">78 West Main St Apt 3A</span>
+			<span class="address-content">Bloomsburg, PA 12345</span>
+		</a>
+	</div>
+	<div class="address-item">
+		<a href="#">
+			<span class="address-header">James Doe</span>
+			<span class="address-content">78 West Main St Apt 3A</span>
+			<span class="address-content">Bloomsburg, PA 12345</span>
+		</a>
+	</div>
+	<div class="address-item">
+		<a href="#">
+			<span class="address-header">Jenny Doe</span>
+			<span class="address-content">78 West Main St Apt 3A</span>
+			<span class="address-content">Bloomsburg, PA 12345</span>
+		</a>
+	</div>
+	<div class="address-item">
+		<a href="#">
+			<span class="address-header">John Doe</span>
+			<span class="address-content">78 West Main St Apt 3A</span>
+			<span class="address-content">Bloomsburg, PA 12345</span>
+		</a>
+		<div class="menuElement">
+			<div><a href="#">Ada</a></div>
+			<div><a href="#">Saarland</a></div>
+			<div><a href="#">Salzburg</a></div>
+		</div>
+	</div>
+</div>
+
+<div class="ui-widget" style="clear: left; 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="toggle-disable">Disable / Enable</button>
+<button id="toggle-destroy">Destroy / Create</button>
+
+</body>
+</html>
+\ No newline at end of file
diff --git a/src/main/webapp/jquery-ui-1.9pre/tests/visual/menu/tablemenu.html b/src/main/webapp/jquery-ui-1.9pre/tests/visual/menu/tablemenu.html
new file mode 100644
index 0000000..bce64bf
--- /dev/null
+++ b/src/main/webapp/jquery-ui-1.9pre/tests/visual/menu/tablemenu.html
@@ -0,0 +1,67 @@
+<!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.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.menu.js"></script>
+	<script type="text/javascript">
+	$(function() {
+		var table = $("table");
+		var colgroup = table.find("colgroup");
+		var menu = $("<ul>").insertAfter(table);
+		var thead = table.find("thead");
+		thead.children("tr").addClass("ui-state-default");
+		var rows = table.find("tbody tr");
+		$("<table>").width("100%").append(colgroup.clone()).append(thead).wrap("<li>").parent().appendTo(menu);
+		rows.each(function() {
+			$("<table>").width("100%").append(colgroup.clone()).append(this).wrap("<li><a></a></li>").parent().parent().appendTo(menu);
+		});
+		
+		menu.menu({
+			select: function(event, ui) {
+				$("<div/>").text("Selected: " + ui.item.text()).appendTo("#log");
+			}
+		});
+	});
+	</script>
+	<style>
+		body { font-size:62.5%; }
+		.ui-menu { width: 200px; }
+	</style>
+</head>
+<body>
+	
+<table>
+	<colgroup><col style="width: 50%"><col style="width: 50%"></colgroup>
+	<thead>
+		<tr>
+			<th>Firstname</th>
+			<th>Lastname</th>
+		</tr>
+	</thead>
+	<tbody>
+		<tr>
+			<td>Scott</td>
+			<td>Gonzo</td>
+		</tr>
+		<tr>
+			<td>Richy</td>
+			<td>Worth</td>
+		</tr>
+	</tbody>
+</table>
+	
+<div class="ui-widget" style="clear: left; 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="toggle-disable">Disable / Enable</button>
+<button id="toggle-destroy">Destroy / Create</button>
+
+</body>
+</html>
author	Leif Johansson <leifj@sunet.se>	2011-11-25 21:18:19 +0100
committer	Leif Johansson <leifj@sunet.se>	2011-11-25 21:18:19 +0100
commit	3909e6d89e01e4cd8777377c63037896bb95aa2f (patch)
tree	59679df287c2bee55087fb5afb8d42e7f93a44fb /src/main/webapp/jquery-ui-1.9pre/tests/visual/menu
parent	e5f94e9be5017f627c1ccd8c6306c5cc2e200432 (diff)