james-server-dev mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From btell...@apache.org
Subject [39/51] [partial] james-site git commit: New release of the website
Date Wed, 03 May 2017 07:03:53 GMT
http://git-wip-us.apache.org/repos/asf/james-site/blob/38b1b837/content/development-bundle/demos/tabs/default.html
----------------------------------------------------------------------
diff --git a/content/development-bundle/demos/tabs/default.html b/content/development-bundle/demos/tabs/default.html
new file mode 100644
index 0000000..fdcfe64
--- /dev/null
+++ b/content/development-bundle/demos/tabs/default.html
@@ -0,0 +1,42 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>jQuery UI Tabs - Default functionality</title>
+	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
+	<script src="../../jquery-1.8.3.js"></script>
+	<script src="../../ui/jquery.ui.core.js"></script>
+	<script src="../../ui/jquery.ui.widget.js"></script>
+	<script src="../../ui/jquery.ui.tabs.js"></script>
+	<link rel="stylesheet" href="../demos.css">
+	<script>
+	$(function() {
+		$( "#tabs" ).tabs();
+	});
+	</script>
+</head>
+<body>
+
+<div id="tabs">
+	<ul>
+		<li><a href="#tabs-1">Nunc tincidunt</a></li>
+		<li><a href="#tabs-2">Proin dolor</a></li>
+		<li><a href="#tabs-3">Aenean lacinia</a></li>
+	</ul>
+	<div id="tabs-1">
+		<p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>
+	</div>
+	<div id="tabs-2">
+		<p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.</p>
+	</div>
+	<div id="tabs-3">
+		<p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus.</p>
+		<p>Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo vitae neque. Praesent blandit adipiscing velit. Suspendisse potenti. Donec mattis, pede vel pharetra blandit, magna ligula faucibus eros, id euismod lacus dolor eget odio. Nam scelerisque. Donec non libero sed nulla mattis commodo. Ut sagittis. Donec nisi lectus, feugiat porttitor, tempor ac, tempor vitae, pede. Aenean vehicula velit eu tellus interdum rutrum. Maecenas commodo. Pellentesque nec elit. Fusce in lacus. Vivamus a libero vitae lectus hendrerit hendrerit.</p>
+	</div>
+</div>
+
+<div class="demo-description">
+<p>Click tabs to swap between content that is broken into logical sections.</p>
+</div>
+</body>
+</html>

http://git-wip-us.apache.org/repos/asf/james-site/blob/38b1b837/content/development-bundle/demos/tabs/index.html
----------------------------------------------------------------------
diff --git a/content/development-bundle/demos/tabs/index.html b/content/development-bundle/demos/tabs/index.html
new file mode 100644
index 0000000..779dfd2
--- /dev/null
+++ b/content/development-bundle/demos/tabs/index.html
@@ -0,0 +1,20 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>jQuery UI Tabs Demos</title>
+</head>
+<body>
+
+<ul>
+	<li><a href="default.html">Default functionality</a></li>
+	<li><a href="ajax.html">Content via Ajax</a></li>
+	<li><a href="mouseover.html">Open on mouseover</a></li>
+	<li><a href="collapsible.html">Collapse content</a></li>
+	<li><a href="sortable.html">Sortable</a></li>
+	<li><a href="manipulation.html">Simple manipulation</a></li>
+	<li><a href="bottom.html">Tabs below content</a></li>
+</ul>
+
+</body>
+</html>

