aboutsummaryrefslogtreecommitdiffstats
path: root/demos/tooltip
diff options
context:
space:
mode:
Diffstat (limited to 'demos/tooltip')
-rw-r--r--demos/tooltip/custom-animation.html59
-rw-r--r--demos/tooltip/default.html47
-rw-r--r--demos/tooltip/delegation-mixbag.html113
-rw-r--r--demos/tooltip/forms.html110
-rw-r--r--demos/tooltip/images/st-stephens.jpgbin0 -> 17724 bytes
-rw-r--r--demos/tooltip/images/tower-bridge.jpgbin0 -> 15764 bytes
-rw-r--r--demos/tooltip/index.html3
-rw-r--r--demos/tooltip/tracking.html64
-rw-r--r--demos/tooltip/video-player.html193
9 files changed, 323 insertions, 266 deletions
diff --git a/demos/tooltip/custom-animation.html b/demos/tooltip/custom-animation.html
index ef8857979..e96960f47 100644
--- a/demos/tooltip/custom-animation.html
+++ b/demos/tooltip/custom-animation.html
@@ -1,59 +1,64 @@
<!doctype html>
<html lang="en">
<head>
+ <meta charset="utf-8">
<title>jQuery UI Tooltip - Custom animation demo</title>
- <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" />
- <script type="text/javascript" src="../../jquery-1.5.1.js"></script>
- <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
- <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
- <script type="text/javascript" src="../../ui/jquery.ui.position.js"></script>
- <script type="text/javascript" src="../../ui/jquery.ui.tooltip.js"></script>
- <link type="text/css" href="../demos.css" rel="stylesheet" />
- <script type="text/javascript">
+ <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
+ <script src="../../jquery-1.5.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() {
- $(".demo").tooltip({
+ $( "#show-option" ).tooltip({
show: {
effect: "slideDown",
delay: 250
- },
+ }
+ });
+ $( "#hide-option" ).tooltip({
hide: {
- effect: "hide",
+ effect: "explode",
delay: 250
}
});
+ $( "#position-option" ).tooltip({
+ position: {
+ my: "left top",
+ at: "left bottom+10",
+ using: function( pos ) {
+ $( this ).css({
+ left: pos.left,
+ top: pos.top - 10
+ }).animate({ top: pos.top }, "fast" );
+ }
+ }
+ });
});
</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 tooltip's accordingly.</p>
- <p>Tooltip's 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>Click the field to see the tooltip; when you tab out of the field, it gets hidden.</p>
+<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="position-option" href="http://jqueryui.com/demos/tooltip/#option-position" title="move down on show">position option</a>.</p>
</div><!-- End demo -->
<div class="demo-description">
-
<p>This demo shows how to customize animations. The tooltip is shown, after a
delay of 250ms, using a slide down animation, and hidden, after another delay,
without an animation.</p>
-
</div><!-- End demo-description -->
-
-
</body>
</html>
diff --git a/demos/tooltip/default.html b/demos/tooltip/default.html
index 9d5502f2b..cfb61f2eb 100644
--- a/demos/tooltip/default.html
+++ b/demos/tooltip/default.html
@@ -1,48 +1,47 @@
<!doctype html>
<html lang="en">
<head>
- <title>jQuery UI Tooltip - Default demo</title>
- <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" />
- <script type="text/javascript" src="../../jquery-1.5.1.js"></script>
- <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
- <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
- <script type="text/javascript" src="../../ui/jquery.ui.position.js"></script>
- <script type="text/javascript" src="../../ui/jquery.ui.tooltip.js"></script>
- <link type="text/css" href="../demos.css" rel="stylesheet" />
- <script type="text/javascript">
+ <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.5.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();
+ $( ".demo" ).tooltip();
});
</script>
<style>
- label { display: inline-block; width: 5em; }
+ 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 tooltip's accordingly.</p>
- <p>Tooltip's 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>Click the field to see the tooltip; when you tab out of the field, it gets hidden.</p>
+<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/demos/tooltip/delegation-mixbag.html b/demos/tooltip/delegation-mixbag.html
index 9c524dabe..5b1fa4119 100644
--- a/demos/tooltip/delegation-mixbag.html
+++ b/demos/tooltip/delegation-mixbag.html
@@ -1,73 +1,88 @@
<!doctype html>
<html lang="en">
<head>
+ <meta charset="utf-8">
<title>jQuery UI Tooltip - Default demo</title>
- <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" />
- <script type="text/javascript" src="../../jquery-1.5.1.js"></script>
- <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
- <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
- <script type="text/javascript" src="../../ui/jquery.ui.position.js"></script>
- <script type="text/javascript" src="../../ui/jquery.ui.tooltip.js"></script>
- <link type="text/css" href="../demos.css" rel="stylesheet" />
- <script type="text/javascript">
+ <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
+ <script src="../../jquery-1.5.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;
+ }
+ </style>
+ <script>
$(function() {
- $(".demo").tooltip({
- items: "[href], [title]",
- content: function(response) {
- var href = $(this).attr("href");
- if (/^#/.test(href)) {
- return $(href).html();
- } else if (href) {
- $.get(href, response);
- return "loading...";
+ $( ".demo" ).tooltip({
+ items: "img, [data-geo], [title]",
+ content: function() {
+ var element = $( this );
+ if ( element.is( "[data-geo]" ) ) {
+ return $( "<iframe>", {
+ width: 425,
+ height: 350,
+ frameborder: 0,
+ scrolling: "no",
+ marginheight: 0,
+ marginwidth: 0,
+ src: "http://maps.google.com/maps?ll=" + element.attr( "data-geo" ) +
+ "&z=11&t=p&output=embed"
+ });
+ }
+ if ( element.is( "[title]" ) ) {
+ return element.attr( "title" );
+ }
+ if ( element.is( "img" ) ) {
+ return element.attr( "alt" );
}
- return this.title;
}
});
- $("#footnotes").hide();
});
</script>
- <style>
- label { display: inline-block; width: 5em; }
- </style>
</head>
<body>
<div class="demo">
- <ul>
- <li>
- <a href="#footnote1">I'm a link to a footnote.</a>
- </li>
- <li>
- <a href="#footnote2">I'm another link to a footnote.</a>
- </li>
- </ul>
- <input title="This is just an input, nothing special" />
-
- <ul>
- <li>
- <a href="ajax/content1.html">Link to ajax content, with tooltip preview!</a>
- </li>
- <li>
- <a href="ajax/content2.html">Another link to ajax content, with tooltip preview!</a>
- </li>
- </ul>
-
- <div id="footnotes">
- <div id="footnote1">This is <strong>the</strong> footnote, including other elements</div>
- <div id="footnote2">This is <strong>the other</strong> footnote, including other elements</div>
- </div>
-</div><!-- End 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="48.208174,16.373819">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="51.500152,-0.126236">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>
-<div class="demo-description">
+<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>
-<p>Show how to combine different event delegated tooltips into a single instance, by customizing the items and content options.</p>
+</div><!-- End demo -->
-</div><!-- End demo-description -->
+<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/demos/tooltip/forms.html b/demos/tooltip/forms.html
index 983b56bdf..0f91736b2 100644
--- a/demos/tooltip/forms.html
+++ b/demos/tooltip/forms.html
@@ -1,71 +1,87 @@
<!doctype html>
<html lang="en">
<head>
+ <meta charset="utf-8">
<title>jQuery UI Tooltip - Default demo</title>
- <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" />
- <script type="text/javascript" src="../../jquery-1.5.1.js"></script>
- <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
- <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
- <script type="text/javascript" src="../../ui/jquery.ui.position.js"></script>
- <script type="text/javascript" src="../../ui/jquery.ui.tooltip.js"></script>
- <script type="text/javascript" src="../../ui/jquery.ui.button.js"></script>
- <link type="text/css" href="../demos.css" rel="stylesheet" />
- <script type="text/javascript">
+ <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
+ <script src="../../jquery-1.5.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() {
- $("[title]").tooltip().unbind(".tooltip");
- $("<button/>").text("Show help").button().toggle(function() {
- $(":ui-tooltip").tooltip("open");
- }, function() {
- $(":ui-tooltip").tooltip("close");
- }).appendTo("form");
+ 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>
- <style>
- label { display: inline-block; width: 5em; }
- .ui-icon { display: inline-block; }
- fieldset div {
- margin-bottom: 2em;
- }
- .ui-tooltip { width: 210px; }
- </style>
</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="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="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="ui-state-default ui-corner-all ui-icon ui-icon-help">?</span>
- </div>
- </fieldset>
- </form>
+<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/demos/tooltip/images/st-stephens.jpg b/demos/tooltip/images/st-stephens.jpg
new file mode 100644
index 000000000..30fc36d67
--- /dev/null
+++ b/demos/tooltip/images/st-stephens.jpg
Binary files differ
diff --git a/demos/tooltip/images/tower-bridge.jpg b/demos/tooltip/images/tower-bridge.jpg
new file mode 100644
index 000000000..d1e14d6d2
--- /dev/null
+++ b/demos/tooltip/images/tower-bridge.jpg
Binary files differ
diff --git a/demos/tooltip/index.html b/demos/tooltip/index.html
index 4ad189ed2..460c494e3 100644
--- a/demos/tooltip/index.html
+++ b/demos/tooltip/index.html
@@ -1,8 +1,9 @@
<!doctype html>
<html lang="en">
<head>
+ <meta charset="utf-8">
<title>jQuery UI Tooltip Demos</title>
- <link type="text/css" href="../demos.css" rel="stylesheet" />
+ <link rel="stylesheet" href="../demos.css">
</head>
<body>
diff --git a/demos/tooltip/tracking.html b/demos/tooltip/tracking.html
index dd5dc9d92..4cddb4437 100644
--- a/demos/tooltip/tracking.html
+++ b/demos/tooltip/tracking.html
@@ -1,64 +1,64 @@
<!doctype html>
<html lang="en">
<head>
- <title>jQuery UI Tooltip - Default demo</title>
- <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" />
- <script type="text/javascript" src="../../jquery-1.5.1.js"></script>
- <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
- <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
- <script type="text/javascript" src="../../ui/jquery.ui.position.js"></script>
- <script type="text/javascript" src="../../ui/jquery.ui.tooltip.js"></script>
- <link type="text/css" href="../demos.css" rel="stylesheet" />
- <script type="text/javascript">
+ <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.5.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({
- open: function() {
+ $( ".demo" ).tooltip({
+ open: function( event ) {
var tooltip = $( ".ui-tooltip" );
- $(document).mousemove(function( event ) {
- tooltip.position( {
+ function position( event ) {
+ tooltip.position({
my: "left+25 center",
at: "right+25 center",
of: event
});
- })
+ }
+ $( document ).bind( "mousemove.tooltip-position", position );
// trigger once to override element-relative positioning
- .mousemove();
+ position( event );
},
close: function() {
- $(document).unbind( "mousemove" );
+ $( document ).unbind( "mousemove.tooltip-position" );
}
});
});
</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 tooltip's accordingly.</p>
- <p>Tooltip's 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>Click the field to see the tooltip; when you tab out of the field, it gets hidden.</p>
+<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/demos/tooltip/video-player.html b/demos/tooltip/video-player.html
index 56003ab5a..1d8458abb 100644
--- a/demos/tooltip/video-player.html
+++ b/demos/tooltip/video-player.html
@@ -1,64 +1,105 @@
<!doctype html>
<html lang="en">
<head>
+ <meta charset="utf-8">
<title>jQuery UI Tooltip - Video Player demo</title>
- <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" />
- <script type="text/javascript" src="../../jquery-1.5.1.js"></script>
- <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
- <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
- <script type="text/javascript" src="../../ui/jquery.ui.position.js"></script>
- <script type="text/javascript" src="../../ui/jquery.ui.tooltip.js"></script>
- <script type="text/javascript" src="../../ui/jquery.ui.button.js"></script>
- <script type="text/javascript" src="../../ui/jquery.ui.menu.js"></script>
- <script type="text/javascript" src="../../ui/jquery.ui.popup.js"></script>
- <script type="text/javascript" src="../../ui/jquery.effects.core.js"></script>
- <script type="text/javascript" src="../../ui/jquery.effects.blind.js"></script>
- <link type="text/css" href="../demos.css" rel="stylesheet" />
- <script type="text/javascript">
+ <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
+ <script src="../../jquery-1.5.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).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();
- });
+ 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 stop button from handling the click
- $(this).popup("close");
- // TODO should probably be handled by poup, see ESCAPE key handler
+ $( "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);
+ $( this ).prev().focus();
+ notify( ui.item );
}
}).popup();
- $("button").each(function() {
- $(this).button({
+ $( "button" ).each(function() {
+ var button = $( this ).button({
icons: {
- primary: $(this).data("icon")
+ primary: $( this ).data( "icon" )
},
- text: !!$(this).attr("title")
- }).click(function() {
- // TODO don't notify if the button is opening a popup
- notify(this);
+ 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({
+ $( ".set" ).buttonset({
items: "button"
});
-
- $(".demo").tooltip({
+ $( ".demo" ).tooltip({
position: {
my: "center top",
at: "center bottom+5",
@@ -72,63 +113,43 @@
});
});
</script>
- <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>
</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 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>
- </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>
generated by cgit v1.2.3 (git 2.39.1) at 2025-04-30 16:33:19 +0000