Dwa zdarzenia kliknięcia dla dymków

Question

Mam problem z jQuery i funkcją kliknięcia. Chcę edytować wtyczkę dymku z "http://gdakram.github.com/JQuery-Tooltip-Plugin". Tutaj możesz zobaczyć, czy po najechaniu myszką przycisk otwiera dymek. Chcę tę funkcję za pomocą kliknięć, a nie przesuwania kursora myszy. Moim problemem jest to, że ten scenariusz jest zbyt skomplikowane dla mnie ... to jest jedna część (JS-data) ze strony:

(function($) { 

$.fn.tooltip = function(settings) { 
// Configuration setup 
config = { 
'dialog_content_selector' : 'div.tooltip_description', 
'animation_distance' : 50, 
'opacity' : 0.85,*/ 
'arrow_left_offset' : 70, 
'arrow_top_offset' : 50, 
'arrow_height' : 20, 
'arrow_width' : 20, 
'animation_duration_ms' : 300, 
**'event_in':'click',** 
'hover_delay' : 0, 
**'event_out': 'click',** 
}; 

wydarzenie i wydarzenie się nie współpracować ... jakieś pomysły, co mogę zrobić?

Answer 1

W tym są one napisać kod, aby pokazać i ukryć podpowiedzi za pomocą myszy nad i myszy out więc kliknięcie nie działa spróbuj z tym

click for tooltip show 
mousemove for tooltip hide 

(function($) { 

    $.fn.tooltip = function(settings) { 
    // Configuration setup 
    config = { 
    'dialog_content_selector' : 'div.tooltip_description', 
    'animation_distance' : 50, 
    'opacity' : 0.85,*/ 
    'arrow_left_offset' : 70, 
    'arrow_top_offset' : 50, 
    'arrow_height' : 20, 
    'arrow_width' : 20, 
    'animation_duration_ms' : 300, 
    'event_in':'click', 
    'event_out':'mousemove' 
    }; 

event_out może być 'mousemove' lub "mouseleave'

Answer 2

»" event_in ":" mouseover "," event_out ":" kliknięcie "« wydaje się ładne, ale nie idealne ... pojawia się, zanim mogę je zamknąć za pomocą zdarzenia kliknięcia ... to jest trochę ... "brzydkie" ... przepraszam za okoliczności.

Answer 3

if (settings) $.extend(config, settings); 

    /** 
     * Apply interaction to all the matching elements 
     **/ 
    this.each(function() { 
     var hoverTimer; 
     $(this).bind(config.event_in,function(){ 
     _hide(this); 
     var ele = this; 
     hoverTimer = setTimeout(function() { _show(ele); }, config.hover_delay) 
     }) 
     .bind(config.event_out,function(){ 
     clearTimeout(hoverTimer); 
     _hide(this); 
     }) 
    }); 

Answer 4

To jest szorstka, ale powinien działać - zbudować swój własny „przełącznik” podobny sposób:

config = { 
     'dialog_content_selector' : 'div.tooltip_description', 
     'animation_distance' : 50, 
     'opacity' : 0.85, 
     'arrow_left_offset' : 70, 
     'arrow_top_offset' : 50, 
     'arrow_height' : 20, 
     'arrow_width' : 20, 
     'animation_duration_ms' : 300, 
     '_event_' : 'click' 

     //'event_in':'mouseover', 
     //'event_out':'mouseout', 
     //'hover_delay' : 0 
    }; 

    if (settings) $.extend(config, settings); 

/** 
    * Apply interaction to all the matching elements 
    **/ 

this.each(function() { 

    toggleTip(this); 

}); 

/** 
    * Positions the dialog box based on the target 
    * element's location 
    **/ 

function toggleTip(tip) { 

    var count = 1; 

    $(tip).bind(config._event_, function(e){ 

     e.stopPropagation(); 

     _hide(tip); 

      count++ % 2 ? _show(tip) : _hide(tip); 

    }); 

    }; 

Aby to być naprawdę skuteczne trzeba by ponownie myśleć o _show() i _hide() funkcje.