http://git-wip-us.apache.org/repos/asf/james-site/blob/38b1b837/content/development-bundle/demos/tabs/manipulation.html
----------------------------------------------------------------------
diff --git a/content/development-bundle/demos/tabs/manipulation.html b/content/development-bundle/demos/tabs/manipulation.html
new file mode 100644
index 0000000..78859e5
--- /dev/null
+++ b/content/development-bundle/demos/tabs/manipulation.html
@@ -0,0 +1,114 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>jQuery UI Tabs - Simple manipulation</title>
+	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
+	<script src="../../jquery-1.8.3.js"></script>
+	<script src="../../ui/jquery.ui.position.js"></script>
+	<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.tabs.js"></script>
+	<script src="../../ui/jquery.ui.dialog.js"></script>
+	<link rel="stylesheet" href="../demos.css">
+	<style>
+	#dialog label, #dialog input { display:block; }
+	#dialog label { margin-top: 0.5em; }
+	#dialog input, #dialog textarea { width: 95%; }
+	#tabs { margin-top: 1em; }
+	#tabs li .ui-icon-close { float: left; margin: 0.4em 0.2em 0 0; cursor: pointer; }
+	#add_tab { cursor: pointer; }
+	</style>
+	<script>
+	$(function() {
+		var tabTitle = $( "#tab_title" ),
+			tabContent = $( "#tab_content" ),
+			tabTemplate = "<li><a href='#{href}'>#{label}</a> <span class='ui-icon ui-icon-close'>Remove Tab</span></li>",
+			tabCounter = 2;
+
+		var tabs = $( "#tabs" ).tabs();
+
+		// modal dialog init: custom buttons and a "close" callback reseting the form inside
+		var dialog = $( "#dialog" ).dialog({
+			autoOpen: false,
+			modal: true,
+			buttons: {
+				Add: function() {
+					addTab();
+					$( this ).dialog( "close" );
+				},
+				Cancel: function() {
+					$( this ).dialog( "close" );
+				}
+			},
+			close: function() {
+				form[ 0 ].reset();
+			}
+		});
+
+		// addTab form: calls addTab function on submit and closes the dialog
+		var form = dialog.find( "form" ).submit(function( event ) {
+			addTab();
+			dialog.dialog( "close" );
+			event.preventDefault();
+		});
+
+		// actual addTab function: adds new tab using the input from the form above
+		function addTab() {
+			var label = tabTitle.val() || "Tab " + tabCounter,
+				id = "tabs-" + tabCounter,
+				li = $( tabTemplate.replace( /#\{href\}/g, "#" + id ).replace( /#\{label\}/g, label ) ),
+				tabContentHtml = tabContent.val() || "Tab " + tabCounter + " content.";
+
+			tabs.find( ".ui-tabs-nav" ).append( li );
+			tabs.append( "<div id='" + id + "'><p>" + tabContentHtml + "</p></div>" );
+			tabs.tabs( "refresh" );
+			tabCounter++;
+		}
+
+		// addTab button: just opens the dialog
+		$( "#add_tab" )
+			.button()
+			.click(function() {
+				dialog.dialog( "open" );
+			});
+
+		// close icon: removing the tab on click
+		$( "#tabs span.ui-icon-close" ).live( "click", function() {
+			var panelId = $( this ).closest( "li" ).remove().attr( "aria-controls" );
+			$( "#" + panelId ).remove();
+			tabs.tabs( "refresh" );
+		});
+	});
+	</script>
+</head>
+<body>
+
+<div id="dialog" title="Tab data">
+	<form>
+		<fieldset class="ui-helper-reset">
+			<label for="tab_title">Title</label>
+			<input type="text" name="tab_title" id="tab_title" value="" class="ui-widget-content ui-corner-all" />
+			<label for="tab_content">Content</label>
+			<textarea name="tab_content" id="tab_content" class="ui-widget-content ui-corner-all"></textarea>
+		</fieldset>
+	</form>
+</div>
+
+<button id="add_tab">Add Tab</button>
+
+<div id="tabs">
+	<ul>
+		<li><a href="#tabs-1">Nunc tincidunt</a> <span class="ui-icon ui-icon-close">Remove Tab</span></li>
+	</ul>
+	<div id="tabs-1">
+		<p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>
+	</div>
+</div>
+
+<div class="demo-description">
+<p>Simple tabs adding and removing.</p>
+</div>
+</body>
+</html>

http://git-wip-us.apache.org/repos/asf/james-site/blob/38b1b837/content/development-bundle/demos/tabs/mouseover.html
----------------------------------------------------------------------
diff --git a/content/development-bundle/demos/tabs/mouseover.html b/content/development-bundle/demos/tabs/mouseover.html
new file mode 100644
index 0000000..15481ca
--- /dev/null
+++ b/content/development-bundle/demos/tabs/mouseover.html
@@ -0,0 +1,44 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>jQuery UI Tabs - Open on mouseover</title>
+	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
+	<script src="../../jquery-1.8.3.js"></script>
+	<script src="../../ui/jquery.ui.core.js"></script>
+	<script src="../../ui/jquery.ui.widget.js"></script>
+	<script src="../../ui/jquery.ui.tabs.js"></script>
+	<link rel="stylesheet" href="../demos.css">
+	<script>
+	$(function() {
+		$( "#tabs" ).tabs({
+			event: "mouseover"
+		});
+	});
+	</script>
+</head>
+<body>
+
+<div id="tabs">
+	<ul>
+		<li><a href="#tabs-1">Nunc tincidunt</a></li>
+		<li><a href="#tabs-2">Proin dolor</a></li>
+		<li><a href="#tabs-3">Aenean lacinia</a></li>
+	</ul>
+	<div id="tabs-1">
+		<p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>
+	</div>
+	<div id="tabs-2">
+		<p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.</p>
+	</div>
+	<div id="tabs-3">
+		<p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus.</p>
+		<p>Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo vitae neque. Praesent blandit adipiscing velit. Suspendisse potenti. Donec mattis, pede vel pharetra blandit, magna ligula faucibus eros, id euismod lacus dolor eget odio. Nam scelerisque. Donec non libero sed nulla mattis commodo. Ut sagittis. Donec nisi lectus, feugiat porttitor, tempor ac, tempor vitae, pede. Aenean vehicula velit eu tellus interdum rutrum. Maecenas commodo. Pellentesque nec elit. Fusce in lacus. Vivamus a libero vitae lectus hendrerit hendrerit.</p>
+	</div>
+</div>
+
+<div class="demo-description">
+<p>Toggle sections open/closed on mouseover with the <code>event</code> option. The default value for event is "click."</p>
+</div>
+</body>
+</html>

http://git-wip-us.apache.org/repos/asf/james-site/blob/38b1b837/content/development-bundle/demos/tabs/sortable.html
----------------------------------------------------------------------
diff --git a/content/development-bundle/demos/tabs/sortable.html b/content/development-bundle/demos/tabs/sortable.html
new file mode 100644
index 0000000..1908740
--- /dev/null
+++ b/content/development-bundle/demos/tabs/sortable.html
@@ -0,0 +1,51 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>jQuery UI Tabs - Sortable</title>
+	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
+	<script src="../../jquery-1.8.3.js"></script>
+	<script src="../../ui/jquery.ui.core.js"></script>
+	<script src="../../ui/jquery.ui.widget.js"></script>
+	<script src="../../ui/jquery.ui.mouse.js"></script>
+	<script src="../../ui/jquery.ui.sortable.js"></script>
+	<script src="../../ui/jquery.ui.tabs.js"></script>
+	<link rel="stylesheet" href="../demos.css">
+	<script>
+	$(function() {
+		var tabs = $( "#tabs" ).tabs();
+		tabs.find( ".ui-tabs-nav" ).sortable({
+			axis: "x",
+			stop: function() {
+				tabs.tabs( "refresh" );
+			}
+		});
+	});
+	</script>
+</head>
+<body>
+
+<div id="tabs">
+	<ul>
+		<li><a href="#tabs-1">Nunc tincidunt</a></li>
+		<li><a href="#tabs-2">Proin dolor</a></li>
+		<li><a href="#tabs-3">Aenean lacinia</a></li>
+	</ul>
+	<div id="tabs-1">
+		<p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>
+	</div>
+	<div id="tabs-2">
+		<p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.</p>
+	</div>
+	<div id="tabs-3">
+		<p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus.</p>
+		<p>Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo vitae neque. Praesent blandit adipiscing velit. Suspendisse potenti. Donec mattis, pede vel pharetra blandit, magna ligula faucibus eros, id euismod lacus dolor eget odio. Nam scelerisque. Donec non libero sed nulla mattis commodo. Ut sagittis. Donec nisi lectus, feugiat porttitor, tempor ac, tempor vitae, pede. Aenean vehicula velit eu tellus interdum rutrum. Maecenas commodo. Pellentesque nec elit. Fusce in lacus. Vivamus a libero vitae lectus hendrerit hendrerit.</p>
+	</div>
+</div>
+
+<div class="demo-description">
+<p>Drag the tabs above to re-order them.</p>
+<p>Making tabs sortable is as simple as calling <code>.sortable()</code> on the <code>.ui-tabs-nav</code> element.</p>
+</div>
+</body>
+</html>

http://git-wip-us.apache.org/repos/asf/james-site/blob/38b1b837/content/development-bundle/demos/tabs/vertical.html
----------------------------------------------------------------------
diff --git a/content/development-bundle/demos/tabs/vertical.html b/content/development-bundle/demos/tabs/vertical.html
new file mode 100644
index 0000000..abf4b5c
--- /dev/null
+++ b/content/development-bundle/demos/tabs/vertical.html
@@ -0,0 +1,54 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>jQuery UI Tabs - Vertical Tabs functionality</title>
+	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
+	<script src="../../jquery-1.8.3.js"></script>
+	<script src="../../ui/jquery.ui.core.js"></script>
+	<script src="../../ui/jquery.ui.widget.js"></script>
+	<script src="../../ui/jquery.ui.tabs.js"></script>
+	<link rel="stylesheet" href="../demos.css">
+	<script>
+	$(function() {
+		$( "#tabs" ).tabs().addClass( "ui-tabs-vertical ui-helper-clearfix" );
+		$( "#tabs li" ).removeClass( "ui-corner-top" ).addClass( "ui-corner-left" );
+	});
+	</script>
+	<style>
+	.ui-tabs-vertical { width: 55em; }
+	.ui-tabs-vertical .ui-tabs-nav { padding: .2em .1em .2em .2em; float: left; width: 12em; }
+	.ui-tabs-vertical .ui-tabs-nav li { clear: left; width: 100%; border-bottom-width: 1px !important; border-right-width: 0 !important; margin: 0 -1px .2em 0; }
+	.ui-tabs-vertical .ui-tabs-nav li a { display:block; }
+	.ui-tabs-vertical .ui-tabs-nav li.ui-tabs-active { padding-bottom: 0; padding-right: .1em; border-right-width: 1px; border-right-width: 1px; }
+	.ui-tabs-vertical .ui-tabs-panel { padding: 1em; float: right; width: 40em;}
+	</style>
+</head>
+<body>
+
+<div id="tabs">
+	<ul>
+		<li><a href="#tabs-1">Nunc tincidunt</a></li>
+		<li><a href="#tabs-2">Proin dolor</a></li>
+		<li><a href="#tabs-3">Aenean lacinia</a></li>
+	</ul>
+	<div id="tabs-1">
+		<h2>Content heading 1</h2>
+		<p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>
+	</div>
+	<div id="tabs-2">
+		<h2>Content heading 2</h2>
+		<p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.</p>
+	</div>
+	<div id="tabs-3">
+		<h2>Content heading 3</h2>
+		<p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus.</p>
+		<p>Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo vitae neque. Praesent blandit adipiscing velit. Suspendisse potenti. Donec mattis, pede vel pharetra blandit, magna ligula faucibus eros, id euismod lacus dolor eget odio. Nam scelerisque. Donec non libero sed nulla mattis commodo. Ut sagittis. Donec nisi lectus, feugiat porttitor, tempor ac, tempor vitae, pede. Aenean vehicula velit eu tellus interdum rutrum. Maecenas commodo. Pellentesque nec elit. Fusce in lacus. Vivamus a libero vitae lectus hendrerit hendrerit.</p>
+	</div>
+</div>
+
+<div class="demo-description">
+<p>Click tabs to swap between content that is broken into logical sections.</p>
+</div>
+</body>
+</html>

http://git-wip-us.apache.org/repos/asf/james-site/blob/38b1b837/content/development-bundle/demos/toggle/default.html
----------------------------------------------------------------------
diff --git a/content/development-bundle/demos/toggle/default.html b/content/development-bundle/demos/toggle/default.html
new file mode 100644
index 0000000..907206a
--- /dev/null
+++ b/content/development-bundle/demos/toggle/default.html
@@ -0,0 +1,103 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>jQuery UI Effects - Toggle Demo</title>
+	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
+	<script src="../../jquery-1.8.3.js"></script>
+	<script src="../../ui/jquery.ui.effect.js"></script>
+	<script src="../../ui/jquery.ui.effect-blind.js"></script>
+	<script src="../../ui/jquery.ui.effect-bounce.js"></script>
+	<script src="../../ui/jquery.ui.effect-clip.js"></script>
+	<script src="../../ui/jquery.ui.effect-drop.js"></script>
+	<script src="../../ui/jquery.ui.effect-explode.js"></script>
+	<script src="../../ui/jquery.ui.effect-fold.js"></script>
+	<script src="../../ui/jquery.ui.effect-highlight.js"></script>
+	<script src="../../ui/jquery.ui.effect-pulsate.js"></script>
+	<script src="../../ui/jquery.ui.effect-scale.js"></script>
+	<script src="../../ui/jquery.ui.effect-shake.js"></script>
+	<script src="../../ui/jquery.ui.effect-slide.js"></script>
+	<link rel="stylesheet" href="../demos.css">
+	<style>
+	.toggler {
+		width: 500px;
+		height: 200px;
+	}
+	#button {
+		padding: .5em 1em;
+		text-decoration: none;
+	}
+	#effect {
+		position: relative;
+		width: 240px;
+		height: 135px;
+		padding: 0.4em;
+	}
+	#effect h3 {
+		margin: 0;
+		padding: 0.4em;
+		text-align: center;
+	}
+	</style>
+	<script>
+	$(function() {
+		// run the currently selected effect
+		function runEffect() {
+			// get effect type from
+			var selectedEffect = $( "#effectTypes" ).val();
+
+			// most effect types need no options passed by default
+			var options = {};
+			// some effects have required parameters
+			if ( selectedEffect === "scale" ) {
+				options = { percent: 0 };
+			} else if ( selectedEffect === "size" ) {
+				options = { to: { width: 200, height: 60 } };
+			}
+
+			// run the effect
+			$( "#effect" ).toggle( selectedEffect, options, 500 );
+		};
+
+		// set effect from select menu value
+		$( "#button" ).click(function() {
+			runEffect();
+			return false;
+		});
+	});
+	</script>
+</head>
+<body>
+
+<div class="toggler">
+	<div id="effect" class="ui-widget-content ui-corner-all">
+		<h3 class="ui-widget-header ui-corner-all">Toggle</h3>
+		<p>
+			Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede. Nulla lorem metus, adipiscing ut, luctus sed, hendrerit vitae, mi.
+		</p>
+	</div>
+</div>
+
+<select name="effects" id="effectTypes">
+	<option value="blind">Blind</option>
+	<option value="bounce">Bounce</option>
+	<option value="clip">Clip</option>
+	<option value="drop">Drop</option>
+	<option value="explode">Explode</option>
+	<option value="fold">Fold</option>
+	<option value="highlight">Highlight</option>
+	<option value="puff">Puff</option>
+	<option value="pulsate">Pulsate</option>
+	<option value="scale">Scale</option>
+	<option value="shake">Shake</option>
+	<option value="size">Size</option>
+	<option value="slide">Slide</option>
+</select>
+
+<a href="#" id="button" class="ui-state-default ui-corner-all">Run Effect</a>
+
+<div class="demo-description">
+<p>Click the button above to preview the effect.</p>
+</div>
+</body>
+</html>

