Skip to content
Permalink
Browse files

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

video-player demo.
  • Loading branch information...
jzaefferer committed May 6, 2011
1 parent fbe982b commit 2cf85da23fde6f067bf197f60b458d1afe78a6b5
Showing with 43 additions and 22 deletions.
  1. +41 −22 demos/tooltip/video-player.html
  2. +2 −0 tests/visual/menu/popup.js
@@ -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>

@@ -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();

0 comments on commit 2cf85da

Please sign in to comment.
You can’t perform that action at this time.