将此自定义 JQuery 工具提示脚本转换为 Jquery 插件

Posted 2023-05-09

【中文标题】将此自定义 JQuery 工具提示脚本转换为 Jquery 插件

【英文标题】：Convert this custom JQuery tooltip script into a Jquery plugin

【发布时间】：2011-11-07 13:39:40

【问题描述】：

我 - 在一些 *** 用户的帮助下 - 使用 Jquery 和通用 javascript 开发了这个工具提示脚本，

    <script type="text/javascript">

$(document).ready(function()
        /*OPCIONES DEL PLUGIN*/
        var selector = '.disparador'; //elemento que activará el tooltip
        var tooltip = '.miTooltip';   //elemento con el contenido html a mostrar por el tooltip
        var tiempo_espera = 0;        //tiempo que el tooltip esperará a desaparecer una vez el raton se salga del disparador
        var seguir_raton = true;      //booleana que determina si el tooltip debe seguir el movimiento del raton o no
        var ajuste_top = 0;           //distancia vertical de ajuste
        var ajuste_left = 0;          //distancia vertical de ajuste
        var fade_time = 300;          //tiempo de la transición de mostrar/ocultar
        /*ARCHIVOS NECESARios DEL PLUGIN - NO TOCAR*/




        /* Detectar que el raton pasa por encima */
        $(selector).hover(function(e) 
          /*Guardamos el selector del disparador y de tooltip en una variable*/
            var disp = $(this);
             var tip= disp.next(tooltip);
             var tip_text = tip.html();
             //alert(tip_text);
             var new_content = '<span class="left"></span ><span class="contenido">'+tip_text+'</span ><span class="right"></span ><span class="bottom"></span >';
             //alert(new_content);
             tip.html(new_content);
            if(typeof t != 'undefined')
                /*reiniciamos tiempo_espera*/
                clearTimeout(t);
            
                $(tip).css(
                    /*colocamos el tooltip según el ratón y el tamaño del tooltip*/
                    left: e.clientX-($(tip).width()/2)+ajuste_left+'px',
                    top: e.clientY-$(tip).height()*3/2+ajuste_top+'px'
                ).fadeIn(fade_time);

        );
        /* En caso de que se mueva el raton */
        $(selector).bind('mousemove', function(e)
            if(seguir_raton==true)
                var disp = $(this);
                var tip= $(this).next(tooltip);
               $(tip).css(
                   /*Pues recolocamos el tooltip*/
                    left: e.clientX-($(tip).width()/2)+ajuste_left+'px',
                    top: e.clientY-$(tip).height()*3/2+ajuste_top+'px'
                );
            
        );

        $(selector).mouseout(function() 
            /*añadimos tiempo_espera por si el usuario se sale sin querer*/
            t = setTimeout("$('"+tooltip+"').fadeOut("+fade_time+")",tiempo_espera);
        );
);



</script>

它在开始时有一些变量，它们都是可选的，因为它们都有初始值，但我希望能够成为 init 的变量，

据此：tutorial 我需要做类似的事情：

    (function($)

    $.fn.meliaTooltip = function(options)


    // code will be added here.

    
)(jQuery);

但我不确定是否必须在其中粘贴代码以及如何准确定义选项（假设选项是用作我的变量的参数）

有人想推我一下吗？

【问题讨论】：

但是我有 .selector 作为变量，它实际上应该是选择器，对吧？？

【参考方案1】：

应该是这样的：

