1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 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>
|