mirror of
https://github.com/jquery/jquery-ui.git
synced 2024-11-21 11:04:24 +00:00
Tooltip demos: Cleanup.
This commit is contained in:
Scott González
parent
e7be72ff06
commit
c34a814a4b
@ -1,17 +1,24 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Tooltip - Custom animation 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>
|
||||
<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>
|
||||
<link rel="stylesheet" href="../demos.css">
|
||||
<style>
|
||||
label {
|
||||
display: inline-block;
|
||||
width: 5em;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
$(function() {
|
||||
$(".demo").tooltip({
|
||||
$( ".demo" ).tooltip({
|
||||
show: {
|
||||
effect: "slideDown",
|
||||
delay: 250
|
||||
@ -23,37 +30,29 @@
|
||||
});
|
||||
});
|
||||
</script>
|
||||
<style>
|
||||
label { display: inline-block; width: 5em; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="demo">
|
||||
|
||||
<p><a href="#" title="That's what this widget is">Tooltips</a> can be attached to any element. When you hover
|
||||
the element with your mouse, the title attribute is displayed in a little box next to the element, just like a native tooltip.
|
||||
</p>
|
||||
<p>But as it's not a native tooltip, it can be styled. Any themes built with
|
||||
<a href="http://themeroller.com" title="ThemeRoller, jQuery UI's theme builder application">ThemeRoller</a>
|
||||
will also style tooltip's accordingly.</p>
|
||||
<p>Tooltip's are also useful for form elements, to show some additional information in the context of each field.</p>
|
||||
<p><label for="age">Your age:</label><input id="age" title="We ask for your age only for statistical purposes." /></p>
|
||||
<p>Click the field to see the tooltip; when you tab out of the field, it gets hidden.</p>
|
||||
<p><a href="#" title="That's what this widget is">Tooltips</a> can be attached to any element. When you hover
|
||||
the element with your mouse, the title attribute is displayed in a little box next to the element, just like a native tooltip.</p>
|
||||
<p>But as it's not a native tooltip, it can be styled. Any themes built with
|
||||
<a href="http://themeroller.com" title="ThemeRoller: jQuery UI's theme builder application">ThemeRoller</a>
|
||||
will also style tooltips accordingly.</p>
|
||||
<p>Tooltips are also useful for form elements, to show some additional information in the context of each field.</p>
|
||||
<p><label for="age">Your age:</label><input id="age" title="We ask for your age only for statistical purposes."></p>
|
||||
<p>Hover the field to see the tooltip.</p>
|
||||
|
||||
</div><!-- End demo -->
|
||||
|
||||
|
||||
|
||||
<div class="demo-description">
|
||||
|
||||
<p>This demo shows how to customize animations. The tooltip is shown, after a
|
||||
delay of 250ms, using a slide down animation, and hidden, after another delay,
|
||||
without an animation.</p>
|
||||
|
||||
</div><!-- End demo-description -->
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,48 +1,47 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>jQuery UI Tooltip - Default 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>
|
||||
<link type="text/css" href="../demos.css" rel="stylesheet" />
|
||||
<script type="text/javascript">
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Tooltip - Default functionality</title>
|
||||
<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>
|
||||
<link rel="stylesheet" href="../demos.css">
|
||||
<script>
|
||||
$(function() {
|
||||
$(".demo").tooltip();
|
||||
$( ".demo" ).tooltip();
|
||||
});
|
||||
</script>
|
||||
<style>
|
||||
label { display: inline-block; width: 5em; }
|
||||
label {
|
||||
display: inline-block;
|
||||
width: 5em;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="demo">
|
||||
|
||||
<p><a href="#" title="That's what this widget is">Tooltips</a> can be attached to any element. When you hover
|
||||
the element with your mouse, the title attribute is displayed in a little box next to the element, just like a native tooltip.
|
||||
</p>
|
||||
<p>But as it's not a native tooltip, it can be styled. Any themes built with
|
||||
<a href="http://themeroller.com" title="ThemeRoller, jQuery UI's theme builder application">ThemeRoller</a>
|
||||
will also style tooltip's accordingly.</p>
|
||||
<p>Tooltip's are also useful for form elements, to show some additional information in the context of each field.</p>
|
||||
<p><label for="age">Your age:</label><input id="age" title="We ask for your age only for statistical purposes." /></p>
|
||||
<p>Click the field to see the tooltip; when you tab out of the field, it gets hidden.</p>
|
||||
<p><a href="#" title="That's what this widget is">Tooltips</a> can be attached to any element. When you hover
|
||||
the element with your mouse, the title attribute is displayed in a little box next to the element, just like a native tooltip.</p>
|
||||
<p>But as it's not a native tooltip, it can be styled. Any themes built with
|
||||
<a href="http://themeroller.com" title="ThemeRoller: jQuery UI's theme builder application">ThemeRoller</a>
|
||||
will also style tooltips accordingly.</p>
|
||||
<p>Tooltips are also useful for form elements, to show some additional information in the context of each field.</p>
|
||||
<p><label for="age">Your age:</label><input id="age" title="We ask for your age only for statistical purposes."></p>
|
||||
<p>Hover the field to see the tooltip.</p>
|
||||
|
||||
</div><!-- End demo -->
|
||||
|
||||
|
||||
|
||||
<div class="demo-description">
|
||||
|
||||
<p>Hover the links above or use the tab key to cycle the focus on each element.</p>
|
||||
|
||||
</div><!-- End demo-description -->
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,71 +1,87 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Tooltip - Default 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>
|
||||
<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>
|
||||
<link rel="stylesheet" href="../demos.css">
|
||||
<style>
|
||||
label {
|
||||
display: inline-block; width: 5em;
|
||||
}
|
||||
fieldset div {
|
||||
margin-bottom: 2em;
|
||||
}
|
||||
fieldset .help {
|
||||
display: inline-block;
|
||||
}
|
||||
.ui-tooltip {
|
||||
width: 210px;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
$(function() {
|
||||
$("[title]").tooltip().unbind(".tooltip");
|
||||
$("<button/>").text("Show help").button().toggle(function() {
|
||||
$(":ui-tooltip").tooltip("open");
|
||||
}, function() {
|
||||
$(":ui-tooltip").tooltip("close");
|
||||
}).appendTo("form");
|
||||
var tooltips = $( "[title]" )
|
||||
.click(function() {
|
||||
$( this ).tooltip( $( this ).attr( "title" ) ? "open" : "close" );
|
||||
})
|
||||
.bind( "mouseover focusin mouseleave blur click", function( event ) {
|
||||
event.stopImmediatePropagation();
|
||||
})
|
||||
.tooltip();
|
||||
$( "<button>" )
|
||||
.text( "Show help" )
|
||||
.button()
|
||||
.toggle(
|
||||
function() {
|
||||
tooltips.tooltip( "open" );
|
||||
},
|
||||
function() {
|
||||
tooltips.tooltip( "close" );
|
||||
}
|
||||
)
|
||||
.appendTo( "form" );
|
||||
});
|
||||
</script>
|
||||
<style>
|
||||
label { display: inline-block; width: 5em; }
|
||||
.ui-icon { display: inline-block; }
|
||||
fieldset div {
|
||||
margin-bottom: 2em;
|
||||
}
|
||||
.ui-tooltip { width: 210px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="demo">
|
||||
|
||||
<form>
|
||||
<fieldset>
|
||||
<div>
|
||||
<label for="firstname">Firstname</label>
|
||||
<input id="firstname" name="firstname" />
|
||||
<span title="Please provide your firstname." class="ui-state-default ui-corner-all ui-icon ui-icon-help">?</span>
|
||||
</div>
|
||||
<div>
|
||||
<label for="lastname">Lastname</label>
|
||||
<input id="lastname" name="lastname" />
|
||||
<span title="Please provide also your lastname." class="ui-state-default ui-corner-all ui-icon ui-icon-help">?</span>
|
||||
</div>
|
||||
<div>
|
||||
<label for="address">Address</label>
|
||||
<input id="address" name="address" />
|
||||
<span title="Your home or work address." class="ui-state-default ui-corner-all ui-icon ui-icon-help">?</span>
|
||||
</div>
|
||||
</fieldset>
|
||||
</form>
|
||||
<form>
|
||||
<fieldset>
|
||||
<div>
|
||||
<label for="firstname">Firstname</label>
|
||||
<input id="firstname" name="firstname">
|
||||
<span title="Please provide your firstname." class="help ui-state-default ui-corner-all ui-icon ui-icon-help">?</span>
|
||||
</div>
|
||||
<div>
|
||||
<label for="lastname">Lastname</label>
|
||||
<input id="lastname" name="lastname">
|
||||
<span title="Please provide also your lastname." class="help ui-state-default ui-corner-all ui-icon ui-icon-help">?</span>
|
||||
</div>
|
||||
<div>
|
||||
<label for="address">Address</label>
|
||||
<input id="address" name="address">
|
||||
<span title="Your home or work address." class="help ui-state-default ui-corner-all ui-icon ui-icon-help">?</span>
|
||||
</div>
|
||||
</fieldset>
|
||||
</form>
|
||||
|
||||
</div><!-- End demo -->
|
||||
|
||||
|
||||
|
||||
<div class="demo-description">
|
||||
|
||||
<p>Use the button below to display the help texts. Click again to hide them. Default hover and focus events are removed to show tooltip only programmatically.</p>
|
||||
|
||||
<p>A fixed width is defined in CSS to make the tooltips look consistent when displayed all at once.</p>
|
||||
|
||||
</div><!-- End demo-description -->
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,8 +1,9 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Tooltip Demos</title>
|
||||
<link type="text/css" href="../demos.css" rel="stylesheet" />
|
||||
<link rel="stylesheet" href="../demos.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
||||
@ -1,64 +1,64 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>jQuery UI Tooltip - Default 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>
|
||||
<link type="text/css" href="../demos.css" rel="stylesheet" />
|
||||
<script type="text/javascript">
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Tooltip - Track the mouse</title>
|
||||
<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>
|
||||
<link rel="stylesheet" href="../demos.css">
|
||||
<style>
|
||||
label {
|
||||
display: inline-block;
|
||||
width: 5em;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
$(function() {
|
||||
$(".demo").tooltip({
|
||||
open: function() {
|
||||
$( ".demo" ).tooltip({
|
||||
open: function( event ) {
|
||||
var tooltip = $( ".ui-tooltip" );
|
||||
$(document).mousemove(function( event ) {
|
||||
tooltip.position( {
|
||||
function position( event ) {
|
||||
tooltip.position({
|
||||
my: "left+25 center",
|
||||
at: "right+25 center",
|
||||
of: event
|
||||
});
|
||||
})
|
||||
}
|
||||
$( document ).bind( "mousemove.tooltip-position", position );
|
||||
// trigger once to override element-relative positioning
|
||||
.mousemove();
|
||||
position( event );
|
||||
},
|
||||
close: function() {
|
||||
$(document).unbind( "mousemove" );
|
||||
$( document ).unbind( "mousemove.tooltip-position" );
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
<style>
|
||||
label { display: inline-block; width: 5em; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="demo">
|
||||
|
||||
<p><a href="#" title="That's what this widget is">Tooltips</a> can be attached to any element. When you hover
|
||||
the element with your mouse, the title attribute is displayed in a little box next to the element, just like a native tooltip.
|
||||
</p>
|
||||
<p>But as it's not a native tooltip, it can be styled. Any themes built with
|
||||
<a href="http://themeroller.com" title="ThemeRoller, jQuery UI's theme builder application">ThemeRoller</a>
|
||||
will also style tooltip's accordingly.</p>
|
||||
<p>Tooltip's are also useful for form elements, to show some additional information in the context of each field.</p>
|
||||
<p><label for="age">Your age:</label><input id="age" title="We ask for your age only for statistical purposes." /></p>
|
||||
<p>Click the field to see the tooltip; when you tab out of the field, it gets hidden.</p>
|
||||
<p><a href="#" title="That's what this widget is">Tooltips</a> can be attached to any element. When you hover
|
||||
the element with your mouse, the title attribute is displayed in a little box next to the element, just like a native tooltip.</p>
|
||||
<p>But as it's not a native tooltip, it can be styled. Any themes built with
|
||||
<a href="http://themeroller.com" title="ThemeRoller: jQuery UI's theme builder application">ThemeRoller</a>
|
||||
will also style tooltips accordingly.</p>
|
||||
<p>Tooltips are also useful for form elements, to show some additional information in the context of each field.</p>
|
||||
<p><label for="age">Your age:</label><input id="age" title="We ask for your age only for statistical purposes."></p>
|
||||
<p>Hover the field to see the tooltip.</p>
|
||||
|
||||
</div><!-- End demo -->
|
||||
|
||||
|
||||
|
||||
<div class="demo-description">
|
||||
|
||||
<p>Here the tooltips are positioned relative to the mouse, and follow the mouse while it moves above the element.</p>
|
||||
|
||||
</div><!-- End demo-description -->
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
</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>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user