Skip to content
Permalink
Browse files

Merge branch 'master' into effects-unit

  • Loading branch information...
gnarf committed May 4, 2011
2 parents c5c65db + f5ee22c commit d61e0656c59761cf9729d2aacbc16d74e576a440
@@ -11,15 +11,14 @@
<link type="text/css" href="../demos.css" rel="stylesheet" />
<script type="text/javascript">
$(function() {
// TODO overhaul this with custom animation API
$(".demo").tooltip({
open: function() {
$(".ui-tooltip").stop(false, true).hide().slideDown();
show: {
effect: "slideDown",
delay: 250
},
close: function() {
$(".ui-tooltip").stop(false, false).show().slideUp(function() {
$(this).remove();
});
hide: {
effect: "hide",
delay: 250
}
});
});
@@ -48,7 +47,9 @@

<div class="demo-description">

<p>Here the tooltips are positioned relative to the mouse, and follow the mouse while it moves above the element.</p>
<p>This demo shows how to customize animations. The tooltip is shown, after a
delay of 250ms, using a slide down animation, and hidden, after another delay,
without an animation.</p>

</div><!-- End demo-description -->

@@ -14,7 +14,7 @@ <h4>Examples</h4>
<li><a href="tracking.html">Track the mouse</a></li>
<li><a href="custom-animation.html">Custom animation</a></li>
<li><a href="delegation-mixbag.html">Delegation Mixbag</a></li>
<li><a href="lots.html">Lots</a></li>
<li><a href="video-player.html">Video Player</a></li>
</ul>
</div>

@@ -0,0 +1,101 @@
<!doctype html>
<html lang="en">
<head>
<title>jQuery UI Tooltip - Video Player demo</title>
<link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" />
<script type="text/javascript" src="../../jquery-1.5.1.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.position.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.tooltip.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.button.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.menu.js"></script>
<script type="text/javascript" src="../../tests/visual/menu/popup.js"></script>
<link type="text/css" href="../demos.css" rel="stylesheet" />
<script type="text/javascript">
$(function() {
$("button").each(function() {
$(this).button({
icons: {
primary: $(this).data("icon")
},
text: !!$(this).attr("title")
});
});
$(".set").buttonset();
// TODO hide the tooltip when clicking the button
$("ul").menu().popup({
trigger: $(".menu")
});
$(".demo").tooltip({
position: {
my: "center top",
at: "center bottom+5",
},
show: {
duration: "fast"
},
hide: {
effect: "hide"
}
});
});
</script>
<style>
.player { width: 500px; height: 300px; border: 2px groove gray; background: rgb(200, 200, 200); text-align: center; line-height: 300px; }
/* TODO load from jquery.ui.popup.css */
.ui-popup { position: absolute; z-index: 5000; }
.ui-tooltip {
border: 1px solid white;
background: rgba(20, 20, 20, 1);
color: white;
}
</style>
</head>
<body>

<div class="demo">

<div class="player">Here Be Video (HTML5?)</div>
<div class="tools">
<span class="set">
<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">
<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>
<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>

</div><!-- End demo -->



<div class="demo-description">

<p>A fake video player with like/share/stats button, each with a custom-styled tooltip.</p>

</div><!-- End demo-description -->



</body>
</html>
@@ -13,23 +13,26 @@ test("accessibility", function () {
var item0 = $("li:eq(0) a");

ok( ac.hasClass("ui-menu ui-widget ui-widget-content ui-corner-all"), "menu class");
equals( ac.attr("role"), "listbox", "main role");
equals( ac.attr("role"), "menu", "main role");
ok( !ac.attr("aria-activedescendant"), "aria attribute not yet active");

var item = ac.find( "li:first" ).find( "a" ).attr( "id", "xid" ).end();
ac.menu( "focus", $.Event(), item );
equals( ac.attr("aria-activedescendant"), "xid", "aria attribute, id from dom");

var item = ac.find( "li:last" );
ac.menu( "focus", $.Event(), item );
equals( ac.attr("aria-activedescendant"), "menu1-activedescendant", "aria attribute, generated id");
equals( ac.attr("aria-activedescendant"), "menu1-4", "aria attribute, generated id");
});

test("items class and role", function () {
var ac = $('#menu1').menu();
expect(1 + 4 * $("li",ac).length);
expect(1 + 5 * $("li",ac).length);
ok( ($("li",ac).length > 0 ), "number of menu items");
$("li",ac).each(function(item) {
ok( $(this).hasClass("ui-menu-item"), "menu item ("+ item + ") class for item");
equals( $(this).attr("role"), "menuitem", "menu item ("+ item + ") role");
equals( $(this).attr("role"), "presentation", "menu item ("+ item + ") role");
equals( $("a", this).attr("role"), "menuitem", "menu item ("+ item + ") role");
ok( $("a",this).hasClass("ui-corner-all"), "a element class for menu item ("+ item + ") ");
equals( $("a",this).attr("tabindex"), "-1", "a element tabindex for menu item ("+ item + ") ");
});
@@ -1,5 +1,10 @@
(function( $ ) {

function scrollTopSupport() {
$( window ).scrollTop( 1 );
return $( window ).scrollTop() === 1;
}

module( "position" );

test( "my, at, of", function() {
@@ -161,11 +166,7 @@ test( "of", function() {
left: $( window ).width() - 10
}, "window as jQuery object" );

var scrollTopSupport = (function() {
$( window ).scrollTop( 1 );
return $( window ).scrollTop() === 1;
}() );
if ( scrollTopSupport ) {
if ( scrollTopSupport() ) {
$( window ).scrollTop( 500 ).scrollLeft( 200 );
$( "#elx" ).position({
my: "right bottom",
@@ -311,6 +312,22 @@ test( "collision: fit, with offset", function() {
}, { top: 0, left: 0 }, "left top, negative offset" );
});

test( "collision: fit, window scrolled", function() {
if ( scrollTopSupport() ) {
var win = $( window );
win.scrollTop( 300 ).scrollLeft( 200 );
collisionTest({
collision: "fit",
at: "left-100 top-100"
}, { top: 300, left: 200 }, "top left" );
collisionTest2({
collision: "fit",
at: "right+100 bottom+100"
}, { top: 300 + win.height() - 10, left: 200 + win.width() - 10 }, "right bottom" );
win.scrollTop( 0 ).scrollLeft( 0 );
}
});

test( "collision: flip, no offset", function() {
collisionTest({
collision: "flip"

0 comments on commit d61e065

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