diff options
| author | Jörn Zaefferer <joern.zaefferer@gmail.com> | 2011-05-06 19:43:47 +0200 |
|---|---|---|
| committer | Jörn Zaefferer <joern.zaefferer@gmail.com> | 2011-05-07 00:43:07 +0200 |
| commit | 2cf85da23fde6f067bf197f60b458d1afe78a6b5 (patch) | |
| tree | 2d6d6f49edb4400dceb4cb15bdc4e772dd8aecdd /demos/tooltip | |
| parent | fbe982b9fbd7ac50fc08a8e539c7a7d9be5089b2 (diff) | |
| download | jquery-ui-2cf85da23fde6f067bf197f60b458d1afe78a6b5.tar.gz jquery-ui-2cf85da23fde6f067bf197f60b458d1afe78a6b5.zip | |
Popup/Tooltip: Fix tab order and add notifications (on select) in
video-player demo.
Diffstat (limited to 'demos/tooltip')
| -rw-r--r-- | demos/tooltip/video-player.html | 63 |
1 files changed, 41 insertions, 22 deletions
diff --git a/demos/tooltip/video-player.html b/demos/tooltip/video-player.html index 2e2419760..473c6a6a3 100644 --- a/demos/tooltip/video-player.html +++ b/demos/tooltip/video-player.html @@ -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> |