I can not call jquery plugin function outside of plugin code
This is my definition
$(".HideOnClick").live({ click: function () { deactive_tiptip() } });
This is how i am calling it inside title of html elements
<a href=# class=HideOnClick>Close Me</a>
This is how i add the TipTip plugin to my content
<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>
But it gives function undefined error. Plugin is working perfectly.
This is the plugin source code
/*
* 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);
开发者_JAVA技巧 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);
I am calling functions like this and they are working
<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> '\"/>";
The problem is that deactive_tiptip isn't an exposed function, not in the scope you're trying to use it in. Instead, you can * normally* trigger it with the same event on to "exit"....but since you're using keepAlive: true that won't work either.
You could instead (since it isn't exposed) just do what the plugin does internally, like this:
$(".HideOnClick").live({
click: function () { $("#tiptip_holder").fadeOut(); }
});
Not however, this won't call your defined exit function, but since the only one you have is a no-op, this should be fine.
Also, if you want it a bit more efficient, go for delegate, something like this:
$(document).delegate(".HideOnClick", "click", function () {
$("#tiptip_holder").fadeOut();
});
...this doesn't incur the initial $(".HideOnClick") selector cost for no reason.
I assume this error is happening when you actually call the $(".HideOnClick")... code.
It looks like your code doesn't yet know about the jQuery library. Things to try:
- Ensure your script is block is declared after the two library includes
- Ensure your script is placed in a
$(document).ready()handler.
Isn't the correct syntax for live():
$(".HideOnClick").live('click', function() {
deactive_tiptip();
});
Also you might want to look into delegate().
http://api.jquery.com/delegate/
It's better performance wise.
EDIT
The function you try to call isn't in the scope of where you call it (e.g. it is in the plugin).
You cannot access it directly from outside the plugin.
I also wouldn't be possible because the plugin does some stuff before the function is called in the plugin with data the function uses
EDIT 2
From the TipTip docs:
activation: string ("hover" by default) - jQuery method TipTip is activated with. Can be set to: "hover", "focus" or "click".
Don't think you can do exactly dwhat you want, consider the fact that the plugin has no deactivation settings. But perhaps you can extend the functionality to add a deactivation option.
加载中,请稍侯......
精彩评论