Popup and Menubar demos

author: Jörn Zaefferer <joern.zaefferer@gmail.com> 2011-05-08 20:41:21 +0200
committer: Jörn Zaefferer <joern.zaefferer@gmail.com> 2011-05-08 20:41:21 +0200
commit: e6d1ab7bf40e7ecaaaea0d53407dc98a416cc054 (patch)
tree: 6c4f5f12864949eab4aa176cccb3411942b3c81a /tests/visual/menu
parent: 24c0d9195a3ae84bf6fe4698926fafafa55b2bdf (diff)
download: jquery-ui-e6d1ab7bf40e7ecaaaea0d53407dc98a416cc054.tar.gz
jquery-ui-e6d1ab7bf40e7ecaaaea0d53407dc98a416cc054.zip
3 files changed, 0 insertions, 599 deletions
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/menubar.html b/tests/visual/menu/menubar.html
deleted file mode 100644
index 3d7a3e59c..000000000
--- a/tests/visual/menu/menubar.html
+++ /dev/null
@@ -1,232 +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.button.js"></script>
-	<script type="text/javascript" src="../../../ui/jquery.ui.menu.js"></script>
-	<script type="text/javascript" src="../../../ui/jquery.ui.menubar.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();
-		
-		$("td:has(.menubar)").clone().appendTo("tbody tr:not(:first)");
-		
-		$("#bar1, .menubar").menubar({
-			select: function(event, ui) {
-				$("<div/>").text("Selected: " + ui.item.text()).appendTo("#log");
-			}
-		});
-		
-		$(".menubar-icons").menubar({
-			menuIcon: true,
-			buttons: true,
-			select: function(event, ui) {
-				$("<div/>").text("Selected: " + ui.item.text()).appendTo("#log");
-			}
-		});
-	});
-	</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; }
-		.ui-menu li.ui-state-disabled {
-			font-weight: bold;
-			padding: .0em .4em;
-			margin: .4em 0 .2em;
-			line-height: 1.5;
-		}
-		
-		/* menubar styles */
-		.ui-menubar .ui-button { float: left; font-weight: normal; border-top-width: 0 !important; border-bottom-width: 0 !important; margin: 0; outline: none; }
-		.ui-menubar .ui-menubar-link { border-right: 1px dashed transparent; border-left: 1px dashed transparent; }
-		
-		.ui-menubar {
-			list-style: none;
-			margin: 0;
-			padding-left: 0;	
-		}
-		
-		.ui-menubar-item {
-			float: left;  		
-		}
-		
-		table {
-			border-collapse: collapse;
-		}
-		th, td {
-			padding: 0.5em;
-			border: 1px solid black;
-		}
- 	</style>
-</head>
-<body>
-
-<ul id="bar1" class="menubar">
-	<li>
-		<a href="#">File</a>
-		<ul>
-			<li><a href="#">Open...</a></li>
-			<li class="ui-state-disabled">Open recent...</li>
-			<li><a href="#">Save</a></li>
-			<li><a href="#">Save as...</a></li>
-			<li><a href="#">Close</a></li>
-			<li><a href="#">Quit</a></li>
-		</ul>
-	</li>
-	<li>
-		<a href="#">Edit</a>
-		<ul>
-			<li><a href="#">Copy</a></li>
-			<li><a href="#">Cut</a></li>
-			<li class="ui-state-disabled">Paste</li>
-		</ul>
-	</li>
-	<li>
-		<a href="#">View</a>
-		<ul>
-			<li><a href="#">Fullscreen</a></li>
-			<li><a href="#">Fit into view</a></li>
-			<li>
-				<a href="#">Encoding</a>
-				<ul>
-					<li><a href="#">Auto-detect</a></li>
-					<li><a href="#">UTF-8</a></li>
-					<li>
-					  <a href="#">UTF-16</a>
-				      <ul>
-				         <li><a href="#">Option 1</a></li>
-				         <li><a href="#">Option 2</a></li>
-				         <li><a href="#">Option 3</a></li>
-				         <li><a href="#">Option 4</a></li>
-				      </ul>
-				   </li>
-				</ul>
-			</li>
-			<li><a href="#">Customize...</a></li>
-		</ul>
-	</li>
-</ul>
-
-<ul id="bar2" class="menubar-icons">
-	<li>
-		<a href="#">File</a>
-		<ul>
-			<li><a href="#">Open...</a></li>
-			<li class="ui-state-disabled">Open recent...</li>
-			<li><a href="#">Save</a></li>
-			<li><a href="#">Save as...</a></li>
-			<li><a href="#">Close</a></li>
-			<li><a href="#">Quit</a></li>
-		</ul>
-	</li>
-	<li>
-		<a href="#">Edit</a>
-		<ul>
-			<li><a href="#">Copy</a></li>
-			<li><a href="#">Cut</a></li>
-			<li class="ui-state-disabled">Paste</li>
-		</ul>
-	</li>
-	<li>
-		<a href="#">View</a>
-		<ul>
-			<li><a href="#">Fullscreen</a></li>
-			<li><a href="#">Fit into view</a></li>
-			<li>
-				<a href="#">Encoding</a>
-				<ul>
-					<li><a href="#">Auto-detect</a></li>
-					<li><a href="#">UTF-8</a></li>
-					<li>
-					  <a href="#">UTF-16</a>
-				      <ul>
-				         <li><a href="#">Option 1</a></li>
-				         <li><a href="#">Option 2</a></li>
-				         <li><a href="#">Option 3</a></li>
-				         <li><a href="#">Option 4</a></li>
-				      </ul>
-				   </li>
-				</ul>
-			</li>
-			<li><a href="#">Customize...</a></li>
-		</ul>
-	</li>
-</ul>
-
-<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">
-				<ul class="menubar">
-					<li>
-						<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>
-					</li>
-				</ul>
-			</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/popup.html b/tests/visual/menu/popup.html
deleted file mode 100644
index de27208b4..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="../../../ui/jquery.ui.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>
author	Jörn Zaefferer <joern.zaefferer@gmail.com>	2011-05-08 20:41:21 +0200
committer	Jörn Zaefferer <joern.zaefferer@gmail.com>	2011-05-08 20:41:21 +0200
commit	e6d1ab7bf40e7ecaaaea0d53407dc98a416cc054 (patch)
tree	6c4f5f12864949eab4aa176cccb3411942b3c81a /tests/visual/menu
parent	24c0d9195a3ae84bf6fe4698926fafafa55b2bdf (diff)
download	jquery-ui-e6d1ab7bf40e7ecaaaea0d53407dc98a416cc054.tar.gz jquery-ui-e6d1ab7bf40e7ecaaaea0d53407dc98a416cc054.zip