キーアップ時にAJAX呼び出しを行う関数があり、結果が空でない場合はツールチップに表示されます。非アクティブにすると、すべてが期待どおりに機能しますが、AJAX を有効にすると、空の変数と実際の結果を返す間で「トグル」するようです。
以下は、AJAX 呼び出しを行い、ツールチップをアクティブにする部分です。
jQuery(document).ready(function() {
jQuery('.qty').keyup(function() {
var qty = jQuery(this).val();
var pid = jQuery(this).next().html();
var element = this;
jQuery.post('shopping_cart_ajax.php', {products_id: pid, products_quantity: qty}, function(data) {
if (data)
{
jQuery(element).tooltip();
jQuery(element).unbind('mouseenter mouseleave');
jQuery(element).tooltip('update', data);
jQuery(element).tooltip('show');
}
else
{
jQuery(element).tooltip('destroy');
}
});
});
});
そしてプラグイン自体：
(function($) {
var methods = {
//създаване на tooltip-а
init: function(options) {
//настройки по подразбиране
if (!options)
{
options = {
method: "hover", //метод за активация на tooltip-а по подразбиране (за момента има само hover опция)
color: "#dc143c" //цвят по подразбиране
};
}
return this.each(function() {
//намиране текста на tooltip-а
var tooltip_text = $(this).attr("tooltip");
//добавяне на тялото и стрелката
$(this).after('<div></div>');
$(this).after('<div class="tooltip_base">'+tooltip_text+'</div>');
switch (options.method)
{
case "hover":
methods.hover(this, options.color);
break;
}
});
},
//показване на tooltip-а при посочване с мишката
hover: function(object, color) {
$(object).hover(
function() {
methods.position(object, color);
$(object).next().next().fadeIn(); //показване на стрелката
$(object).next().fadeIn(); //показване на тялото
},
function() {
$(object).next().next().hide(); //скриване на стрелката
$(object).next().hide(); //скриване на тялото
}
);
},
//позициониране на tooltip-а
position: function(object, color) {
//намиране позицията на елемента, под който трябва да се появи tooltip-а
var offset = $(object).offset();
//намиране размерите на елемента
var parent_width = $(object).outerWidth();
var parent_height = $(object).outerHeight();
//намиране размерите на tooltip-а
var tooltip_width = $(object).next().outerWidth();
var tooltip_height = $(object).next().outerHeight();
//намиране вида на tooltip-а и начина на позициониране
var pos_tooltip_top;
var pos_tooltip_left;
var pos_arrow_top;
var pos_arrow_left;
var arrow_type;
if ($(object).hasClass("tooltip_top_center") == true)
{
pos_tooltip_top = offset.top-tooltip_height-5;
pos_tooltip_left = offset.left+(parent_width/2)-(tooltip_width/2);
pos_arrow_top = offset.top-5;
pos_arrow_left = offset.left+(parent_width/2)-5;
arrow_type = "tooltip_bottom_arrow";
}
else if ($(object).hasClass("tooltip_top_right") == true)
{
pos_tooltip_top = offset.top-tooltip_height-5;
pos_tooltip_left = offset.left+(parent_width/2)-12;
pos_arrow_top = offset.top-5;
pos_arrow_left = offset.left+(parent_width/2)-5;
arrow_type = "tooltip_bottom_arrow";
}
else if ($(object).hasClass("tooltip_top_left") == true)
{
pos_tooltip_top = offset.top-tooltip_height-5;
pos_tooltip_left = offset.left-tooltip_width+(parent_width/2)+12;
pos_arrow_top = offset.top-5;
pos_arrow_left = offset.left+(parent_width/2)-5;
arrow_type = "tooltip_bottom_arrow";
}
else if ($(object).hasClass("tooltip_bottom_center") == true)
{
pos_tooltip_top = offset.top+parent_height+5;
pos_tooltip_left = offset.left+(parent_width/2)-(tooltip_width/2);
pos_arrow_top = offset.top+parent_height;
pos_arrow_left = offset.left+parent_width/2-5;
arrow_type = "tooltip_top_arrow";
}
else if ($(object).hasClass("tooltip_bottom_right") == true)
{
pos_tooltip_top = offset.top+parent_height+5;
pos_tooltip_left = offset.left+(parent_width/2)-12;
pos_arrow_top = offset.top+parent_height;
pos_arrow_left = offset.left+parent_width/2-5;
arrow_type = "tooltip_top_arrow";
}
else if ($(object).hasClass("tooltip_bottom_left") == true)
{
pos_tooltip_top = offset.top+parent_height+5;
pos_tooltip_left = offset.left-tooltip_width+(parent_width/2)+12;
pos_arrow_top = offset.top+parent_height;
pos_arrow_left = offset.left+parent_width/2-5;
arrow_type = "tooltip_top_arrow";
}
else if ($(object).hasClass("tooltip_left") == true)
{
pos_tooltip_top = offset.top-(tooltip_height/2)+(parent_height/2);
pos_tooltip_left = offset.left-tooltip_width-5;
pos_arrow_top = offset.top-5+(parent_height/2);
pos_arrow_left = offset.left-5;
arrow_type = "tooltip_right_arrow";
}
else if ($(object).hasClass("tooltip_right") == true)
{
pos_tooltip_top = offset.top-(tooltip_height/2)+(parent_height/2);
pos_tooltip_left = offset.left+parent_width+5;
pos_arrow_top = offset.top-5+(parent_height/2);
pos_arrow_left = offset.left+parent_width;
arrow_type = "tooltip_left_arrow";
}
else
{
pos_tooltip_top = offset.top+parent_height+3;
pos_tooltip_left = offset.left+(parent_width/2)-(tooltip_width/2);
arrow_type = "tooltip_no_arrow";
}
//позициониране на тялото
$(object).next().css({
"top": pos_tooltip_top,
"left": pos_tooltip_left
});
//избиране на подходящата стрелка
$(object).next().next().addClass(arrow_type);
//позициониране на стрелката
$(object).next().next().css({
"top": pos_arrow_top,
"left": pos_arrow_left
});
if (color != "")
{
//задаване цвят на тялото
$(object).next().css({
"background-color": color
});
var tooltip_class = $(object).next().next().attr("class");
var arrow_color;
//задаване цвят на стрелката
switch (tooltip_class)
{
case "tooltip_top_arrow":
arrow_color = "transparent transparent "+color+" transparent";
break;
case "tooltip_bottom_arrow":
arrow_color = color+" transparent transparent transparent";
break;
case "tooltip_left_arrow":
arrow_color = "transparent "+color+" transparent transparent";
break;
case "tooltip_right_arrow":
arrow_color = "transparent transparent transparent "+color;
break;
}
$(object).next().next().css({
"border-color": arrow_color
});
}
},
//показване
show: function() {
$(this).next().next().fadeIn(); //показване на стрелката
$(this).next().fadeIn(); //показване на тялото
},
//скриване
hide: function() {
$(this).next().next().hide(); //скриване на стрелката
$(this).next().hide(); //скриване на тялото
},
//промяна на съдържанието на tooltip-а
update: function(content, color) {
if (!color)
{
color = "#dc143c";
}
$(this).attr({
"tooltip": content
});
$(this).next().html(content);
methods.position(this, color);
},
//изтриване на tooltip-а
destroy: function() {
if ($(this).next().hasClass('tooltip_base'))
{
$(this).removeAttr('tooltip');
$(this).next().next().remove();
$(this).next().remove();
$(this).unbind('mouseenter mouseleave');
}
}
};
$.fn.tooltip = function(method) {
if (methods[method])
{
return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
}
else if (typeof method === 'object' || !method)
{
return methods.init.apply(this, arguments);
}
else
{
$.error('Method '+method+' does not exist on jQuery.tooltip');
}
};
})(jQuery);