如何使用href调用jquery函数
我正在使用jQueryTiptIP插件。我想通过单击a href链接调用deactive_tiptip函数。我该怎么做 我将在tooltip div中调用该函数 这是tiptip插件的代码如何使用href调用jquery函数,jquery,function,tooltip,call,tiptip,Jquery,Function,Tooltip,Call,Tiptip,我正在使用jQueryTiptIP插件。我想通过单击a href链接调用deactive_tiptip函数。我该怎么做 我将在tooltip div中调用该函数 这是tiptip插件的代码 /* * TipTip * Copyright 2010 Drew Wilson * www.drewwilson.com * code.drewwilson.com/entry/tiptip-jquery-plugin * * Version 1.3 - Updated: Mar
/*
* 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);
/*
*踮起脚尖
*版权所有2010德鲁·威尔逊
*www.drewwilson.com
*code.drewwilson.com/entry/tiptip-jquery-plugin
*
*版本1.3-更新日期:2010年3月23日
*
*此插件将创建自定义工具提示以替换默认工具提示
*浏览器工具提示。它是非常轻,非常聪明的
*它检测浏览器窗口的边缘,并确保
*工具提示将保持在当前窗口大小内。结果
*工具提示将自动调整为显示在上方、下方和左侧
*或者向右,这取决于需要什么才能保持在
*浏览器窗口。它是完全可定制的,以及通过CSS。
*
*此TipTip jQuery插件根据MIT和GPL许可证获得双重许可:
* http://www.opensource.org/licenses/mit-license.php
* http://www.gnu.org/licenses/gpl.html
*/
(函数($){
$.fn.tipTip=函数(选项){
变量默认值={
激活:“悬停”,
keepAlive:错,
sticky:错,
最大宽度:“200px”,
边缘偏移:3,
默认位置:“底部”,
延误:400,
法登:200,
淡出:200,
属性:“标题”,
content:false、//HTML或要填充TipTIp的字符串
输入:函数(){},
退出:函数(){}
};
var opts=$.extend(默认值、选项);
//设置tip元素并将其渲染到DOM
if($(“#tiptip_holder”).length parseInt($(window.width());
如果((右比较和左比较<0)| | | | | | | | | | | | | | | | | | | |左比较和右比较| | | | | | | | |{
t_class=“_right”;
arrow_top=数学圆(tip_h-13)/2;
左箭头=-12;
marg_left=数学圆(左+组织宽度+选择边偏移);
marg_top=数学圆(top+h_比较);
}else if((left_compare&&w_compare<0)| |(t_class==“_left”&&w_compare&&right_compare)){
t_class=“_left”;
arrow_top=数学圆(tip_h-13)/2;
箭头左=数学圆(尖端w);
marg_left=数学圆(左-(tip_w+opts.edgeOffset+5));
marg_top=数学圆(top+h_比较);
}
var top_compare=(top+org_height+opts.edgeOffset+tip_h+8)>parseInt($(window.height()+$(window.scrollTop());
var bottom_compare=((顶部+组织高度)-(opts.edgeOffset+tip_h+8))<0;
if(top_compare | | |(t_class==“_bottom”和&top_compare)| |(t_class==“_top”和&!bottom_compare)){
如果(t_类==“_顶部”| | t_类==“_底部”){
t_class=“_top”;
}否则{
t_class=t_class+“_top”;
}
箭头\顶部=尖端\ h;
marg_top=数学圆(top-(tip_h+5+选择边偏移));
}else if(bottom_compare |(t_class==“_top”和&bottom_compare)|(t_class==“_bottom”和&!top_compare)){
如果(t_类==“_顶部”| | t_类==“_底部”){
t_class=“_bottom”;
}否则{
t_类=t_类+“_底部”;
}
箭头顶部=-12;
marg_top=数学圆(top+org_height+opts.edgeOffset);
}
如果(t_类==“_右上”| | t_类==“_左上”){
边缘顶部=边缘顶部+5;
}else如果(t_class==“_right_bottom”| | t_class==“_left_bottom”){
marg_top=marg_top-5;
}
如果(t_类==“_left_top”| | t_类==“_left_bottom”){
左边缘=左边缘+5;
}
css({“左边距”:左边距+“px”,“右边距顶部”:左边距+“px”});
css({“左边距”:左边距+“px”,“右边距顶端”:左边距+“px”}).attr(“class”,“tip”+t_class);
if(timeout){cleartimout(timeout);}
timeout=setTimeout(函数(){tiptip_holder.stop(true,true).fadeIn(opts.fadeIn);},opts.delay);
}
函数deactive_tippip(){
选择退出呼叫(本机);
if(timeout){cleartimout(timeout);}
tiptip_支架淡出(选择淡出);
}
}
});
}
})(jQuery);
无需完全阅读代码,您可以使用jquery选择器完成此操作
像这样的事情
$("a").live({click:function(){ //hide the tooltip at this point });
如果要动态生成工具提示,则需要使用live
但是,这将在(任何)锚点上运行代码
另一种方法是用类装饰所有相关的锚
class=“HideOnClick”然后使用jQuery
$(".HideOnClick").live({click:function(){ //hide the tooltip at this point });
您有“2”个选项(更多选项取决于您希望如何操作)
1:
我试着这样做,但当我单击时,给出了未定义的错误$(“.HideOnClick”).live({click:function(){deactive\u tiptip()}});在不亲自测试的情况下,这里有一些东西可以尝试:1)$('#urlid').tippip().deactive\u tippip();2) $('#urlid').deactive_tiptip();3) $('#urlid').unbind();4) $('#urlid').die();您可以在我的原始示例Perfect的案例1或案例2中使用它!!谢谢你。
<a href="javascript:deactive_tiptip();">Visible Text</a>
<a href="#" onclick="deactive_tiptip();">Visible Text</a>
$('#urlid').click(deactive_tiptip());
// Or newest way:
$('#urlid').on('click', deactive_tiptip);