| /instantMessage/node_modules/jquery-ui/demos/tooltip/video-player.html |
|---|
| @@ -0,0 +1,140 @@ |
|---|
| <!doctype html> |
| <html lang="en"> |
| <head> |
| <meta charset="utf-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1"> |
| <title>jQuery UI Tooltip - Video Player demo</title> |
| <link rel="stylesheet" href="../../themes/base/all.css"> |
| <link rel="stylesheet" href="../demos.css"> |
| <style> |
| .player { |
| width: 500px; |
| height: 300px; |
| border: 2px groove gray; |
| background: #ccc; |
| text-align: center; |
| line-height: 300px; |
| } |
| .ui-tooltip { |
| border: 1px solid white; |
| background: #111; |
| color: white; |
| } |
| .ui-menu { |
| position: absolute; |
| } |
| .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 src="../../external/requirejs/require.js"></script> |
| <script src="../bootstrap.js" data-modules="button controlgroup menu effect effect-blind"> |
| 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.not( ".menu" ).on( "click", function() { |
| notify( button ); |
| }); |
| }); |
| $( ".set" ).controlgroup({ |
| items: { |
| "button" : "button" |
| } |
| }); |
| |
| $( "button.menu" ) |
| .on( "click", function() { |
| $( document ).tooltip( "close", { currentTarget: this }); |
| var menu = $( this ).next().show().position({ |
| my: "left top", |
| at: "left bottom", |
| of: this |
| }); |
| $( document ).one( "click", function() { |
| menu.hide(); |
| }); |
| return false; |
| }) |
| .next() |
| .hide() |
| .menu({ |
| selected: function( event, ui ) { |
| notify( ui.item ); |
| } |
| }); |
| |
| $( 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> |
| <ul> |
| <li><div>Favorites</div></li> |
| <li><div>Funnees</div></li> |
| <li></li> |
| <li><div>New playlist...</div></li> |
| </ul> |
| </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> |
