Tooltip: Adding another ajax example to visual testcase. Fixing async response handling (taking IE cached response quirk into account) and simplifying fade animations a ton.

This commit is contained in:
jzaefferer 2010-10-21 21:03:48 +02:00
parent 96977edecc
commit 732a485676
2 changed files with 29 additions and 13 deletions

View File

@ -44,6 +44,24 @@
return "Loading..."; return "Loading...";
} }
}); });
// asynchronous content with caching
var content;
$("#ajax2").tooltip({
content: function(response) {
if (content) {
return content;
}
$.ajax({
url: "ajaxcontent.php",
cache: false,
success: function(result) {
content = result;
response(result);
}
});
return "Loading...";
}
});
// custom position // custom position
$("#right2").tooltip({ $("#right2").tooltip({
@ -117,6 +135,9 @@
<div id="ajax" style="width: 100px;" class="ui-widget-content" title="never be seen"> <div id="ajax" style="width: 100px;" class="ui-widget-content" title="never be seen">
gets its content via ajax gets its content via ajax
</div> </div>
<div id="ajax2" style="width: 100px;" class="ui-widget-content" title="never be seen">
gets its content via ajax, caches the response
</div>
<div id="context2" class="ui-widget ui-widget-content"> <div id="context2" class="ui-widget ui-widget-content">
<span title="something" style="border:1px solid blue">span</span> <span title="something" style="border:1px solid blue">span</span>

View File

@ -82,9 +82,12 @@ $.widget("ui.tooltip", {
this.current = target; this.current = target;
this.currentTitle = target.attr("title"); this.currentTitle = target.attr("title");
var content = this.options.content.call(target[0], function(response) { var content = this.options.content.call(target[0], function(response) {
// ignore async responses that come in after the tooltip is already hidden // IE may instantly serve a cached response, need to give it a chance to finish with _show before that
if (self.current == target) setTimeout(function() {
self._show(event, target, response); // ignore async responses that come in after the tooltip is already hidden
if (self.current == target)
self._show(event, target, response);
}, 13);
}); });
if (content) { if (content) {
self._show(event, target, content); self._show(event, target, content);
@ -111,10 +114,7 @@ $.widget("ui.tooltip", {
this.tooltip.attr("aria-hidden", "false"); this.tooltip.attr("aria-hidden", "false");
target.attr("aria-describedby", this.tooltip.attr("id")); target.attr("aria-describedby", this.tooltip.attr("id"));
if (this.tooltip.is(":animated")) this.tooltip.stop(false, true).fadeIn();
this.tooltip.stop().show().fadeTo("normal", this.opacity);
else
this.tooltip.is(':visible') ? this.tooltip.fadeTo("normal", this.opacity) : this.tooltip.fadeIn();
this._trigger( "open", event ); this._trigger( "open", event );
}, },
@ -132,12 +132,7 @@ $.widget("ui.tooltip", {
current.removeAttr("aria-describedby"); current.removeAttr("aria-describedby");
this.tooltip.attr("aria-hidden", "true"); this.tooltip.attr("aria-hidden", "true");
if (this.tooltip.is(':animated')) this.tooltip.stop(false, true).fadeOut();
this.tooltip.stop().fadeTo("normal", 0, function() {
$(this).hide().css("opacity", "");
});
else
this.tooltip.stop().fadeOut();
this._trigger( "close", event ); this._trigger( "close", event );
} }