|
14 | 14 | <link type="text/css" href="../demos.css" rel="stylesheet" /> |
15 | 15 | <script type="text/javascript"> |
16 | 16 | $(function() { |
| 17 | + function notify( input ) { |
| 18 | + var msg = "Selected " + $.trim($(input).text()); |
| 19 | + $("<div/>").appendTo(document.body).text(msg).addClass("notification ui-state-highlight").position({ |
| 20 | + my: "center top+20", |
| 21 | + at: "center top", |
| 22 | + of: window |
| 23 | + }).delay(1000).fadeOut("slow", function() { |
| 24 | + $(this).remove(); |
| 25 | + }); |
| 26 | + } |
| 27 | + $("ul").menu({ |
| 28 | + select: function(event, ui) { |
| 29 | + // stop button from handling the click |
| 30 | + $(this).popup("close"); |
| 31 | + notify(ui.item); |
| 32 | + } |
| 33 | + }).popup(); |
| 34 | + |
17 | 35 | $("button").each(function() { |
18 | 36 | $(this).button({ |
19 | 37 | icons: { |
20 | 38 | primary: $(this).data("icon") |
21 | 39 | }, |
22 | 40 | text: !!$(this).attr("title") |
| 41 | + }).click(function() { |
| 42 | + // TODO don't notify if the button is opening a popup |
| 43 | + notify(this); |
23 | 44 | }); |
24 | 45 | }); |
25 | | - $(".set").buttonset(); |
26 | | - |
27 | | - $("ul").menu({ |
28 | | - select: function() { |
29 | | - // would also execute some other action here |
30 | | - $(this).popup("close"); |
31 | | - } |
32 | | - }).popup({ |
33 | | - trigger: $(".menu") |
| 46 | + $(".set").buttonset({ |
| 47 | + items: "button" |
34 | 48 | }); |
35 | 49 |
|
| 50 | + |
36 | 51 | $(".demo").tooltip({ |
37 | 52 | position: { |
38 | 53 | my: "center top", |
|
57 | 72 | background: rgba(20, 20, 20, 1); |
58 | 73 | color: white; |
59 | 74 | } |
| 75 | + |
| 76 | + .set { display: inline-block; } |
| 77 | + |
| 78 | + .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); } |
60 | 79 | </style> |
61 | 80 | </head> |
62 | 81 | <body> |
|
69 | 88 | <button data-icon="ui-icon-circle-arrow-n" title="I like this">Like</button> |
70 | 89 | <button data-icon="ui-icon-circle-arrow-s">I dislike this</button> |
71 | 90 | </span> |
72 | | - <span class="set"> |
| 91 | + <div class="set"> |
73 | 92 | <button data-icon="ui-icon-circle-plus" title="Add to Watch Later">Add to</button> |
74 | 93 | <button class="menu" data-icon="ui-icon-triangle-1-s">Add to favorites or playlist</button> |
75 | | - </span> |
| 94 | + <ul> |
| 95 | + <li> |
| 96 | + <a href="#">Favorites</a> |
| 97 | + </li> |
| 98 | + <li> |
| 99 | + <a href="#">Watch Later</a> |
| 100 | + </li> |
| 101 | + <li> |
| 102 | + <a href="#">New Playlist...</a> |
| 103 | + </li> |
| 104 | + </ul> |
| 105 | + </div> |
76 | 106 | <button title="Share this video">Share</button> |
77 | 107 | <button data-icon="ui-icon-alert">Flag as inappropiate</button> |
78 | | - <ul> |
79 | | - <li> |
80 | | - <a href="#">Favorites</a> |
81 | | - </li> |
82 | | - <li> |
83 | | - <a href="#">Watch Later</a> |
84 | | - </li> |
85 | | - <li> |
86 | | - <a href="#">New Playlist...</a> |
87 | | - </li> |
88 | | - </ul> |
89 | 108 | </div> |
90 | 109 | </div> |
91 | 110 |
|
|
0 commit comments