http://git-wip-us.apache.org/repos/asf/james-site/blob/38b1b837/content/development-bundle/demos/toggle/index.html
----------------------------------------------------------------------
diff --git a/content/development-bundle/demos/toggle/index.html b/content/development-bundle/demos/toggle/index.html
new file mode 100644
index 0000000..3620fd7
--- /dev/null
+++ b/content/development-bundle/demos/toggle/index.html
@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>jQuery UI Effects Demos</title>
+</head>
+<body>
+
+<ul>
+	<li><a href="default.html">Default functionality</a></li>
+</ul>
+
+</body>
+</html>

http://git-wip-us.apache.org/repos/asf/james-site/blob/38b1b837/content/development-bundle/demos/toggleClass/default.html
----------------------------------------------------------------------
diff --git a/content/development-bundle/demos/toggleClass/default.html b/content/development-bundle/demos/toggleClass/default.html
new file mode 100644
index 0000000..3b74552
--- /dev/null
+++ b/content/development-bundle/demos/toggleClass/default.html
@@ -0,0 +1,39 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>jQuery UI Effects - toggleClass Demo</title>
+	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
+	<script src="../../jquery-1.8.3.js"></script>
+	<script src="../../ui/jquery.ui.effect.js"></script>
+	<link rel="stylesheet" href="../demos.css">
+	<style>
+	.toggler { width: 500px; height: 200px; position: relative; }
+	#button { padding: .5em 1em; text-decoration: none; }
+	#effect {position: relative;  width: 240px;  padding: 1em; letter-spacing: 0; font-size: 1.2em; border: 1px solid #000; background: #eee; color: #333; }
+	.newClass { text-indent: 40px; letter-spacing: .4em; width: 410px; height: 100px; padding: 30px; margin: 10px; font-size: 1.6em; }
+	</style>
+	<script>
+	$(function() {
+		$( "#button" ).click(function() {
+			$( "#effect" ).toggleClass( "newClass", 1000 );
+			return false;
+		});
+	});
+	</script>
+</head>
+<body>
+
+<div class="toggler">
+	<div id="effect" class="newClass ui-corner-all">
+			Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede. 
+	</div>
+</div>
+
+<a href="#" id="button" class="ui-state-default ui-corner-all">Run Effect</a>
+
+<div class="demo-description">
+<p>Click the button above to preview the effect.</p>
+</div>
+</body>
+</html>

