library-mirrors/jquery-ui
1
0
Fork 0
mirror of https://github.com/jquery/jquery-ui.git synced 2025-01-07 20:34:24 +00:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

Popup/Tooltip: Fix tab order and add notifications (on select) in

Browse Source 
video-player demo.
This commit is contained in:
Jörn Zaefferer 2011-05-06 19:43:47 +02:00
parent fbe982b9fb
commit 2cf85da23f
2 changed files with 43 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -14,25 +14,40 @@
<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",
at: "center top",
of: window
}).delay(1000).fadeOut("slow", function() {
$(this).remove();
});
}
$("ul").menu({
select: function(event, ui) {
// stop button from handling the click
$(this).popup("close");
notify(ui.item);
}
}).popup();
$("button").each(function() {
$(this).button({
icons: {
primary: $(this).data("icon")
},
text: !!$(this).attr("title")
}).click(function() {
// TODO don't notify if the button is opening a popup
notify(this);
});
});
$(".set").buttonset();
$("ul").menu({
select: function() {
// would also execute some other action here
$(this).popup("close");
}
}).popup({
trigger: $(".menu")
$(".set").buttonset({
items: "button"
});
$(".demo").tooltip({
position: {
my: "center top",
@ -57,6 +72,10 @@
background: rgba(20, 20, 20, 1);
color: white;
}
.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); }
</style>
</head>
<body>
@ -69,23 +88,23 @@
<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>
<span class="set">
<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>
</span>
<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>
<ul>
<li>
<a href="#">Favorites</a>
</li>
<li>
<a href="#">Watch Later</a>
</li>
<li>
<a href="#">New Playlist...</a>
</li>
</ul>
</div>
</div>

2
tests/visual/menu/popup.js
View File

@ -43,6 +43,8 @@ $.widget( "ui.popup", {
if (event.keyCode == $.ui.keyCode.SPACE) {
event.preventDefault()
}
// TODO handle keydown to open popup?
//if (event.keyCode == $.ui.keyCode.SPACE) { .. }
},
click: function( event ) {
event.preventDefault();