5

jQuery とクリック機能に問題があります。「 http://gdakram.github.com/JQuery-Tooltip-Plugin 」から吹き出しプラグインを編集したい。ここで、マウスをボタンの上に置くと、吹き出しが開きます。マウスオーバーではなく、クリックでこの機能が必要です。私の問題は、このスクリプトが私には複雑すぎるということです...これはウェブサイトの一部 (js データ) です。

(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 に答える