将此自定义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,

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

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屋！