http://git-wip-us.apache.org/repos/asf/james-site/blob/38b1b837/content/development-bundle/demos/toggleClass/index.html
----------------------------------------------------------------------
diff --git a/content/development-bundle/demos/toggleClass/index.html b/content/development-bundle/demos/toggleClass/index.html
new file mode 100644
index 0000000..3620fd7
--- /dev/null
+++ b/content/development-bundle/demos/toggleClass/index.html
@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>jQuery UI Effects Demos</title>
+</head>
+<body>
+
+<ul>
+	<li><a href="default.html">Default functionality</a></li>
+</ul>
+
+</body>
+</html>

http://git-wip-us.apache.org/repos/asf/james-site/blob/38b1b837/content/development-bundle/demos/tooltip/ajax/content1.html
----------------------------------------------------------------------
diff --git a/content/development-bundle/demos/tooltip/ajax/content1.html b/content/development-bundle/demos/tooltip/ajax/content1.html
new file mode 100644
index 0000000..a1401b2
--- /dev/null
+++ b/content/development-bundle/demos/tooltip/ajax/content1.html
@@ -0,0 +1 @@
+<p><strong>This content was loaded via ajax.</strong></p>
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/james-site/blob/38b1b837/content/development-bundle/demos/tooltip/ajax/content2.html
----------------------------------------------------------------------
diff --git a/content/development-bundle/demos/tooltip/ajax/content2.html b/content/development-bundle/demos/tooltip/ajax/content2.html
new file mode 100644
index 0000000..f4132d7
--- /dev/null
+++ b/content/development-bundle/demos/tooltip/ajax/content2.html
@@ -0,0 +1 @@
+<p><strong>This other content was loaded via ajax.</strong></p>
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/james-site/blob/38b1b837/content/development-bundle/demos/tooltip/custom-animation.html
----------------------------------------------------------------------
diff --git a/content/development-bundle/demos/tooltip/custom-animation.html b/content/development-bundle/demos/tooltip/custom-animation.html
new file mode 100644
index 0000000..3505a6d
--- /dev/null
+++ b/content/development-bundle/demos/tooltip/custom-animation.html
@@ -0,0 +1,54 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>jQuery UI Tooltip - Custom animation demo</title>
+	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
+	<script src="../../jquery-1.8.3.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.tooltip.js"></script>
+	<script src="../../ui/jquery.ui.effect.js"></script>
+	<script src="../../ui/jquery.ui.effect-explode.js"></script>
+	<link rel="stylesheet" href="../demos.css">
+	<script>
+	$(function() {
+		$( "#show-option" ).tooltip({
+			show: {
+				effect: "slideDown",
+				delay: 250
+			}
+		});
+		$( "#hide-option" ).tooltip({
+			hide: {
+				effect: "explode",
+				delay: 250
+			}
+		});
+		$( "#open-event" ).tooltip({
+			show: null,
+			position: {
+				my: "left top",
+				at: "left bottom"
+			},
+			open: function( event, ui ) {
+				ui.tooltip.animate({ top: ui.tooltip.position().top + 10 }, "fast" );
+			}
+		});
+	});
+	</script>
+</head>
+<body>
+
+<p>There are various ways to customize the animation of a tooltip.</p>
+<p>You can use the <a id="show-option" href="http://jqueryui.com/demos/tooltip/#option-show" title="slide down on show">show</a> and
+<a id="hide-option" href="http://jqueryui.com/demos/tooltip/#option-hide" title="explode on hide">hide</a> options.</p>
+<p>You can also use the <a id="open-event" href="http://jqueryui.com/demos/tooltip/#event-open" title="move down on show">open event</a>.</p>
+
+<div class="demo-description">
+<p>This demo shows how to customize animations using the show and hide options,
+as well as the open event.</p>
+</div>
+</body>
+</html>

