+++ /dev/null
-<!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.9.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.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 inappropiate</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>
git://git.onelab.eu / myslice.git / blobdiff