Konuşma balonları için Two Click Events (Olaylar)

Question

jQuery ve click fonksiyonu ile ilgili bir sorunum var. "http://gdakram.github.com/JQuery-Tooltip-Plugin" dan bir konuşma balonu eklentisi düzenlemek istiyorum. Gördüğünüz gibi, düğmeyi çevirirseniz, bir konuşma balonu açar. Bu işlevi fare tıklamasıyla değil, tıklamalarla istiyorum. Benim sorunum bu yazı benim için çok karmaşık olduğunu, bir ... bu web sitesinden bir kısım (js-veri) 'dir:

(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',** 
}; 

Olay ve olay dışarı ... birlikte herhangi bir fikir işe yaramadı ne yapabilir miyim? Bu ise

Answer 1

onlar göstermek ve mouseleave'

' 'mousemove' olabilir ya da öylesine tıklama bu

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 ile deneyin çalışmıyor dışarı üzerine fareyi ve fareyi kullanarak araç ipucu gizlemek için bir kod yazmak vardır

Answer 2

»'event_in': 'mouseover', 'event_out': 'tıklayın'« güzel görünüyor, ama mükemmel değil… bu tıklama olayıyla kapatabileceğimden önce ortaya çıkıyor… bu biraz… “çirkin”… Koşullar.

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

Bu kaba olmakla çalışması gerekir - yönteme gibi kendi 'geçiş öğesini' inşa:

bu _show yeniden düşünmek gerekir gerçekten etkili olabilmesi için de

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

    }); 

    }; 

() ve _hide() işlevleri.