将此自定义 JQuery 工具提示脚本转换为 Jquery 插件 [英] Convert this custom JQuery tooltip script into a Jquery plugin

问题描述

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

I -with some stackoverflow users help- have developed this tooltip script using Jquery and general 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 的变量，

It has some variables at the beggining and they are all optional as they have all initial values, but i'd like to be able to be variables for the init,

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

According to this: tutorial i need to do something like:

    (function($){

    $.fn.meliaTooltip = function(options){


    // code will be added here.

    }
})(jQuery);

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

But I'm not sure if i have to pase the code in there and how exactly define the options (asuming options are the parametres to be used as my variables)

有人想推我一下吗?

推荐答案

应该是这样的:

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

这篇关于将此自定义 JQuery 工具提示脚本转换为 Jquery 插件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！