2011-07-20 40 views
6

Tôi đang sử dụng plugin Jquery tiptip. Tôi muốn gọi hàm deactive_tiptip bằng cách nhấp vào liên kết href. Làm thế nào tôi có thể làm điều đó ?Cách gọi hàm jquery bằng a href

Tôi sẽ gọi hàm đó bên trong div chú giải công cụ.

Đây là mã của plugin tiptip

/* 
* 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);  

Trả lời

3

Mà không đi đầy đủ thông qua mã của bạn, bạn có thể làm điều này với một selector jquery.

vì vậy một cái gì đó như thế này;

$("a").live({click:function(){ //hide the tooltip at this point }); 

bạn cần sử dụng trực tiếp nếu bạn đang xây dựng các tooltips động

Tuy nhiên, điều này sẽ chạy mã trên (bất kỳ) neo.

Một cách khác là trang trí tất cả các neo thích hợp với một lớp học.

class = "HideOnClick" và sau đó sử dụng jQuery;

$(".HideOnClick").live({click:function(){ //hide the tooltip at this point }); 
+0

tôi đã cố gắng như thế này nhưng khi tôi nhấp cho un được xác định lỗi $() sống ({bấm vào nút "HideOnClick.":. function() { deactive_tiptip()}}); – MonsterMMORPG

15

Bạn có "2" tùy chọn (có được hơn tùy thuộc vào chính xác như bạn muốn làm điều đó)

1:

<a href="javascript:deactive_tiptip();">Visible Text</a> 

2:

<a href="#" onclick="deactive_tiptip();">Visible Text</a> 

chung tùy chọn một là tốt hơn bởi vì nó không thêm # vào url khi nhấp ... nhưng nếu bạn muốn thực hiện việc di chuột thay vì nhấp chuột, bạn sẽ sử dụng tùy chọn 2 (lại đặt onclick với onmouseover)

Bạn cũng có thể sử dụng JQuery:

$('#urlid').click(deactive_tiptip()); 

// Or newest way: 
$('#urlid').on('click', deactive_tiptip); 
+0

đã thử cả hai và cả hai đều cung cấp lỗi không xác định – MonsterMMORPG

+1

Nếu không có kiểm tra cá nhân thì đây là một số điều cần thử: 1) $ ('# urlid'). TipTip(). Deactive_tiptip(); 2) $ ('# urlid'). Deactive_tiptip(); 3) $ ('# urlid'). Unbind(); 4) $ ('# urlid'). Die(); Bạn có thể sử dụng nó trong cả hai trường hợp 1 hoặc 2 của ví dụ ban đầu của tôi –

+0

hoàn hảo !! Cảm ơn. – Shalika

Các vấn đề liên quan