aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorJörn Zaefferer <joern.zaefferer@gmail.com>2011-06-02 14:11:55 +0200
committerJörn Zaefferer <joern.zaefferer@gmail.com>2011-06-02 14:11:55 +0200
commit8deb745a4a29351ef1f1e240b06e10bbb37579e5 (patch)
treedae42f89f3bfc24bd5709657c9f8b9614ee7f8fd
parentafe0f72945170879571ebaf060a816b39c9871b8 (diff)
parent2a27499ee4ab8076f7c342934af63ad4827f2533 (diff)
downloadjquery-ui-8deb745a4a29351ef1f1e240b06e10bbb37579e5.tar.gz
jquery-ui-8deb745a4a29351ef1f1e240b06e10bbb37579e5.zip
Merge branch 'master' into widget-factory-demo
Diffstat
-rw-r--r--demos/tooltip/custom-animation.html21
-rw-r--r--demos/tooltip/custom-content.html (renamed from demos/tooltip/delegation-mixbag.html)23
-rw-r--r--demos/tooltip/index.html2
-rw-r--r--tests/unit/tooltip/tooltip_defaults.js6
-rw-r--r--tests/unit/tooltip/tooltip_events.js13
-rw-r--r--tests/unit/widget/widget.html1
-rw-r--r--tests/unit/widget/widget_animation.js257
-rw-r--r--ui/jquery.ui.tooltip.js21
-rw-r--r--ui/jquery.ui.widget.js18
9 files changed, 319 insertions, 43 deletions
diff --git a/demos/tooltip/custom-animation.html b/demos/tooltip/custom-animation.html
index e96960f47..c7d1aa5b8 100644
--- a/demos/tooltip/custom-animation.html
+++ b/demos/tooltip/custom-animation.html
@@ -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>
diff --git a/demos/tooltip/delegation-mixbag.html b/demos/tooltip/custom-content.html
index 5b1fa4119..e84a7104b 100644
--- a/demos/tooltip/delegation-mixbag.html
+++ b/demos/tooltip/custom-content.html
@@ -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">
diff --git a/demos/tooltip/index.html b/demos/tooltip/index.html
index 460c494e3..6e7c6836e 100644
--- a/demos/tooltip/index.html
+++ b/demos/tooltip/index.html
@@ -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>
diff --git a/tests/unit/tooltip/tooltip_defaults.js b/tests/unit/tooltip/tooltip_defaults.js
index ded3d4558..4b687bdcb 100644
--- a/tests/unit/tooltip/tooltip_defaults.js
+++ b/tests/unit/tooltip/tooltip_defaults.js
@@ -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
}
});
diff --git a/tests/unit/tooltip/tooltip_events.js b/tests/unit/tooltip/tooltip_events.js
index 61026882e..29220705f 100644
--- a/tests/unit/tooltip/tooltip_events.js
+++ b/tests/unit/tooltip/tooltip_events.js
@@ -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" );
});
diff --git a/tests/unit/widget/widget.html b/tests/unit/widget/widget.html
index 183537612..b06aa19f8 100644
--- a/tests/unit/widget/widget.html
+++ b/tests/unit/widget/widget.html
@@ -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>
diff --git a/tests/unit/widget/widget_animation.js b/tests/unit/widget/widget_animation.js
new file mode 100644
index 000000000..8ef55aa11
--- /dev/null
+++ b/tests/unit/widget/widget_animation.js
@@ -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();
+ });
+});
diff --git a/ui/jquery.ui.tooltip.js b/ui/jquery.ui.tooltip.js
index d30e49c66..f19061bc3 100644
--- a/ui/jquery.ui.tooltip.js
+++ b/ui/jquery.ui.tooltip.js
@@ -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 ) {
diff --git a/ui/jquery.ui.widget.js b/ui/jquery.ui.widget.js
index da52a5a9c..00bc07c4f 100644
--- a/ui/jquery.ui.widget.js
+++ b/ui/jquery.ui.widget.js
@@ -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();
});
}
};
generated by cgit v1.2.3 (git 2.39.1) at 2025-01-07 00:16:12 +0000