aboutsummaryrefslogtreecommitdiffstats
path: root/demos/tooltip/video-player.html
diff options
context:
space:
mode:
authorScott González <scott.gonzalez@gmail.com>2011-05-27 20:52:13 -0400
committerScott González <scott.gonzalez@gmail.com>2011-05-27 20:52:13 -0400
commitc34a814a4b140a0b6a7610874d7918eb3a1e01a3 (patch)
tree8f08044088727227bacfcf4638d5e3d054bc96dc /demos/tooltip/video-player.html
parente7be72ff06d4152245a674c37abc7e8577bfc7a1 (diff)
downloadjquery-ui-c34a814a4b140a0b6a7610874d7918eb3a1e01a3.tar.gz
jquery-ui-c34a814a4b140a0b6a7610874d7918eb3a1e01a3.zip
Tooltip demos: Cleanup.
Diffstat (limited to 'demos/tooltip/video-player.html')
-rw-r--r--demos/tooltip/video-player.html190
1 files changed, 104 insertions, 86 deletions
diff --git a/demos/tooltip/video-player.html b/demos/tooltip/video-player.html
index 56003ab5a..e0db0575d 100644
--- a/demos/tooltip/video-player.html
+++ b/demos/tooltip/video-player.html
@@ -1,64 +1,102 @@
<!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() {
+ console.log( "click" );
+ notify( button );
+ });
+ }
});
- $(".set").buttonset({
+ $( ".set" ).buttonset({
items: "button"
});
-
- $(".demo").tooltip({
+ $( ".demo" ).tooltip({
position: {
my: "center top",
at: "center bottom+5",
@@ -72,63 +110,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 2024-12-28 05:04:08 +0000