From 3909e6d89e01e4cd8777377c63037896bb95aa2f Mon Sep 17 00:00:00 2001
From: Leif Johansson <leifj@sunet.se>
Date: Fri, 25 Nov 2011 21:18:19 +0100
Subject: new jq layout
---
.../demos/tooltip/ajax/content1.html | 1 +
.../demos/tooltip/ajax/content2.html | 1 +
.../demos/tooltip/custom-animation.html | 61 ++++++++
.../demos/tooltip/custom-content.html | 85 +++++++++++
.../demos/tooltip/custom-style.html | 111 +++++++++++++++
.../jquery-ui-1.9pre/demos/tooltip/default.html | 47 +++++++
.../jquery-ui-1.9pre/demos/tooltip/forms.html | 87 ++++++++++++
.../demos/tooltip/images/st-stephens.jpg | Bin 0 -> 17724 bytes
.../demos/tooltip/images/tower-bridge.jpg | Bin 0 -> 15764 bytes
.../jquery-ui-1.9pre/demos/tooltip/index.html | 24 ++++
.../jquery-ui-1.9pre/demos/tooltip/tracking.html | 66 +++++++++
.../demos/tooltip/video-player.html | 155 +++++++++++++++++++++
12 files changed, 638 insertions(+)
create mode 100644 src/main/webapp/jquery-ui-1.9pre/demos/tooltip/ajax/content1.html
create mode 100644 src/main/webapp/jquery-ui-1.9pre/demos/tooltip/ajax/content2.html
create mode 100644 src/main/webapp/jquery-ui-1.9pre/demos/tooltip/custom-animation.html
create mode 100644 src/main/webapp/jquery-ui-1.9pre/demos/tooltip/custom-content.html
create mode 100644 src/main/webapp/jquery-ui-1.9pre/demos/tooltip/custom-style.html
create mode 100644 src/main/webapp/jquery-ui-1.9pre/demos/tooltip/default.html
create mode 100644 src/main/webapp/jquery-ui-1.9pre/demos/tooltip/forms.html
create mode 100644 src/main/webapp/jquery-ui-1.9pre/demos/tooltip/images/st-stephens.jpg
create mode 100644 src/main/webapp/jquery-ui-1.9pre/demos/tooltip/images/tower-bridge.jpg
create mode 100644 src/main/webapp/jquery-ui-1.9pre/demos/tooltip/index.html
create mode 100644 src/main/webapp/jquery-ui-1.9pre/demos/tooltip/tracking.html
create mode 100644 src/main/webapp/jquery-ui-1.9pre/demos/tooltip/video-player.html
(limited to 'src/main/webapp/jquery-ui-1.9pre/demos/tooltip')
diff --git a/src/main/webapp/jquery-ui-1.9pre/demos/tooltip/ajax/content1.html b/src/main/webapp/jquery-ui-1.9pre/demos/tooltip/ajax/content1.html
new file mode 100644
index 0000000..a1401b2
--- /dev/null
+++ b/src/main/webapp/jquery-ui-1.9pre/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/src/main/webapp/jquery-ui-1.9pre/demos/tooltip/ajax/content2.html b/src/main/webapp/jquery-ui-1.9pre/demos/tooltip/ajax/content2.html
new file mode 100644
index 0000000..f4132d7
--- /dev/null
+++ b/src/main/webapp/jquery-ui-1.9pre/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/src/main/webapp/jquery-ui-1.9pre/demos/tooltip/custom-animation.html b/src/main/webapp/jquery-ui-1.9pre/demos/tooltip/custom-animation.html
new file mode 100644
index 0000000..842256f
--- /dev/null
+++ b/src/main/webapp/jquery-ui-1.9pre/demos/tooltip/custom-animation.html
@@ -0,0 +1,61 @@
+<!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.7.1.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.effects.core.js"></script>
+ <script src="../../ui/jquery.effects.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>
+
+<div class="demo">
+
+<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><!-- End demo -->
+
+
+
+<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><!-- End demo-description -->
+
+</body>
+</html>
diff --git a/src/main/webapp/jquery-ui-1.9pre/demos/tooltip/custom-content.html b/src/main/webapp/jquery-ui-1.9pre/demos/tooltip/custom-content.html
new file mode 100644
index 0000000..f911c82
--- /dev/null
+++ b/src/main/webapp/jquery-ui-1.9pre/demos/tooltip/custom-content.html
@@ -0,0 +1,85 @@
+<!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.7.1.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;
+ }
+ </style>
+ <script>
+ $(function() {
+ $( ".demo" ).tooltip({
+ items: "img, [data-geo], [title]",
+ content: function() {
+ var element = $( this );
+ if ( element.is( "[data-geo]" ) ) {
+ return "<img class='map' src='http://maps.google.com/maps/api/staticmap?" +
+ "zoom=11&size=350x350&maptype=terrain&sensor=false¢er=" +
+ element.text() + "'>";
+ }
+ if ( element.is( "[title]" ) ) {
+ return element.attr( "title" );
+ }
+ if ( element.is( "img" ) ) {
+ return element.attr( "alt" );
+ }
+ }
+ });
+ });
+ </script>
+</head>
+<body>
+
+<div class="demo">
+
+<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&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&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><!-- End demo -->
+
+
+
+<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><!-- End demo-description -->
+
+</body>
+</html>
diff --git a/src/main/webapp/jquery-ui-1.9pre/demos/tooltip/custom-style.html b/src/main/webapp/jquery-ui-1.9pre/demos/tooltip/custom-style.html
new file mode 100644
index 0000000..3df94c4
--- /dev/null
+++ b/src/main/webapp/jquery-ui-1.9pre/demos/tooltip/custom-style.html
@@ -0,0 +1,111 @@
+<!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.tooltip.css">
+ <script src="../../jquery-1.7.1.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() {
+ $( ".demo" ).tooltip({
+ open: function(event, ui) {
+ $("<div>").addClass("arrow").appendTo(ui.tooltip);
+ },
+ position: {
+ my: "center bottom",
+ at: "center top",
+ offset: "0 -20px"
+ }
+ });
+ });
+ </script>
+ <style>
+ label {
+ display: inline-block;
+ width: 5em;
+ }
+ .demo {
+ margin: 10em 0 0 10em;
+ }
+ .ui-tooltip, .arrow:after {
+ background: black;
+ border: 2px solid white;
+ }
+ .ui-tooltip {
+ display: inline-block;
+ position: relative;
+ padding: 10px 20px;
+ color: white;
+ border-radius: 20px;
+ text-align: center;
+ font: bold 14px "Helvetica Neue", Sans-Serif;
+ font-stretch: condensed;
+ text-decoration: none;
+ 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:after {
+ content: "";
+ position: absolute;
+ left: 20px;
+ top: -20px;
+ width: 25px;
+ height: 25px;
+ -webkit-box-shadow: 6px 5px 9px -9px black,
+ 5px 6px 9px -9px black;
+ -moz-box-shadow: 6px 5px 9px -9px black,
+ 5px 6px 9px -9px black;
+ box-shadow: 6px 5px 9px -9px black,
+ 5px 6px 9px -9px black;
+ -webkit-transform: rotate(45deg);
+ -moz-transform: rotate(45deg);
+ -ms-transform: rotate(45deg);
+ -o-transform: rotate(45deg);
+ }
+ div[data-tooltip].active {
+ opacity: 1;
+ margin-top: 6px;
+ }
+ div[data-tooltip].out {
+ opacity: 0;
+ margin-top: -20px;
+ }
+ </style>
+</head>
+<body>
+
+<div class="demo">
+
+<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><!-- End demo -->
+
+
+
+<div class="demo-description">
+<p>Hover the links above or use the tab key to cycle the focus on each element.</p>
+</div><!-- End demo-description -->
+
+</body>
+</html>
diff --git a/src/main/webapp/jquery-ui-1.9pre/demos/tooltip/default.html b/src/main/webapp/jquery-ui-1.9pre/demos/tooltip/default.html
new file mode 100644
index 0000000..f594318
--- /dev/null
+++ b/src/main/webapp/jquery-ui-1.9pre/demos/tooltip/default.html
@@ -0,0 +1,47 @@
+<!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.7.1.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() {
+ $( ".demo" ).tooltip();
+ });
+ </script>
+ <style>
+ label {
+ display: inline-block;
+ width: 5em;
+ }
+ </style>
+</head>
+<body>
+
+<div class="demo">
+
+<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><!-- End demo -->
+
+
+
+<div class="demo-description">
+<p>Hover the links above or use the tab key to cycle the focus on each element.</p>
+</div><!-- End demo-description -->
+
+</body>
+</html>
diff --git a/src/main/webapp/jquery-ui-1.9pre/demos/tooltip/forms.html b/src/main/webapp/jquery-ui-1.9pre/demos/tooltip/forms.html
new file mode 100644
index 0000000..93297a6
--- /dev/null
+++ b/src/main/webapp/jquery-ui-1.9pre/demos/tooltip/forms.html
@@ -0,0 +1,87 @@
+<!doctype html>
+<html lang="en">
+<head>
+ <meta charset="utf-8">
+ <title>jQuery UI Tooltip - Default demo</title>
+ <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
+ <script src="../../jquery-1.7.1.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]" )
+ .click(function() {
+ $( this ).tooltip( $( this ).attr( "title" ) ? "open" : "close" );
+ })
+ .bind( "mouseover focusin mouseleave blur click", function( event ) {
+ event.stopImmediatePropagation();
+ })
+ .tooltip();
+ $( "<button>" )
+ .text( "Show help" )
+ .button()
+ .toggle(
+ function() {
+ tooltips.tooltip( "open" );
+ },
+ function() {
+ tooltips.tooltip( "close" );
+ }
+ )
+ .appendTo( "form" );
+ });
+ </script>
+</head>
+<body>
+
+<div class="demo">
+
+<form>
+ <fieldset>
+ <div>
+ <label for="firstname">Firstname</label>
+ <input id="firstname" name="firstname">
+ <span title="Please provide your firstname." class="help ui-state-default ui-corner-all ui-icon ui-icon-help">?</span>
+ </div>
+ <div>
+ <label for="lastname">Lastname</label>
+ <input id="lastname" name="lastname">
+ <span title="Please provide also your lastname." class="help ui-state-default ui-corner-all ui-icon ui-icon-help">?</span>
+ </div>
+ <div>
+ <label for="address">Address</label>
+ <input id="address" name="address">
+ <span title="Your home or work address." class="help ui-state-default ui-corner-all ui-icon ui-icon-help">?</span>
+ </div>
+ </fieldset>
+</form>
+
+</div><!-- End demo -->
+
+
+
+<div class="demo-description">
+<p>Use the button below to display the help texts. Click again to hide them. Default hover and focus events are removed to show tooltip only programmatically.</p>
+<p>A fixed width is defined in CSS to make the tooltips look consistent when displayed all at once.</p>
+</div><!-- End demo-description -->
+
+</body>
+</html>
diff --git a/src/main/webapp/jquery-ui-1.9pre/demos/tooltip/images/st-stephens.jpg b/src/main/webapp/jquery-ui-1.9pre/demos/tooltip/images/st-stephens.jpg
new file mode 100644
index 0000000..30fc36d
Binary files /dev/null and b/src/main/webapp/jquery-ui-1.9pre/demos/tooltip/images/st-stephens.jpg differ
diff --git a/src/main/webapp/jquery-ui-1.9pre/demos/tooltip/images/tower-bridge.jpg b/src/main/webapp/jquery-ui-1.9pre/demos/tooltip/images/tower-bridge.jpg
new file mode 100644
index 0000000..d1e14d6
Binary files /dev/null and b/src/main/webapp/jquery-ui-1.9pre/demos/tooltip/images/tower-bridge.jpg differ
diff --git a/src/main/webapp/jquery-ui-1.9pre/demos/tooltip/index.html b/src/main/webapp/jquery-ui-1.9pre/demos/tooltip/index.html
new file mode 100644
index 0000000..3753bc1
--- /dev/null
+++ b/src/main/webapp/jquery-ui-1.9pre/demos/tooltip/index.html
@@ -0,0 +1,24 @@
+<!doctype html>
+<html lang="en">
+<head>
+ <meta charset="utf-8">
+ <title>jQuery UI Tooltip Demos</title>
+ <link rel="stylesheet" href="../demos.css">
+</head>
+<body>
+
+<div class="demos-nav">
+ <h4>Examples</h4>
+ <ul>
+ <li class="demo-config-on"><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>
+</div>
+
+</body>
+</html>
diff --git a/src/main/webapp/jquery-ui-1.9pre/demos/tooltip/tracking.html b/src/main/webapp/jquery-ui-1.9pre/demos/tooltip/tracking.html
new file mode 100644
index 0000000..f37c15c
--- /dev/null
+++ b/src/main/webapp/jquery-ui-1.9pre/demos/tooltip/tracking.html
@@ -0,0 +1,66 @@
+<!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.7.1.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() {
+ $( ".demo" ).tooltip({
+ position: {
+ my: "left+25 center",
+ at: "center"
+ },
+ open: function( event ) {
+ var tooltip = $( ".ui-tooltip" ),
+ positionOption = $( this ).tooltip( "option", "position" );
+ function position( event ) {
+ positionOption.of = event;
+ tooltip.position( positionOption );
+ }
+ $( document ).bind( "mousemove.tooltip-position", position );
+ // trigger once to override element-relative positioning
+ position( event );
+ },
+ close: function() {
+ $( document ).unbind( "mousemove.tooltip-position" );
+ }
+ });
+ });
+ </script>
+</head>
+<body>
+
+<div class="demo">
+
+<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><!-- End demo -->
+
+
+
+<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><!-- End demo-description -->
+
+</body>
+</html>
diff --git a/src/main/webapp/jquery-ui-1.9pre/demos/tooltip/video-player.html b/src/main/webapp/jquery-ui-1.9pre/demos/tooltip/video-player.html
new file mode 100644
index 0000000..365934f
--- /dev/null
+++ b/src/main/webapp/jquery-ui-1.9pre/demos/tooltip/video-player.html
@@ -0,0 +1,155 @@
+<!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.7.1.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.popup.js"></script>
+ <script src="../../ui/jquery.effects.core.js"></script>
+ <script src="../../ui/jquery.effects.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;
+ }
+ /* TODO load from jquery.ui.popup.css */
+ .ui-popup {
+ position: absolute;
+ z-index: 5000;
+ }
+ .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();
+ });
+ }
+ $( "ul" ).menu({
+ select: function( event, ui ) {
+ // TODO should probably be handled by popup, see ESCAPE key handler
+ // affects key handling
+ $( this ).prev().focus();
+ notify( ui.item );
+ }
+ }).popup();
+
+ $( "button" ).each(function() {
+ var button = $( this ).button({
+ icons: {
+ primary: $( this ).data( "icon" )
+ },
+ text: !!$( this ).attr( "title" )
+ });
+ if ( button.next().is( ":ui-popup" ) ) {
+ button.click(function( event ) {
+ $( ".demo" ).tooltip( "close", event );
+ });
+ } else {
+ button.click(function() {
+ notify( button );
+ });
+ }
+ });
+ $( ".set" ).buttonset({
+ items: "button"
+ });
+
+ $( ".demo" ).tooltip({
+ position: {
+ my: "center top",
+ at: "center bottom+5",
+ },
+ show: {
+ duration: "fast"
+ },
+ hide: {
+ effect: "hide"
+ }
+ });
+ });
+ </script>
+</head>
+<body>
+
+<div class="demo">
+
+<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>
+ <ul>
+ <li>
+ <a href="#">Favorites</a>
+ </li>
+ <li>
+ <a href="#">Watch Later</a>
+ </li>
+ <li>
+ <a href="#">New Playlist...</a>
+ </li>
+ </ul>
+ </div>
+ <button title="Share this video">Share</button>
+ <button data-icon="ui-icon-alert">Flag as inappropiate</button>
+</div>
+
+</div><!-- End demo -->
+
+
+
+<div class="demo-description">
+<p>A fake video player with like/share/stats button, each with a custom-styled tooltip.</p>
+</div><!-- End demo-description -->
+
+</body>
+</html>
--
cgit v1.1