Added tags, jquery UI

author: Filipp Lepalaan <f@230.to> 2014-02-19 18:02:09 +0200
committer: Filipp Lepalaan <f@230.to> 2014-02-19 18:02:09 +0200
commit: 75ad7e4bd7d69243e7e5281c2642f00478fb072d (patch)
tree: eaaaf360902d369f42d94778aac8803db7973ce0 /apps/it/static/js/ui/demos/tooltip
parent: cfc7c3f52544af8a71d3fa3988a06fee200d2c24 (diff)
download: pudding-75ad7e4bd7d69243e7e5281c2642f00478fb072d.tar.gz
pudding-75ad7e4bd7d69243e7e5281c2642f00478fb072d.tar.bz2
pudding-75ad7e4bd7d69243e7e5281c2642f00478fb072d.zip
12 files changed, 518 insertions, 0 deletions
diff --git a/apps/it/static/js/ui/demos/tooltip/ajax/content1.html b/apps/it/static/js/ui/demos/tooltip/ajax/content1.html
new file mode 100644
index 0000000..a1401b2
--- /dev/null
+++ b/apps/it/static/js/ui/demos/tooltip/ajax/content1.html
@@ -0,0 +1 @@
+<p><strong>This content was loaded via ajax.</strong></p>
+\ No newline at end of file
diff --git a/apps/it/static/js/ui/demos/tooltip/ajax/content2.html b/apps/it/static/js/ui/demos/tooltip/ajax/content2.html
new file mode 100644
index 0000000..f4132d7
--- /dev/null
+++ b/apps/it/static/js/ui/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
diff --git a/apps/it/static/js/ui/demos/tooltip/custom-animation.html b/apps/it/static/js/ui/demos/tooltip/custom-animation.html
new file mode 100644
index 0000000..02f2003
--- /dev/null
+++ b/apps/it/static/js/ui/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.10.2.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>
diff --git a/apps/it/static/js/ui/demos/tooltip/custom-content.html b/apps/it/static/js/ui/demos/tooltip/custom-content.html
new file mode 100644
index 0000000..70e54e2
--- /dev/null
+++ b/apps/it/static/js/ui/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.10.2.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>
diff --git a/apps/it/static/js/ui/demos/tooltip/custom-style.html b/apps/it/static/js/ui/demos/tooltip/custom-style.html
new file mode 100644
index 0000000..3cfc708
--- /dev/null
+++ b/apps/it/static/js/ui/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.10.2.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>
diff --git a/apps/it/static/js/ui/demos/tooltip/default.html b/apps/it/static/js/ui/demos/tooltip/default.html
new file mode 100644
index 0000000..ef4e746
--- /dev/null
+++ b/apps/it/static/js/ui/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.10.2.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>
diff --git a/apps/it/static/js/ui/demos/tooltip/forms.html b/apps/it/static/js/ui/demos/tooltip/forms.html
new file mode 100644
index 0000000..ef7f0e2
--- /dev/null
+++ b/apps/it/static/js/ui/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.10.2.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>
diff --git a/apps/it/static/js/ui/demos/tooltip/images/st-stephens.jpg b/apps/it/static/js/ui/demos/tooltip/images/st-stephens.jpg
new file mode 100644
index 0000000..30fc36d
--- /dev/null
+++ b/apps/it/static/js/ui/demos/tooltip/images/st-stephens.jpg
diff --git a/apps/it/static/js/ui/demos/tooltip/images/tower-bridge.jpg b/apps/it/static/js/ui/demos/tooltip/images/tower-bridge.jpg
new file mode 100644
index 0000000..d1e14d6
--- /dev/null
+++ b/apps/it/static/js/ui/demos/tooltip/images/tower-bridge.jpg
diff --git a/apps/it/static/js/ui/demos/tooltip/index.html b/apps/it/static/js/ui/demos/tooltip/index.html
new file mode 100644
index 0000000..cebedd0
--- /dev/null
+++ b/apps/it/static/js/ui/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>
diff --git a/apps/it/static/js/ui/demos/tooltip/tracking.html b/apps/it/static/js/ui/demos/tooltip/tracking.html
new file mode 100644
index 0000000..db2aaaf
--- /dev/null
+++ b/apps/it/static/js/ui/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.10.2.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>
diff --git a/apps/it/static/js/ui/demos/tooltip/video-player.html b/apps/it/static/js/ui/demos/tooltip/video-player.html
new file mode 100644
index 0000000..3a4bc77
--- /dev/null
+++ b/apps/it/static/js/ui/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.10.2.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 inappropriate</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>
author	Filipp Lepalaan <f@230.to>	2014-02-19 18:02:09 +0200
committer	Filipp Lepalaan <f@230.to>	2014-02-19 18:02:09 +0200
commit	75ad7e4bd7d69243e7e5281c2642f00478fb072d (patch)
tree	eaaaf360902d369f42d94778aac8803db7973ce0 /apps/it/static/js/ui/demos/tooltip
parent	cfc7c3f52544af8a71d3fa3988a06fee200d2c24 (diff)
download	pudding-75ad7e4bd7d69243e7e5281c2642f00478fb072d.tar.gz pudding-75ad7e4bd7d69243e7e5281c2642f00478fb072d.tar.bz2 pudding-75ad7e4bd7d69243e7e5281c2642f00478fb072d.zip