library-mirrors/jquery-ui
1
0
Fork 0
mirror of https://github.com/jquery/jquery-ui.git synced 2024-10-05 01:44:18 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Merge branch 'master' into widget-factory-demo

Browse Source
This commit is contained in:
Jörn Zaefferer 2011-06-02 14:11:55 +02:00
commit 8deb745a4a
9 changed files with 319 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
demos/tooltip/custom-animation.html
View File

@ -26,16 +26,14 @@
delay: 250
}
});
$( "#position-option" ).tooltip({
$( "#open-event" ).tooltip({
show: null,
position: {
my: "left top",
at: "left bottom+10",
using: function( pos ) {
$( this ).css({
left: pos.left,
top: pos.top - 10
}).animate({ top: pos.top }, "fast" );
}
at: "left bottom"
},
open: function( event, ui ) {
ui.tooltip.animate({ top: ui.tooltip.position().top + 10 }, "fast" );
}
});
});
@ -48,16 +46,15 @@
<p>There are various ways to customize the animation of a tooltip.</p>
<p>You can use the <a id="show-option" href="http://jqueryui.com/demos/tooltip/#option-show" title="slide down on show">show</a> and
<a id="hide-option" href="http://jqueryui.com/demos/tooltip/#option-hide" title="explode on hide">hide</a> options.</p>
<p>You can also use the <a id="position-option" href="http://jqueryui.com/demos/tooltip/#option-position" title="move down on show">position option</a>.</p>
<p>You can also use the <a id="open-event" href="http://jqueryui.com/demos/tooltip/#event-open" title="move down on show">open event</a>.</p>
</div><!-- End demo -->
<div class="demo-description">
<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>
<p>This demo shows how to customize animations using the show and hide options,
as well as the open event.</p>
</div><!-- End demo-description -->
</body>

23
demos/tooltip/delegation-mixbag.html → demos/tooltip/custom-content.html
View File

