aboutsummaryrefslogtreecommitdiffstats
path: root/demos/tooltip/video-player.html
diff options
context:
space:
mode:
Diffstat (limited to 'demos/tooltip/video-player.html')
-rw-r--r--demos/tooltip/video-player.html32
1 files changed, 31 insertions, 1 deletions
diff --git a/demos/tooltip/video-player.html b/demos/tooltip/video-player.html
index aee2cee2d..ce349d11e 100644
--- a/demos/tooltip/video-player.html
+++ b/demos/tooltip/video-player.html
@@ -28,6 +28,9 @@
background: rgba(20, 20, 20, 1);
color: white;
}
+ .ui-menu {
+ position: absolute;
+ }
.set {
display: inline-block;
}
@@ -71,7 +74,7 @@
},
text: !!$( this ).attr( "title" )
});
- button.click(function() {
+ button.not( ".menu" ).click(function() {
notify( button );
});
});
@@ -79,6 +82,27 @@
items: "button"
});
+ $( "button.menu" )
+ .click(function() {
+ $( document ).tooltip( "close", { currentTarget: this });
+ var menu = $( this ).next().show().position({
+ my: "left top",
+ at: "left bottom",
+ of: this
+ });
+ $( document ).one( "click", function() {
+ menu.hide();
+ });
+ return false;
+ })
+ .next()
+ .hide()
+ .menu({
+ selected: function( event, ui ) {
+ notify( ui.item );
+ }
+ });
+
$( document ).tooltip({
position: {
my: "center top",
@@ -105,6 +129,12 @@
<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>Favorites</li>
+ <li>Funnees</li>
+ <li></li>
+ <li>New playlist...</li>
+ </ul>
</div>
<button title="Share this video">Share</button>
<button data-icon="ui-icon-alert">Flag as inappropriate</button>