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

Question

我 - 在一些 stackoverflow 用户的帮助下 - 使用 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);

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

有人想推我一下吗？

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

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