http://git-wip-us.apache.org/repos/asf/james-site/blob/38b1b837/content/development-bundle/demos/tooltip/custom-content.html
----------------------------------------------------------------------
diff --git a/content/development-bundle/demos/tooltip/custom-content.html b/content/development-bundle/demos/tooltip/custom-content.html
new file mode 100644
index 0000000..181ca01
--- /dev/null
+++ b/content/development-bundle/demos/tooltip/custom-content.html
@@ -0,0 +1,83 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>jQuery UI Tooltip - Custom content</title>
+	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
+	<script src="../../jquery-1.8.3.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.tooltip.js"></script>
+	<link rel="stylesheet" href="../demos.css">
+	<style>
+	.photo {
+		width: 300px;
+		text-align: center;
+	}
+	.photo .ui-widget-header {
+		margin: 1em 0;
+	}
+	.map {
+		width: 350px;
+		height: 350px;
+	}
+	.ui-tooltip {
+		max-width: 350px;
+	}
+	</style>
+	<script>
+	$(function() {
+		$( document ).tooltip({
+			items: "img, [data-geo], [title]",
+			content: function() {
+				var element = $( this );
+				if ( element.is( "[data-geo]" ) ) {
+					var text = element.text();
+					return "<img class='map' alt='" + text +
+						"' src='http://maps.google.com/maps/api/staticmap?" +
+						"zoom=11&size=350x350&maptype=terrain&sensor=false&center=" +
+						text + "'>";
+				}
+				if ( element.is( "[title]" ) ) {
+					return element.attr( "title" );
+				}
+				if ( element.is( "img" ) ) {
+					return element.attr( "alt" );
+				}
+			}
+		});
+	});
+	</script>
+</head>
+<body>
+
+<div class="ui-widget photo">
+	<div class="ui-widget-header ui-corner-all">
+		<h2>St. Stephen's Cathedral</h2>
+		<h3><a href="http://maps.google.com/maps?q=vienna,+austria&amp;z=11" data-geo>Vienna, Austria</a></h3>
+	</div>
+	<a href="http://en.wikipedia.org/wiki/File:Wien_Stefansdom_DSC02656.JPG">
+		<img src="images/st-stephens.jpg" alt="St. Stephen's Cathedral" class="ui-corner-all">
+	</a>
+</div>
+
+<div class="ui-widget photo">
+	<div class="ui-widget-header ui-corner-all">
+		<h2>Tower Bridge</h2>
+		<h3><a href="http://maps.google.com/maps?q=london,+england&amp;z=11" data-geo>London, England</a></h3>
+	</div>
+	<a href="http://en.wikipedia.org/wiki/File:Tower_bridge_London_Twilight_-_November_2006.jpg">
+		<img src="images/tower-bridge.jpg" alt="Tower Bridge" class="ui-corner-all">
+	</a>
+</div>
+
+<p>All images are part of <a href="http://commons.wikimedia.org/wiki/Main_Page">Wikimedia Commons</a>
+and are licensed under <a href="http://creativecommons.org/licenses/by-sa/3.0/deed.en" title="Creative Commons Attribution-ShareAlike 3.0">CC BY-SA 3.0</a> by the copyright holder.</p>
+
+<div class="demo-description">
+<p>Shows how to combine different event delegated tooltips into a single instance, by customizing the items and content options.</p>
+<p>We realize you may want to interact with the map tooltips. This is a planned feature for a future version.</p>
+</div>
+</body>
+</html>

http://git-wip-us.apache.org/repos/asf/james-site/blob/38b1b837/content/development-bundle/demos/tooltip/custom-style.html
----------------------------------------------------------------------
diff --git a/content/development-bundle/demos/tooltip/custom-style.html b/content/development-bundle/demos/tooltip/custom-style.html
new file mode 100644
index 0000000..dc904cd
--- /dev/null
+++ b/content/development-bundle/demos/tooltip/custom-style.html
@@ -0,0 +1,95 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>jQuery UI Tooltip - Custom Styling</title>
+	<link rel="stylesheet" href="../../themes/base/jquery.ui.tooltip.css">
+	<script src="../../jquery-1.8.3.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.tooltip.js"></script>
+	<link rel="stylesheet" href="../demos.css">
+	<script>
+	$(function() {
+		$( document ).tooltip({
+			position: {
+				my: "center bottom-20",
+				at: "center top",
+				using: function( position, feedback ) {
+					$( this ).css( position );
+					$( "<div>" )
+						.addClass( "arrow" )
+						.addClass( feedback.vertical )
+						.addClass( feedback.horizontal )
+						.appendTo( this );
+				}
+			}
+		});
+	});
+	</script>
+	<style>
+	.ui-tooltip, .arrow:after {
+		background: black;
+		border: 2px solid white;
+	}
+	.ui-tooltip {
+		padding: 10px 20px;
+		color: white;
+		border-radius: 20px;
+		font: bold 14px "Helvetica Neue", Sans-Serif;
+		text-transform: uppercase;
+		box-shadow: 0 0 7px black;
+	}
+	.arrow {
+		width: 70px;
+		height: 16px;
+		overflow: hidden;
+		position: absolute;
+		left: 50%;
+		margin-left: -35px;
+		bottom: -16px;
+	}
+	.arrow.top {
+		top: -16px;
+		bottom: auto;
+	}
+	.arrow.left {
+		left: 20%;
+	}
+	.arrow:after {
+		content: "";
+		position: absolute;
+		left: 20px;
+		top: -20px;
+		width: 25px;
+		height: 25px;
+		box-shadow: 6px 5px 9px -9px black;
+		-webkit-transform: rotate(45deg);
+		-moz-transform: rotate(45deg);
+		-ms-transform: rotate(45deg);
+		-o-transform: rotate(45deg);
+		tranform: rotate(45deg);
+	}
+	.arrow.top:after {
+		bottom: -20px;
+		top: auto;
+	}
+	</style>
+</head>
+<body>
+
+<p><a href="#" title="That's what this widget is">Tooltips</a> can be attached to any element. When you hover
+the element with your mouse, the title attribute is displayed in a little box next to the element, just like a native tooltip.</p>
+<p>But as it's not a native tooltip, it can be styled. Any themes built with
+<a href="http://themeroller.com" title="ThemeRoller: jQuery UI's theme builder application">ThemeRoller</a>
+will also style tooltips accordingly.</p>
+<p>Tooltips are also useful for form elements, to show some additional information in the context of each field.</p>
+<p><label for="age">Your age:</label> <input id="age" title="We ask for your age only for statistical purposes."></p>
+<p>Hover the field to see the tooltip.</p>
+
+<div class="demo-description">
+<p>Hover the links above or use the tab key to cycle the focus on each element.</p>
+</div>
+</body>
+</html>

