diff options
Diffstat (limited to 'apps/it/static/js/ui/demos/tooltip/video-player.html')
-rw-r--r-- | apps/it/static/js/ui/demos/tooltip/video-player.html | 117 |
1 files changed, 0 insertions, 117 deletions
diff --git a/apps/it/static/js/ui/demos/tooltip/video-player.html b/apps/it/static/js/ui/demos/tooltip/video-player.html deleted file mode 100644 index 3a4bc77..0000000 --- a/apps/it/static/js/ui/demos/tooltip/video-player.html +++ /dev/null @@ -1,117 +0,0 @@ -<!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> |