<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",
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>
<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>
projects / jquery-ui.git / commitdiff