http://git-wip-us.apache.org/repos/asf/james-site/blob/38b1b837/content/development-bundle/demos/tooltip/default.html
----------------------------------------------------------------------
diff --git a/content/development-bundle/demos/tooltip/default.html b/content/development-bundle/demos/tooltip/default.html
new file mode 100644
index 0000000..f61fa03
--- /dev/null
+++ b/content/development-bundle/demos/tooltip/default.html
@@ -0,0 +1,40 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>jQuery UI Tooltip - Default functionality</title>
+	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
+	<script src="../../jquery-1.8.3.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.tooltip.js"></script>
+	<link rel="stylesheet" href="../demos.css">
+	<script>
+	$(function() {
+		$( document ).tooltip();
+	});
+	</script>
+	<style>
+	label {
+		display: inline-block;
+		width: 5em;
+	}
+	</style>
+</head>
+<body>
+
+<p><a href="#" title="That's what this widget is">Tooltips</a> can be attached to any element. When you hover
+the element with your mouse, the title attribute is displayed in a little box next to the element, just like a native tooltip.</p>
+<p>But as it's not a native tooltip, it can be styled. Any themes built with
+<a href="http://themeroller.com" title="ThemeRoller: jQuery UI's theme builder application">ThemeRoller</a>
+will also style tooltips accordingly.</p>
+<p>Tooltips are also useful for form elements, to show some additional information in the context of each field.</p>
+<p><label for="age">Your age:</label><input id="age" title="We ask for your age only for statistical purposes."></p>
+<p>Hover the field to see the tooltip.</p>
+
+<div class="demo-description">
+<p>Hover the links above or use the tab key to cycle the focus on each element.</p>
+</div>
+</body>
+</html>

http://git-wip-us.apache.org/repos/asf/james-site/blob/38b1b837/content/development-bundle/demos/tooltip/forms.html
----------------------------------------------------------------------
diff --git a/content/development-bundle/demos/tooltip/forms.html b/content/development-bundle/demos/tooltip/forms.html
new file mode 100644
index 0000000..d6b3a41
--- /dev/null
+++ b/content/development-bundle/demos/tooltip/forms.html
@@ -0,0 +1,65 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>jQuery UI Tooltip - Forms</title>
+	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
+	<script src="../../jquery-1.8.3.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.tooltip.js"></script>
+	<script src="../../ui/jquery.ui.button.js"></script>
+	<link rel="stylesheet" href="../demos.css">
+	<style>
+	label {
+		display: inline-block; width: 5em;
+	}
+	fieldset div {
+		margin-bottom: 2em;
+	}
+	fieldset .help {
+		display: inline-block;
+	}
+	.ui-tooltip {
+		width: 210px;
+	}
+	</style>
+	<script>
+	$(function() {
+		var tooltips = $( "[title]" ).tooltip();
+		$( "<button>" )
+			.text( "Show help" )
+			.button()
+			.click(function() {
+				tooltips.tooltip( "open" );
+			})
+			.insertAfter( "form" );
+	});
+	</script>
+</head>
+<body>
+
+<form>
+	<fieldset>
+		<div>
+			<label for="firstname">Firstname</label>
+			<input id="firstname" name="firstname" title="Please provide your firstname.">
+		</div>
+		<div>
+			<label for="lastname">Lastname</label>
+			<input id="lastname" name="lastname" title="Please provide also your lastname.">
+		</div>
+		<div>
+			<label for="address">Address</label>
+			<input id="address" name="address" title="Your home or work address.">
+		</div>
+	</fieldset>
+</form>
+
+<div class="demo-description">
+<p>Use the button below to display the help texts, or just focus or mouseover the indivdual inputs.</p>
+<p>A fixed width is defined in CSS to make the tooltips look consistent when displayed all at once.</p>
+</div>
+</body>
+</html>

http://git-wip-us.apache.org/repos/asf/james-site/blob/38b1b837/content/development-bundle/demos/tooltip/images/st-stephens.jpg
----------------------------------------------------------------------
diff --git a/content/development-bundle/demos/tooltip/images/st-stephens.jpg b/content/development-bundle/demos/tooltip/images/st-stephens.jpg
new file mode 100644
index 0000000..30fc36d
Binary files /dev/null and b/content/development-bundle/demos/tooltip/images/st-stephens.jpg differ

http://git-wip-us.apache.org/repos/asf/james-site/blob/38b1b837/content/development-bundle/demos/tooltip/images/tower-bridge.jpg
----------------------------------------------------------------------
diff --git a/content/development-bundle/demos/tooltip/images/tower-bridge.jpg b/content/development-bundle/demos/tooltip/images/tower-bridge.jpg
new file mode 100644
index 0000000..d1e14d6
Binary files /dev/null and b/content/development-bundle/demos/tooltip/images/tower-bridge.jpg differ