@ -2,7 +2,7 @@
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Tooltip - Default demo</title>
<title>jQuery UI Tooltip - Custom content</title>
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
<script src="../../jquery-1.5.1.js"></script>
<script src="../../ui/jquery.ui.core.js"></script>
@ -18,6 +18,10 @@
.photo .ui-widget-header {
margin: 1em 0;
}
.map {
width: 350px;
height: 350px;
}
</style>
<script>
$(function() {
@ -26,16 +30,9 @@
content: function() {
var element = $( this );
if ( element.is( "[data-geo]" ) ) {
return $( "<iframe>", {
width: 425,
height: 350,
frameborder: 0,
scrolling: "no",
marginheight: 0,
marginwidth: 0,
src: "http://maps.google.com/maps?ll=" + element.attr( "data-geo" ) +
"&z=11&t=p&output=embed"
});
return "<img class='map' src='http://maps.google.com/maps/api/staticmap?" +
"zoom=11&size=350x350&maptype=terrain&sensor=false&center=" +
element.text() + "'>";
}
if ( element.is( "[title]" ) ) {
return element.attr( "title" );
@ -55,7 +52,7 @@
<div class="ui-widget photo">
<div class="ui-widget-header ui-corner-all">
<h2>St. Stephen's Cathedral</h2>
<h3><a href="http://maps.google.com/maps?q=vienna,+austria&z=11" data-geo="48.208174,16.373819">Vienna, Austria</a></h3>
<h3><a href="http://maps.google.com/maps?q=vienna,+austria&z=11" data-geo>Vienna, Austria</a></h3>
</div>
<a href="http://en.wikipedia.org/wiki/File:Wien_Stefansdom_DSC02656.JPG">
<img src="images/st-stephens.jpg" alt="St. Stephen's Cathedral" class="ui-corner-all">
@ -65,7 +62,7 @@
<div class="ui-widget photo">
<div class="ui-widget-header ui-corner-all">
<h2>Tower Bridge</h2>
<h3><a href="http://maps.google.com/maps?q=london,+england&z=11" data-geo="51.500152,-0.126236">London, England</a></h3>
<h3><a href="http://maps.google.com/maps?q=london,+england&z=11" data-geo>London, England</a></h3>
</div>
<a href="http://en.wikipedia.org/wiki/File:Tower_bridge_London_Twilight_-_November_2006.jpg">
<img src="images/tower-bridge.jpg" alt="Tower Bridge" class="ui-corner-all">

2
demos/tooltip/index.html
View File

@ -14,7 +14,7 @@
<li><a href="forms.html">Forms with tooltips</a></li>
<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="custom-content.html">Custom content</a></li>
<li><a href="video-player.html">Video Player</a></li>
</ul>
</div>

6
tests/unit/tooltip/tooltip_defaults.js
View File

@ -2,15 +2,19 @@ commonWidgetTests( "tooltip", {
defaults: {
content: function() {},
disabled: false,
hide: true,
items: "[title]",
position: {
my: "left+15 center",
at: "right center",
collision: "flip fit"
},
show: true,
tooltipClass: null,
// callbacks
create: null
close: null,
create: null,
open: null
}
});

13
tests/unit/tooltip/tooltip_events.js
View File

@ -3,16 +3,21 @@
module( "tooltip: events" );
test( "programmatic triggers", function() {
expect( 2 );
var element = $( "#tooltipped1" ).tooltip();
expect( 4 );
var tooltip,
element = $( "#tooltipped1" ).tooltip();
element.one( "tooltipopen", function( event ) {
element.one( "tooltipopen", function( event, ui ) {
tooltip = ui.tooltip;
ok( !( "originalEvent" in event ), "open" );
strictEqual( ui.tooltip[0],
$( "#" + element.attr( "aria-describedby" ) )[0], "ui.tooltip" );
});
element.tooltip( "open" );
element.one( "tooltipclose", function( event ) {
element.one( "tooltipclose", function( event, ui ) {
ok( !( "originalEvent" in event ), "close" );
strictEqual( ui.tooltip[0], tooltip[0], "ui.tooltip" );
});
element.tooltip( "close" );
});

1
tests/unit/widget/widget.html
View File

@ -15,6 +15,7 @@
<script src="widget_core.js"></script>
<script src="widget_extend.js"></script>
<script src="widget_animation.js"></script>
<script src="../swarminject.js"></script>
</head>

257
tests/unit/widget/widget_animation.js Normal file
View File

@ -0,0 +1,257 @@
module( "widget animation", (function() {
var show = $.fn.show,
fadeIn = $.fn.fadeIn,
slideDown = $.fn.slideDown;
return {
setup: function() {
$.widget( "ui.testWidget", {
_create: function() {
this.element.hide();
},
show: function( fn ) {
this._show( this.element, this.options.show, fn );
}
});
$.effects = { effect: { testEffect: $.noop } };
},
teardown: function() {
delete $.ui.testWidget;
delete $.effects.effect.testEffect;
$.fn.show = show;
$.fn.fadeIn = fadeIn;
$.fn.slideDown = slideDown;
}
};
}()));
asyncTest( "show: null", function() {
expect( 4 );
var element = $( "#widget" ).testWidget(),
hasRun = false;
$.fn.show = function() {
ok( true, "show called" );
equal( arguments.length, 0, "no args passed to show" );
};
element
.delay( 50 )
.queue(function( next ) {
ok( !hasRun, "queue before show" );
next();
})
.testWidget( "show", function() {
hasRun = true;
})
.queue(function( next ) {
ok( hasRun, "queue after show" );
start();
next();
});
});
asyncTest( "show: true", function() {
expect( 4 );
var element = $( "#widget" ).testWidget({
show: true
}),
hasRun = false;
$.fn.fadeIn = function( duration, easing, complete ) {
return this.queue(function( next ) {
strictEqual( duration, undefined, "duration" );
strictEqual( easing, undefined, "easing" );
complete();
next();
});
};
element
.delay( 50 )
.queue(function( next ) {
ok( !hasRun, "queue before show" );
next();
})
.testWidget( "show", function() {
hasRun = true;
})
.queue(function( next ) {
ok( hasRun, "queue after show" );
start();
next();
});
});
asyncTest( "show: number", function() {
expect( 4 );
var element = $( "#widget" ).testWidget({
show: 123
}),
hasRun = false;
$.fn.fadeIn = function( duration, easing, complete ) {
return this.queue(function( next ) {
strictEqual( duration, 123, "duration" );
strictEqual( easing, undefined, "easing" );
complete();
next();
});
};
element
.delay( 50 )
.queue(function( next ) {
ok( !hasRun, "queue before show" );
next();
})
.testWidget( "show", function() {
hasRun = true;
})
.queue(function( next ) {
ok( hasRun, "queue after show" );
start();
next();
});
});
asyncTest( "show: core animation", function() {
expect( 4 );
var element = $( "#widget" ).testWidget({
show: "slideDown"
}),
hasRun = false;
$.fn.slideDown = function( duration, easing, complete ) {
return this.queue(function( next ) {
strictEqual( duration, undefined, "duration" );
strictEqual( easing, undefined, "easing" );
complete();
next();
});
};
element
.delay( 50 )
.queue(function( next ) {
ok( !hasRun, "queue before show" );
next();
})
.testWidget( "show", function() {
hasRun = true;
})
.queue(function( next ) {
ok( hasRun, "queue after show" );
start();
next();
});
});
asyncTest( "show: effect", function() {
expect( 5 );
var element = $( "#widget" ).testWidget({
show: "testEffect"
}),
hasRun = false;
$.fn.show = function( options ) {
return this.queue(function( next ) {
equal( options.effect, "testEffect", "effect" );
ok( !("duration" in options), "duration" );
ok( !("easing" in options), "easing" );
options.complete();
next();
});
};
element
.delay( 50 )
.queue(function( next ) {
ok( !hasRun, "queue before show" );
next();
})
.testWidget( "show", function() {
hasRun = true;
})
.queue(function( next ) {
ok( hasRun, "queue after show" );
start();
next();
});
});
asyncTest( "show: object(core animation)", function() {
expect( 4 );
var element = $( "#widget" ).testWidget({
show: {
effect: "slideDown",
duration: 123,
easing: "testEasing"
}
}),
hasRun = false;
$.fn.slideDown = function( duration, easing, complete ) {
return this.queue(function( next ) {
equal( duration, 123, "duration" );
equal( easing, "testEasing", "easing" );
complete();
next();
});
};
element
.delay( 50 )
.queue(function( next ) {
ok( !hasRun, "queue before show" );
next();
})
.testWidget( "show", function() {
hasRun = true;
})
.queue(function( next ) {
ok( hasRun, "queue after show" );
start();
next();
});
});
asyncTest( "show: object(effect)", function() {
expect( 3 );
var element = $( "#widget" ).testWidget({
show: {
effect: "testEffect",
duration: 123,
easing: "testEasing"
}
}),
hasRun = false;
$.fn.show = function( options ) {
return this.queue(function( next ) {
deepEqual( options, {
effect: "testEffect",
duration: 123,
easing: "testEasing",
complete: options.complete
});
options.complete();
next();
});
};
element
.delay( 50 )
.queue(function( next ) {
ok( !hasRun, "queue before show" );
next();
})
.testWidget( "show", function() {
hasRun = true;
})
.queue(function( next ) {
ok( hasRun, "queue after show" );
start();
next();
});
});

21
ui/jquery.ui.tooltip.js vendored
View File

@ -22,13 +22,19 @@ $.widget( "ui.tooltip", {
content: function() {
return $( this ).attr( "title" );
},
hide: true,
items: "[title]",
position: {
my: "left+15 center",
at: "right center",
collision: "flip fit"
},
tooltipClass: null
show: true,
tooltipClass: null,
// callbacks
close: null,
open: null
},
_create: function() {
@ -132,16 +138,13 @@ $.widget( "ui.tooltip", {
tooltip
.stop( true )
.position( $.extend({
of: target,
using: function( pos ) {
// we only want to hide if there's no custom using defined
$( this ).css( pos ).hide();
}
}, this.options.position ) );
of: target
}, this.options.position ) )
.hide();
this._show( tooltip, this.options.show );
this._trigger( "open", event );
this._trigger( "open", event, { tooltip: tooltip } );
this._bind( target, {
mouseleave: "close",
@ -175,7 +178,7 @@ $.widget( "ui.tooltip", {
target.unbind( "mouseleave.tooltip blur.tooltip" );
this._trigger( "close", event );
this._trigger( "close", event, { tooltip: tooltip } );
},
_tooltip: function( element ) {

18
ui/jquery.ui.widget.js vendored
View File

@ -375,9 +375,20 @@ $.Widget.prototype = {
$.each( { show: "fadeIn", hide: "fadeOut" }, function( method, defaultEffect ) {
$.Widget.prototype[ "_" + method ] = function( element, options, callback ) {
if ( typeof options === "string" ) {
options = { effect: options };
}
var hasOptions,
effectName = !options ?
method :
options === true || typeof options === "number" ?
defaultEffect :
options.effect || defaultEffect;
options = options || {};
var hasOptions = !$.isEmptyObject( options ),
effectName = options.effect || defaultEffect;
if ( typeof options === "number" ) {
options = { duration: options };
}
hasOptions = !$.isEmptyObject( options );
options.complete = callback;
if ( options.delay ) {
element.delay( options.delay );
@ -387,11 +398,12 @@ $.each( { show: "fadeIn", hide: "fadeOut" }, function( method, defaultEffect ) {
} else if ( effectName !== method && element[ effectName ] ) {
element[ effectName ]( options.duration, options.easing, callback );
} else {
element.queue( function() {
element.queue(function( next ) {
$( this )[ method ]();
if ( callback ) {
callback.call( element[ 0 ] );
}
next();
});
}
};