(function ($) 
    $.fn.meliaTooltip = function (options) 
        var defaults = 
            tooltip: '.miTooltip',
            tiempo_espera: 0,
            seguir_raton: true,
            ajuste_top: 0,
            ajuste_left: 0,
            fade_time: 300
        ;

        var opts = $.extend(defaults, options);

        $(this).each(function() 
            $(this).hover(function(e) 
                /*Guardamos el selector del disparador y de tooltip en una variable*/
                var disp = $(this);
                var tip = disp.next(opts.tooltip);
                var tip_text = tip.html();
                //alert(tip_text);
                var new_content = '<span class="left"></span ><span class="contenido">' + tip_text + '</span ><span class="right"></span ><span class="bottom"></span >';
                //alert(new_content);
                tip.html(new_content);
                if (typeof t != 'undefined') 
                    /*reiniciamos tiempo_espera*/
                    clearTimeout(t);
                
                $(tip).css(
                        /*colocamos el tooltip según el ratón y el tamaño del tooltip*/
                        left: e.clientX - ($(tip).width() / 2) + opts.ajuste_left + 'px',
                        top: e.clientY - $(tip).height() * 3 / 2 + opts.ajuste_top + 'px'
                    ).fadeIn(opts.fade_time);

            );

            $(this).bind('mousemove', function(e) 
                if (opts.seguir_raton) 
                    var disp = $(this);
                    var tip = $(this).next(opts.tooltip);
                    $(tip).css(
                            /*Pues recolocamos el tooltip*/
                            left: e.clientX - ($(tip).width() / 2) + opts.ajuste_left + 'px',
                            top: e.clientY - $(tip).height() * 3 / 2 + opts.ajuste_top + 'px'
                        );
                
            );

            $(this).mouseout(function() 
                /*añadimos tiempo_espera por si el usuario se sale sin querer*/
                t = setTimeout("$('" + opts.tooltip + "').fadeOut(" + opts.fade_time + ")", opts.tiempo_espera);
            );
        );
    ;
)(jQuery);

用法：

$("#selector").meliaTooltip(
    tooltip: '.miTooltip',
    fade_time: 300
);

【讨论】：

啊哈！！！我会初始化： $('.selector').meliaTooltip('.miTooltip',true,0,0,300); （我知道初始化为默认值没有任何意义，但它知道这是否是顺序）？？？

我已经修改了我的答案，向您展示如何传递您想要的参数。你不需要有订单，你只需要传递一个json对象并且$.extend方法会覆盖需要的属性

对了，我修改了我的例子，我使用extend的方式不对

【参考方案2】：

试试这个

$.fn.meliaTooltip = function(options)

return this.each(function()
/*OPCIONES DEL PLUGIN*/
        //var selector = '.disparador'; //elemento que activará el tooltip

        //You can take all the below settings from options param
        var tooltip = '.miTooltip';   //elemento con el contenido HTML a mostrar por el tooltip
        var tiempo_espera = 0;        //tiempo que el tooltip esperará a desaparecer una vez el raton se salga del disparador
        var seguir_raton = true;      //booleana que determina si el tooltip debe seguir el movimiento del raton o no
        var ajuste_top = 0;           //distancia vertical de ajuste
        var ajuste_left = 0;          //distancia vertical de ajuste
        var fade_time = 300;          //tiempo de la transición de mostrar/ocultar
        /*ARCHIVOS NECESARIOS DEL PLUGIN - NO TOCAR*/




        /* Detectar que el raton pasa por encima */
        $(this).hover(function(e) 
          /*Guardamos el selector del disparador y de tooltip en una variable*/
            var disp = $(this);
             var tip= disp.next(tooltip);
             var tip_text = tip.html();
             //alert(tip_text);
             var new_content = '<span class="left"></span ><span class="contenido">'+tip_text+'</span ><span class="right"></span ><span class="bottom"></span >';
             //alert(new_content);
             tip.html(new_content);
            if(typeof t != 'undefined')
                /*reiniciamos tiempo_espera*/
                clearTimeout(t);
            
                $(tip).css(
                    /*colocamos el tooltip según el ratón y el tamaño del tooltip*/
                    left: e.clientX-($(tip).width()/2)+ajuste_left+'px',
                    top: e.clientY-$(tip).height()*3/2+ajuste_top+'px'
                ).fadeIn(fade_time);

        );
        /* En caso de que se mueva el raton */
        $(this).bind('mousemove', function(e)
            if(seguir_raton==true)
                var disp = $(this);
                var tip= $(this).next(tooltip);
               $(tip).css(
                   /*Pues recolocamos el tooltip*/
                    left: e.clientX-($(tip).width()/2)+ajuste_left+'px',
                    top: e.clientY-$(tip).height()*3/2+ajuste_top+'px'
                );
            
        );

        $(this).mouseout(function() 
            /*añadimos tiempo_espera por si el usuario se sale sin querer*/
            t = setTimeout("$('"+tooltip+"').fadeOut("+fade_time+")",tiempo_espera);
        );
   );
;

用法

$("#testTooltip").meliaTooltip();

【讨论】：

谢谢，我现在有两个问题：（1）我如何初始化它？？？ （2与1相关）我如何传递参数并将它们与我在代码开始时拥有的选项相关联？再次感谢！