http://git-wip-us.apache.org/repos/asf/james-site/blob/38b1b837/content/development-bundle/demos/tooltip/index.html
----------------------------------------------------------------------
diff --git a/content/development-bundle/demos/tooltip/index.html b/content/development-bundle/demos/tooltip/index.html
new file mode 100644
index 0000000..cebedd0
--- /dev/null
+++ b/content/development-bundle/demos/tooltip/index.html
@@ -0,0 +1,20 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>jQuery UI Tooltip Demos</title>
+</head>
+<body>
+
+<ul>
+	<li><a href="default.html">Default functionality</a></li>
+	<li><a href="custom-style.html">Custom style with arrow</a></li>
+	<li><a href="forms.html">Forms with tooltips</a></li>
+	<li><a href="tracking.html">Track the mouse</a></li>
+	<li><a href="custom-animation.html">Custom animation</a></li>
+	<li><a href="custom-content.html">Custom content</a></li>
+	<li><a href="video-player.html">Video Player</a></li>
+</ul>
+
+</body>
+</html>

http://git-wip-us.apache.org/repos/asf/james-site/blob/38b1b837/content/development-bundle/demos/tooltip/tracking.html
----------------------------------------------------------------------
diff --git a/content/development-bundle/demos/tooltip/tracking.html b/content/development-bundle/demos/tooltip/tracking.html
new file mode 100644
index 0000000..10a81b9
--- /dev/null
+++ b/content/development-bundle/demos/tooltip/tracking.html
@@ -0,0 +1,42 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>jQuery UI Tooltip - Track the mouse</title>
+	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
+	<script src="../../jquery-1.8.3.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.tooltip.js"></script>
+	<link rel="stylesheet" href="../demos.css">
+	<style>
+	label {
+		display: inline-block;
+		width: 5em;
+	}
+	</style>
+	<script>
+	$(function() {
+		$( document ).tooltip({
+			track: true
+		});
+	});
+	</script>
+</head>
+<body>
+
+<p><a href="#" title="That's what this widget is">Tooltips</a> can be attached to any element. When you hover
+the element with your mouse, the title attribute is displayed in a little box next to the element, just like a native tooltip.</p>
+<p>But as it's not a native tooltip, it can be styled. Any themes built with
+<a href="http://themeroller.com" title="ThemeRoller: jQuery UI's theme builder application">ThemeRoller</a>
+will also style tooltips accordingly.</p>
+<p>Tooltips are also useful for form elements, to show some additional information in the context of each field.</p>
+<p><label for="age">Your age:</label><input id="age" title="We ask for your age only for statistical purposes."></p>
+<p>Hover the field to see the tooltip.</p>
+
+<div class="demo-description">
+<p>Here the tooltips are positioned relative to the mouse, and follow the mouse while it moves above the element.</p>
+</div>
+</body>
+</html>

http://git-wip-us.apache.org/repos/asf/james-site/blob/38b1b837/content/development-bundle/demos/tooltip/video-player.html
----------------------------------------------------------------------
diff --git a/content/development-bundle/demos/tooltip/video-player.html b/content/development-bundle/demos/tooltip/video-player.html
new file mode 100644
index 0000000..8d0bf9c
--- /dev/null
+++ b/content/development-bundle/demos/tooltip/video-player.html
@@ -0,0 +1,117 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>jQuery UI Tooltip - Video Player demo</title>
+	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
+	<script src="../../jquery-1.8.3.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.tooltip.js"></script>
+	<script src="../../ui/jquery.ui.button.js"></script>
+	<script src="../../ui/jquery.ui.menu.js"></script>
+	<script src="../../ui/jquery.ui.effect.js"></script>
+	<script src="../../ui/jquery.ui.effect-blind.js"></script>
+	<link rel="stylesheet" href="../demos.css">
+	<style>
+	.player {
+		width: 500px;
+		height: 300px;
+		border: 2px groove gray;
+		background: rgb(200, 200, 200);
+		text-align: center;
+		line-height: 300px;
+	}
+	.ui-tooltip {
+		border: 1px solid white;
+		background: rgba(20, 20, 20, 1);
+		color: white;
+	}
+	.set {
+		display: inline-block;
+	}
+	.notification {
+		position: absolute;
+		display: inline-block;
+		font-size: 2em;
+		padding: .5em;
+		box-shadow: 2px 2px 5px -2px rgba(0,0,0,0.5);
+	}
+	</style>
+	<script>
+	$(function() {
+		function notify( input ) {
+			var msg = "Selected " + $.trim( input.data( "tooltip-title" ) || input.text() );
+			$( "<div>" )
+				.appendTo( document.body )
+				.text( msg )
+				.addClass( "notification ui-state-default ui-corner-bottom" )
+				.position({
+					my: "center top",
+					at: "center top",
+					of: window
+				})
+				.show({
+					effect: "blind"
+				})
+				.delay( 1000 )
+				.hide({
+					effect: "blind",
+					duration: "slow"
+				}, function() {
+					$( this ).remove();
+				});
+		}
+
+		$( "button" ).each(function() {
+			var button = $( this ).button({
+				icons: {
+					primary: $( this ).data( "icon" )
+				},
+				text: !!$( this ).attr( "title" )
+			});
+			button.click(function() {
+				notify( button );
+			});
+		});
+		$( ".set" ).buttonset({
+			items: "button"
+		});
+
+		$( document ).tooltip({
+			position: {
+				my: "center top",
+				at: "center bottom+5",
+			},
+			show: {
+				duration: "fast"
+			},
+			hide: {
+				effect: "hide"
+			}
+		});
+	});
+	</script>
+</head>
+<body>
+
+<div class="player">Here Be Video (HTML5?)</div>
+<div class="tools">
+	<span class="set">
+		<button data-icon="ui-icon-circle-arrow-n" title="I like this">Like</button>
+		<button data-icon="ui-icon-circle-arrow-s">I dislike this</button>
+	</span>
+	<div class="set">
+		<button data-icon="ui-icon-circle-plus" title="Add to Watch Later">Add to</button>
+		<button class="menu" data-icon="ui-icon-triangle-1-s">Add to favorites or playlist</button>
+	</div>
+	<button title="Share this video">Share</button>
+	<button data-icon="ui-icon-alert">Flag as inappropiate</button>
+</div>
+
+<div class="demo-description">
+<p>A fake video player with like/share/stats button, each with a custom-styled tooltip.</p>
+</div>
+</body>
+</html>

