Я не могу вызвать функцию плагина jquery вне кода плагина
Это мое определение
$(".HideOnClick").live({ click: function () { deactive_tiptip() } });
Вот как я называю это внутри заголовка HTML-элементов
<a href=# class=HideOnClick>Close Me</a>
Вот как я могу добавить плагин TipTip к своему контенту
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
<script type="text/javascript" src="http://static.monstermmorpg.com/js_files/jquery_1_6_2_min.js"></script>
<script type="text/javascript" src="http://static.monstermmorpg.com/js_files/jquery_tipTip_minified.js"></script>
</asp:Content>
Но это дает функции неопределенную ошибку. Плагин работает отлично.
Это исходный код плагина
/*
* TipTip
* Copyright 2010 Drew Wilson
* www.drewwilson.com
* code.drewwilson.com/entry/tiptip-jquery-plugin
*
* Version 1.3 - Updated: Mar. 23, 2010
*
* This Plug-In will create a custom tooltip to replace the default
* browser tooltip. It is extremely lightweight and very smart in
* that it detects the edges of the browser window and will make sure
* the tooltip stays within the current window size. As a result the
* tooltip will adjust itself to be displayed above, below, to the left
* or to the right depending on what is necessary to stay within the
* browser window. It is completely customizable as well via CSS.
*
* This TipTip jQuery plug-in is dual licensed under the MIT and GPL licenses:
* http://www.opensource.org/licenses/mit-license.php
* http://www.gnu.org/licenses/gpl.html
*/
(function($){
$.fn.tipTip = function(options) {
var defaults = {
activation: "hover",
keepAlive: false,
sticky: false,
maxWidth: "200px",
edgeOffset: 3,
defaultPosition: "bottom",
delay: 400,
fadeIn: 200,
fadeOut: 200,
attribute: "title",
content: false, // HTML or String to fill TipTIp with
enter: function(){},
exit: function(){}
};
var opts = $.extend(defaults, options);
// Setup tip tip elements and render them to the DOM
if($("#tiptip_holder").length <= 0){
var tiptip_holder = $('<div id="tiptip_holder" style="max-width:'+ opts.maxWidth +';"></div>');
var tiptip_content = $('<div id="tiptip_content"></div>');
var tiptip_arrow = $('<div id="tiptip_arrow"></div>');
$("body").append(tiptip_holder.html(tiptip_content).prepend(tiptip_arrow.html('<div id="tiptip_arrow_inner"></div>')));
} else {
var tiptip_holder = $("#tiptip_holder");
var tiptip_content = $("#tiptip_content");
var tiptip_arrow = $("#tiptip_arrow");
}
return this.each(function(){
var org_elem = $(this);
if(opts.content){
var org_title = opts.content;
} else {
var org_title = org_elem.attr(opts.attribute);
}
if(org_title != ""){
if(!opts.content){
org_elem.removeAttr(opts.attribute); //remove original Attribute
}
var timeout = false;
if(opts.activation == "hover"){
org_elem.hover(function(){
active_tiptip();
}, function(){
if(!opts.keepAlive){
deactive_tiptip();
}
});
if(opts.keepAlive){
tiptip_holder.hover(function(){}, function(){
});
}
} else if(opts.activation == "focus"){
org_elem.focus(function(){
active_tiptip();
}).blur(function(){
deactive_tiptip();
});
} else if(opts.activation == "click"){
org_elem.click(function(){
active_tiptip();
return false;
}).hover(function(){},function(){
if(!opts.keepAlive){
deactive_tiptip();
}
});
if(opts.keepAlive){
tiptip_holder.hover(function(){}, function(){
});
}
}
function active_tiptip(){
opts.enter.call(this);
tiptip_content.html(org_title);
tiptip_holder.hide().removeAttr("class").css("margin","0");
tiptip_arrow.removeAttr("style");
var top = parseInt(org_elem.offset()['top']);
var left = parseInt(org_elem.offset()['left']);
var org_width = parseInt(org_elem.outerWidth());
var org_height = parseInt(org_elem.outerHeight());
var tip_w = tiptip_holder.outerWidth();
var tip_h = tiptip_holder.outerHeight();
var w_compare = Math.round((org_width - tip_w) / 2);
var h_compare = Math.round((org_height - tip_h) / 2);
var marg_left = Math.round(left + w_compare);
var marg_top = Math.round(top + org_height + opts.edgeOffset);
var t_class = "";
var arrow_top = "";
var arrow_left = Math.round(tip_w - 12) / 2;
if(opts.defaultPosition == "bottom"){
t_class = "_bottom";
} else if(opts.defaultPosition == "top"){
t_class = "_top";
} else if(opts.defaultPosition == "left"){
t_class = "_left";
} else if(opts.defaultPosition == "right"){
t_class = "_right";
}
var right_compare = (w_compare + left) < parseInt($(window).scrollLeft());
var left_compare = (tip_w + left) > parseInt($(window).width());
if((right_compare && w_compare < 0) || (t_class == "_right" && !left_compare) || (t_class == "_left" && left < (tip_w + opts.edgeOffset + 5))){
t_class = "_right";
arrow_top = Math.round(tip_h - 13) / 2;
arrow_left = -12;
marg_left = Math.round(left + org_width + opts.edgeOffset);
marg_top = Math.round(top + h_compare);
} else if((left_compare && w_compare < 0) || (t_class == "_left" && !right_compare)){
t_class = "_left";
arrow_top = Math.round(tip_h - 13) / 2;
arrow_left = Math.round(tip_w);
marg_left = Math.round(left - (tip_w + opts.edgeOffset + 5));
marg_top = Math.round(top + h_compare);
}
var top_compare = (top + org_height + opts.edgeOffset + tip_h + 8) > parseInt($(window).height() + $(window).scrollTop());
var bottom_compare = ((top + org_height) - (opts.edgeOffset + tip_h + 8)) < 0;
if(top_compare || (t_class == "_bottom" && top_compare) || (t_class == "_top" && !bottom_compare)){
if(t_class == "_top" || t_class == "_bottom"){
t_class = "_top";
} else {
t_class = t_class+"_top";
}
arrow_top = tip_h;
marg_top = Math.round(top - (tip_h + 5 + opts.edgeOffset));
} else if(bottom_compare | (t_class == "_top" && bottom_compare) || (t_class == "_bottom" && !top_compare)){
if(t_class == "_top" || t_class == "_bottom"){
t_class = "_bottom";
} else {
t_class = t_class+"_bottom";
}
arrow_top = -12;
marg_top = Math.round(top + org_height + opts.edgeOffset);
}
if(t_class == "_right_top" || t_class == "_left_top"){
marg_top = marg_top + 5;
} else if(t_class == "_right_bottom" || t_class == "_left_bottom"){
marg_top = marg_top - 5;
}
if(t_class == "_left_top" || t_class == "_left_bottom"){
marg_left = marg_left + 5;
}
tiptip_arrow.css({"margin-left": arrow_left+"px", "margin-top": arrow_top+"px"});
tiptip_holder.css({"margin-left": marg_left+"px", "margin-top": marg_top+"px"}).attr("class","tip"+t_class);
if (timeout){ clearTimeout(timeout); }
timeout = setTimeout(function(){ tiptip_holder.stop(true,true).fadeIn(opts.fadeIn); }, opts.delay);
}
function deactive_tiptip(){
opts.exit.call(this);
if (timeout){ clearTimeout(timeout); }
tiptip_holder.fadeOut(opts.fadeOut);
}
}
});
}
})(jQuery);
Я называю такие функции, и они работают
<script>
$(function () {
$(".KeepAlive").tipTip({ fadeIn: 25, fadeOut: 25, delay: "25", maxWidth: "300px", edgeOffset: 5, keepAlive: true, activation: "click", defaultPosition: "right", exit: function () { } });
$(".ShowTitle").tipTip({ fadeIn: 25, fadeOut: 25, delay: "25", maxWidth: "300px", edgeOffset: 5, keepAlive: true, defaultPosition: "right" });
$(".HideOnClick").live('click', function () {
deactive_tiptip();
});
});
function pageLoad() {
if (Sys.WebForms.PageRequestManager.getInstance().get_isInAsyncPostBack()) {
$(".KeepAlive").tipTip({ fadeIn: 25, fadeOut: 25, delay: "25", maxWidth: "300px", edgeOffset: 5, keepAlive: true, activation: "click", defaultPosition: "right" });
$(".ShowTitle").tipTip({ fadeIn: 25, fadeOut: 25, delay: "25", maxWidth: "300px", edgeOffset: 5, keepAlive: true, defaultPosition: "right" });
$('body').css('cursor', 'default');
}
}
kT.Style.Value = srOtherPlayerImagesLeftValues[i] + " " + srOtherPlayerImagesTopValues[i] + " ";
lbUImg.Text = " <img class=\"KeepAlive\" src=\"" +
"http://static.monstermmorpg.com/images/userImages/trainer" + dsOtherUsers.Tables[0].Rows[i]["charImage"].ToString() +
dsOtherUsers.Tables[0].Rows[i]["Direction"].ToString() + ".png\"" +
" title='İsim: "+ dsOtherUsers.Tables[0].Rows[i]["userName"].ToString() +
"<hr/>" +
"<a href=http://www.monstermmorpg.com/PVPBattleOffer.aspx?UserName=" + dsOtherUsers.Tables[0].Rows[i]["userName"].ToString()
+" target=_blank class=linkUserMap>PVP Savaşı Teklif Et</a><hr/>" +
"<a href=http://www.monstermmorpg.com/SeeUserProfile.aspx?PlayerName=" + dsOtherUsers.Tables[0].Rows[i]["userName"].ToString()
+ " target=_blank class=linkUserMap>Profilini Göster</a><hr/> <a href=# class=HideOnClick>Close Me</a> '\"/>";
3 ответа
Решение
Проблема в том, что deactive_tiptip не является открытой функцией, не в той области, в которой вы пытаетесь ее использовать. Вместо этого вы можете * обычно * запускать ее с тем же событием, чтобы "выйти".... но так как вы используете keepAlive: true это тоже не сработает.
Вместо этого вы можете (так как он не выставлен) просто делать то, что плагин делает внутренне, например так:
$(".HideOnClick").live({
click: function () { $("#tiptip_holder").fadeOut(); }
});
Тем не менее, это не будет вызывать ваши определенные exit функция, но так как единственный, который у вас есть, это неоперативный, это должно быть хорошо.
Кроме того, если вы хотите, чтобы это было немного более эффективным, перейдите к делегату, что-то вроде этого:
$(document).delegate(".HideOnClick", "click", function () {
$("#tiptip_holder").fadeOut();
});
... это не влечет за собой начальный $(".HideOnClick") Стоимость селектора без причины.
Я предполагаю, что эта ошибка происходит, когда вы на самом деле вызываете $(".HideOnClick")... код.
Похоже, ваш код еще не знает о библиотеке jQuery. Вещи, чтобы попробовать:
- Убедитесь, что ваш скрипт объявлен блок после того, как две библиотеки включают
- Убедитесь, что ваш сценарий находится в
$(document).ready()обработчик.
Не правильный синтаксис для live() :
$ (". HideOnClick"). Live('click', function() {
deactive_tiptip();
});
Также вы можете посмотреть в delegate(),
http://api.jquery.com/delegate/
Это лучшая производительность.
РЕДАКТИРОВАТЬ
Функция, которую вы пытаетесь вызвать, не входит в область ее вызова (например, в плагине).
Вы не можете получить к нему доступ непосредственно из внешнего модуля.
Я также не был бы возможен, потому что плагин делает кое-что перед вызовом функции в плагине с данными, которые использует функция
РЕДАКТИРОВАТЬ 2
Из документов TipTip:
активации: строка (по умолчанию "hover") - метод JQuery TipTip активируется с помощью. Может быть установлено: "зависание", "фокус" или "щелчок".
Не думайте, что вы можете делать именно то, что вы хотите, учтите тот факт, что плагин не имеет deactivation Настройки. Но, возможно, вы можете расширить функциональность, чтобы добавить deactivation вариант.