library-mirrors/jquery-ui
1
0
Fork 0
mirror of https://github.com/jquery/jquery-ui.git synced 2024-11-21 11:04:24 +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 delay: 250
} }
}); });
$( "#position-option" ).tooltip({ $( "#open-event" ).tooltip({
show: null,
position: { position: {
my: "left top", my: "left top",
at: "left bottom+10", at: "left bottom"
using: function( pos ) { },
$( this ).css({ open: function( event, ui ) {
left: pos.left, ui.tooltip.animate({ top: ui.tooltip.position().top + 10 }, "fast" );
top: pos.top - 10
}).animate({ top: pos.top }, "fast" );
}
} }
}); });
}); });
@ -48,16 +46,15 @@
<p>There are various ways to customize the animation of a tooltip.</p> <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 <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> <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><!-- End demo -->
<div class="demo-description"> <div class="demo-description">
<p>This demo shows how to customize animations. The tooltip is shown, after a <p>This demo shows how to customize animations using the show and hide options,
delay of 250ms, using a slide down animation, and hidden, after another delay, as well as the open event.</p>
without an animation.</p>
</div><!-- End demo-description --> </div><!-- End demo-description -->
</body> </body>

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

@ -2,7 +2,7 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8"> <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"> <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
<script src="../../jquery-1.5.1.js"></script> <script src="../../jquery-1.5.1.js"></script>
<script src="../../ui/jquery.ui.core.js"></script> <script src="../../ui/jquery.ui.core.js"></script>
@ -18,6 +18,10 @@
.photo .ui-widget-header { .photo .ui-widget-header {
margin: 1em 0; margin: 1em 0;
} }
.map {
width: 350px;
height: 350px;
}
</style> </style>
<script> <script>
$(function() { $(function() {
@ -26,16 +30,9 @@
content: function() { content: function() {
var element = $( this ); var element = $( this );
if ( element.is( "[data-geo]" ) ) { if ( element.is( "[data-geo]" ) ) {
return $( "<iframe>", { return "<img class='map' src='http://maps.google.com/maps/api/staticmap?" +
width: 425, "zoom=11&size=350x350&maptype=terrain&sensor=false&center=" +
height: 350, element.text() + "'>";
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"
});
} }
if ( element.is( "[title]" ) ) { if ( element.is( "[title]" ) ) {
return element.attr( "title" ); return element.attr( "title" );
@ -55,7 +52,7 @@
<div class="ui-widget photo"> <div class="ui-widget photo">
<div class="ui-widget-header ui-corner-all"> <div class="ui-widget-header ui-corner-all">
<h2>St. Stephen's Cathedral</h2> <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> </div>
<a href="http://en.wikipedia.org/wiki/File:Wien_Stefansdom_DSC02656.JPG"> <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"> <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 photo">
<div class="ui-widget-header ui-corner-all"> <div class="ui-widget-header ui-corner-all">
<h2>Tower Bridge</h2> <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> </div>
<a href="http://en.wikipedia.org/wiki/File:Tower_bridge_London_Twilight_-_November_2006.jpg"> <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"> <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="forms.html">Forms with tooltips</a></li>
<li><a href="tracking.html">Track the mouse</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="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> <li><a href="video-player.html">Video Player</a></li>
</ul> </ul>
</div> </div>

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

@ -2,15 +2,19 @@ commonWidgetTests( "tooltip", {
defaults: { defaults: {
content: function() {}, content: function() {},
disabled: false, disabled: false,
hide: true,
items: "[title]", items: "[title]",
position: { position: {
my: "left+15 center", my: "left+15 center",
at: "right center", at: "right center",
collision: "flip fit" collision: "flip fit"
}, },
show: true,
tooltipClass: null, tooltipClass: null,
// callbacks // 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" ); module( "tooltip: events" );
test( "programmatic triggers", function() { test( "programmatic triggers", function() {
expect( 2 ); expect( 4 );
var element = $( "#tooltipped1" ).tooltip(); var tooltip,
element = $( "#tooltipped1" ).tooltip();
element.one( "tooltipopen", function( event ) { element.one( "tooltipopen", function( event, ui ) {
tooltip = ui.tooltip;
ok( !( "originalEvent" in event ), "open" ); ok( !( "originalEvent" in event ), "open" );
strictEqual( ui.tooltip[0],
$( "#" + element.attr( "aria-describedby" ) )[0], "ui.tooltip" );
}); });
element.tooltip( "open" ); element.tooltip( "open" );
element.one( "tooltipclose", function( event ) { element.one( "tooltipclose", function( event, ui ) {
ok( !( "originalEvent" in event ), "close" ); ok( !( "originalEvent" in event ), "close" );
strictEqual( ui.tooltip[0], tooltip[0], "ui.tooltip" );
}); });
element.tooltip( "close" ); element.tooltip( "close" );
}); });

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

@ -15,6 +15,7 @@
<script src="widget_core.js"></script> <script src="widget_core.js"></script>
<script src="widget_extend.js"></script> <script src="widget_extend.js"></script>
<script src="widget_animation.js"></script>
<script src="../swarminject.js"></script> <script src="../swarminject.js"></script>
</head> </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() { content: function() {
return $( this ).attr( "title" ); return $( this ).attr( "title" );
}, },
hide: true,
items: "[title]", items: "[title]",
position: { position: {
my: "left+15 center", my: "left+15 center",
at: "right center", at: "right center",
collision: "flip fit" collision: "flip fit"
}, },
tooltipClass: null show: true,
tooltipClass: null,
// callbacks
close: null,
open: null
}, },
_create: function() { _create: function() {
@ -132,16 +138,13 @@ $.widget( "ui.tooltip", {
tooltip tooltip
.stop( true ) .stop( true )
.position( $.extend({ .position( $.extend({
of: target, of: target
using: function( pos ) { }, this.options.position ) )
// we only want to hide if there's no custom using defined .hide();
$( this ).css( pos ).hide();
}
}, this.options.position ) );
this._show( tooltip, this.options.show ); this._show( tooltip, this.options.show );
this._trigger( "open", event ); this._trigger( "open", event, { tooltip: tooltip } );
this._bind( target, { this._bind( target, {
mouseleave: "close", mouseleave: "close",
@ -175,7 +178,7 @@ $.widget( "ui.tooltip", {
target.unbind( "mouseleave.tooltip blur.tooltip" ); target.unbind( "mouseleave.tooltip blur.tooltip" );
this._trigger( "close", event ); this._trigger( "close", event, { tooltip: tooltip } );
}, },
_tooltip: function( element ) { _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 ) { $.each( { show: "fadeIn", hide: "fadeOut" }, function( method, defaultEffect ) {
$.Widget.prototype[ "_" + method ] = function( element, options, callback ) { $.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 || {}; options = options || {};
var hasOptions = !$.isEmptyObject( options ), if ( typeof options === "number" ) {
effectName = options.effect || defaultEffect; options = { duration: options };
}
hasOptions = !$.isEmptyObject( options );
options.complete = callback; options.complete = callback;
if ( options.delay ) { if ( options.delay ) {
element.delay( options.delay ); element.delay( options.delay );
@ -387,11 +398,12 @@ $.each( { show: "fadeIn", hide: "fadeOut" }, function( method, defaultEffect ) {
} else if ( effectName !== method && element[ effectName ] ) { } else if ( effectName !== method && element[ effectName ] ) {
element[ effectName ]( options.duration, options.easing, callback ); element[ effectName ]( options.duration, options.easing, callback );
} else { } else {
element.queue( function() { element.queue(function( next ) {
$( this )[ method ](); $( this )[ method ]();
if ( callback ) { if ( callback ) {
callback.call( element[ 0 ] ); callback.call( element[ 0 ] );
} }
next();
}); });
} }
}; };