5

我对 jQuery 和点击功能有疑问。我想从“ http://gdakram.github.com/JQuery-Tooltip-Plugin ”编辑一个语音气泡插件。在这里您可以看到，如果您将鼠标悬停在按钮上，它会打开一个对话气泡。我想要这个功能点击，而不是鼠标悬停。我的问题是，这个脚本对我来说太复杂了……这是网站的一部分（js-data）：

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

事件输入和事件输出不能一起工作......有什么想法，我能做什么？

4

4 回答 4

1

这很粗糙，但应该可以——构建你自己的“切换”方法：

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

     });

   };

为了让它真正有效，您需要重新考虑 _show() 和 _hide() 函数。

于 2012-10-03T00:38:12.420 回答
0

»'event_in':'mouseover', 'event_out':'click'« 看起来很漂亮，但并不完美......它在我可以用点击事件关闭它之前出现......这有点......“丑陋”......对这种情况感到抱歉。

于 2012-09-24T14:02:15.160 回答
0

在此，他们编写代码以使用鼠标悬停和鼠标移出来显示和隐藏工具提示，因此单击不起作用，请尝试使用

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 可能是'mousemove'或'mouseleave'

于 2012-09-24T13:37:57.820 回答
0 
 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);
       })
     });
于 2012-09-25T09:08:43.607 回答