http://git-wip-us.apache.org/repos/asf/james-site/blob/38b1b837/content/development-bundle/demos/widget/default.html
----------------------------------------------------------------------
diff --git a/content/development-bundle/demos/widget/default.html b/content/development-bundle/demos/widget/default.html
new file mode 100644
index 0000000..60797b2
--- /dev/null
+++ b/content/development-bundle/demos/widget/default.html
@@ -0,0 +1,178 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>jQuery UI Widget - Default functionality</title>
+	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
+	<script src="../../jquery-1.8.3.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.button.js"></script>
+	<link rel="stylesheet" href="../demos.css">
+	<style>
+	.custom-colorize {
+		font-size: 20px;
+		position: relative;
+		width: 75px;
+		height: 75px;
+	}
+	.custom-colorize-changer {
+		font-size: 10px;
+		position: absolute;
+		right: 0;
+		bottom: 0;
+	}
+	</style>
+	<script>
+	$(function() {
+		// the widget definition, where "custom" is the namespace,
+		// "colorize" the widget name
+		$.widget( "custom.colorize", {
+			// default options
+			options: {
+				red: 255,
+				green: 0,
+				blue: 0,
+
+				// callbacks
+				change: null,
+				random: null
+			},
+
+			// the constructor
+			_create: function() {
+				this.element
+					// add a class for theming
+					.addClass( "custom-colorize" )
+					// prevent double click to select text
+					.disableSelection();
+
+				this.changer = $( "<button>", {
+					text: "change",
+					"class": "custom-colorize-changer"
+				})
+				.appendTo( this.element )
+				.button();
+
+				// bind click events on the changer button to the random method
+				this._on( this.changer, {
+					// _on won't call random when widget is disabled
+					click: "random"
+				});
+				this._refresh();
+			},
+
+			// called when created, and later when changing options
+			_refresh: function() {
+				this.element.css( "background-color", "rgb(" +
+					this.options.red +"," +
+					this.options.green + "," +
+					this.options.blue + ")"
+				);
+
+				// trigger a callback/event
+				this._trigger( "change" );
+			},
+
+			// a public method to change the color to a random value
+			// can be called directly via .colorize( "random" )
+			random: function( event ) {
+				var colors = {
+					red: Math.floor( Math.random() * 256 ),
+					green: Math.floor( Math.random() * 256 ),
+					blue: Math.floor( Math.random() * 256 )
+				};
+
+				// trigger an event, check if it's canceled
+				if ( this._trigger( "random", event, colors ) !== false ) {
+					this.option( colors );
+				}
+			},
+
+			// events bound via _on are removed automatically
+			// revert other modifications here
+			_destroy: function() {
+				// remove generated elements
+				this.changer.remove();
+
+				this.element
+					.removeClass( "custom-colorize" )
+					.enableSelection()
+					.css( "background-color", "transparent" );
+			},
+
+			// _setOptions is called with a hash of all options that are changing
+			// always refresh when changing options
+			_setOptions: function() {
+				// _super and _superApply handle keeping the right this-context
+				this._superApply( arguments );
+				this._refresh();
+			},
+
+			// _setOption is called for each individual option that is changing
+			_setOption: function( key, value ) {
+				// prevent invalid color values
+				if ( /red|green|blue/.test(key) && (value < 0 || value > 255) ) {
+					return;
+				}
+				this._super( key, value );
+			}
+		});
+
+		// initialize with default options
+		$( "#my-widget1" ).colorize();
+
+		// initialize with two customized options
+		$( "#my-widget2" ).colorize({
+			red: 60,
+			blue: 60
+		});
+
+		// initialize with custom green value
+		// and a random callback to allow only colors with enough green
+		$( "#my-widget3" ).colorize( {
+			green: 128,
+			random: function( event, ui ) {
+				return ui.green > 128;
+			}
+		});
+
+		// click to toggle enabled/disabled
+		$( "#disable" ).click(function() {
+			// use the custom selector created for each widget to find all instances
+			// all instances are toggled together, so we can check the state from the first
+			if ( $( ":custom-colorize" ).colorize( "option", "disabled" ) ) {
+				$( ":custom-colorize" ).colorize( "enable" );
+			} else {
+				$( ":custom-colorize" ).colorize( "disable" );
+			}
+		});
+
+		// click to set options after initalization
+		$( "#black" ).click( function() {
+			$( ":custom-colorize" ).colorize( "option", {
+				red: 0,
+				green: 0,
+				blue: 0
+			});
+		});
+	});
+	</script>
+</head>
+<body>
+
+<div>
+	<div id="my-widget1">color me</div>
+	<div id="my-widget2">color me</div>
+	<div id="my-widget3">color me</div>
+	<button id="disable">Toggle disabled option</button>
+	<button id="black">Go black</button>
+</div>
+
+<div class="demo-description">
+<p>This demo shows a simple custom widget built using the widget factory (jquery.ui.widget.js).</p>
+<p>The three boxes are initialized in different ways. Clicking them changes their background color. View source to see how it works, its heavily commented</p>
+</div>
+</body>
+</html>

http://git-wip-us.apache.org/repos/asf/james-site/blob/38b1b837/content/development-bundle/demos/widget/index.html
----------------------------------------------------------------------
diff --git a/content/development-bundle/demos/widget/index.html b/content/development-bundle/demos/widget/index.html
new file mode 100644
index 0000000..d518b07
--- /dev/null
+++ b/content/development-bundle/demos/widget/index.html
@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>jQuery UI Widget Demo</title>
+</head>
+<body>
+
+<ul>
+	<li><a href="default.html">Default functionality</a></li>
+</ul>
+
+</body>
+</html>


---------------------------------------------------------------------
To unsubscribe, e-mail: server-dev-unsubscribe@james.apache.org
For additional commands, e-mail: server-dev-help@james.apache.org


Mime
View raw message