library-mirrors/jquery-ui
1
0
Fork 0
mirror of https://github.com/jquery/jquery-ui.git synced 2024-11-21 11:04:24 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Tooltip/Popup: Improve video-player demo

Browse Source
This commit is contained in:
Jörn Zaefferer 2011-05-07 15:18:29 +02:00
parent f7e8331e26
commit a2674a2c6b
1 changed files with 15 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
demos/tooltip/video-player.html
View File

@ -10,24 +10,34 @@
<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.effects.core.js"></script>
<script type="text/javascript" src="../../ui/jquery.effects.blind.js"></script>
<script type="text/javascript" src="../../tests/visual/menu/popup.js"></script>
<link type="text/css" href="../demos.css" rel="stylesheet" />
<script type="text/javascript">
$(function() {
function notify( input ) {
var msg = "Selected " + $.trim($(input).text());
$("<div/>").appendTo(document.body).text(msg).addClass("notification ui-state-highlight").position({
my: "center top+20",
$("<div/>").appendTo(document.body).text(msg).addClass("notification ui-state-default ui-corner-bottom").position({
my: "center top",
at: "center top",
of: window
}).delay(1000).fadeOut("slow", function() {
}).show({
effect: "blind"
}).delay(1000).hide({
effect: "blind",
duration: "slow"
}, function() {
$(this).remove();
});
}
$("ul").menu({
select: function(event, ui) {
// stop button from handling the click
// TODO stop button from handling the click
$(this).popup("close");
// TODO should probably be handled by poup, see ESCAPE key handler
// affects key handling
$(this).prev().focus();
notify(ui.item);
}
}).popup();
@ -75,7 +85,7 @@
.set { display: inline-block; }
.notification { position: absolute; display: inline-block; font-size: 2em; padding: 1em; border-radius: 15px; box-shadow: 2px 2px 5px -2px rgba(0,0,0,0.5); }
.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>