Colortip:un complemento de información sobre herramientas de jQuery

En este tutorial, vamos a escribir un complemento de información sobre herramientas de jQuery simple. Va a convertir los atributos de título de los elementos dentro de su página, en una serie de información sobre herramientas de colores. Hay seis temas de color disponibles, por lo que puede combinarlos fácilmente con el resto de su diseño.

Paso 1 - XHTML

El complemento que estamos a punto de escribir hoy funciona al convertir el título de un elemento en la página en una estructura de tres tramos, que forman una información sobre herramientas, que se muestra al pasar el mouse. Entonces, si comienza con un enlace regular como este:

<a href="https://tutorialzine.com/" class="blue" title="Go to Tutorialzine">Tutorialzine</a>

jQuery lo convertirá al marcado que puedes ver a continuación.

<a class="blue colorTipContainer" href="https://tutorialzine.com/">Tutorialzine
<span class="colorTip" style="margin-left: -60px;">Go to Tutorialzine
<span class="pointyTipShadow"></span>
<span class="pointyTip"></span>
</span>
</a>

Tenga en cuenta que el primer bloque de código anterior especifica un "azul " nombre de la clase. Esto se debe a que estamos anulando el color predeterminado de la punta (amarillo). Puede elegir entre rojo , azul , verde , amarillo , blanco y negro , o puede crear sus propios colores en la hoja de estilo del complemento.

Los usuarios que tienen JavaScript deshabilitado seguirán viendo la información sobre herramientas del título regular en la página, por lo que el script se degrada correctamente.

Paso 2:CSS

Para mostrar los consejos coloridos en su página, primero debe incluir el archivo de hoja de estilo del complemento en la sección principal del documento html.

<link rel="stylesheet" type="text/css" href="colortip-1.0/colortip-1.0-jquery.css"/>

También puede simplemente copiar los estilos del archivo y pegarlos directamente en su hoja de estilo principal, si no desea mantener un archivo de inclusión separado. Esta hoja de estilo define tanto el posicionamiento como el diseño de la información sobre herramientas. Viene con seis temas de color y puedes agregar más fácilmente.

colortip-1.0-jquery.css - Parte 1

.colorTipContainer{
    position:relative;
    text-decoration:none !important;
}

.colorTip{
    /* This class is assigned to the color tip span by jQuery */

    display:none;
    position:absolute;
    left:50%;
    top:-30px;
    padding:6px;

    background-color:white;
    font-family:Arial,Helvetica,sans-serif;
    font-size:11px;
    font-style:normal;
    line-height:1;
    text-decoration:none;
    text-align:center;
    text-shadow:0 0 1px white;
    white-space:nowrap;

    -moz-border-radius:4px;
    -webkit-border-radius:4px;
    border-radius:4px;
}

.pointyTip,.pointyTipShadow{
    /* Setting a thick transparent border on a 0x0 div to create a triangle */
    border:6px solid transparent;
    bottom:-12px;
    height:0;
    left:50%;
    margin-left:-6px;
    position:absolute;
    width:0;
}

.pointyTipShadow{
    /* The shadow tip is 1px larger, so it acts as a border to the tip */
    border-width:7px;
    bottom:-14px;
    margin-left:-7px;
}

El .colorTipContainer clase se asigna a los elementos a los que se añaden las puntas de color. Establece su posicionamiento en relativo, de modo que las puntas se puedan centrar sobre ellas.

Se utiliza un ingenioso truco de CSS para crear las puntas puntiagudas triangulares. Como sabe, los divs y spans solo pueden tomar una forma rectangular (o una elipse/rectángulo redondeado si aplica border-radius). Sin embargo, si aplica un borde grueso a un elemento 0 por 0, la única forma en que los bordes encajarán es ocupando un espacio triangular en cada lado. Luego, al establecer el color de borde predeterminado en transparente, puede hacer visible cualquiera de las cuatro formas triangulares.

En realidad, esto se hace tanto en .pointyTip y el .pointyTipShadow se extiende, para dar la impresión de que la punta puntiaguda tiene un borde aplicado para que coincida con el resto del diseño de la punta de color. Ahora echemos un vistazo más de cerca a los seis temas de color.

colortip-1.0-jquery.css - Parte 2

/* 6 Available Color Themes */

.white .pointyTip{ border-top-color:white;}
.white .pointyTipShadow{ border-top-color:#ddd;}
.white .colorTip{
    background-color:white;
    border:1px solid #DDDDDD;
    color:#555555;
}

.yellow .pointyTip{ border-top-color:#f9f2ba;}
.yellow .pointyTipShadow{ border-top-color:#e9d315;}
.yellow .colorTip{
    background-color:#f9f2ba;
    border:1px solid #e9d315;
    color:#5b5316;
}

.blue .pointyTip{ border-top-color:#d9f1fb;}
.blue .pointyTipShadow{ border-top-color:#7fcdee;}
.blue .colorTip{
    background-color:#d9f1fb;
    border:1px solid #7fcdee;
    color:#1b475a;
}

.green .pointyTip{ border-top-color:#f2fdf1;}
.green .pointyTipShadow{ border-top-color:#b6e184;}
.green .colorTip{
    background-color:#f2fdf1;
    border:1px solid #b6e184;
    color:#558221;
}

.red .pointyTip{ border-top-color:#bb3b1d;}
.red .pointyTipShadow{ border-top-color:#8f2a0f;}
.red .colorTip{
    background-color:#bb3b1d;
    border:1px solid #8f2a0f;
    color:#fcfcfc;
    text-shadow:none;
}

.black .pointyTip{ border-top-color:#333;}
.black .pointyTipShadow{ border-top-color:#111;}
.black .colorTip{
    background-color:#333;
    border:1px solid #111;
    color:#fcfcfc;
    text-shadow:none;
}

Recuerda que solo los bordes son la única parte visible de las puntas puntiagudas. Puede agregar sus propios temas de color siguiendo la misma estructura.

Paso 3:jQuery

Primero debe incluir la biblioteca jquery y los archivos del complemento en la página, luego nuestro archivo script.js, que utilizará el complemento y agregará consejos de color a los enlaces en la página.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="colortip-1.0/colortip-1.0-jquery.js"></script>
<script type="text/javascript" src="script.js"></script>

Por motivos de rendimiento, he puesto este código en la parte inferior de colortips.html expediente. Esto permite que el diseño de la página se represente antes de que el navegador bloquee la carga de los archivos js.

Ahora echemos un vistazo a la punta de color del complemento.

colortip-1.0-jquery.js - Parte 1

(function($){
    $.fn.colorTip = function(settings){

        var defaultSettings = {
            color       : 'yellow',
            timeout     : 500
        }

        var supportedColors = ['red','green','blue','white','yellow','black'];

        /* Combining the default settings object with the supplied one */
        settings = $.extend(defaultSettings,settings);

        /*
        *   Looping through all the elements and returning them afterwards.
        *   This will add chainability to the plugin.
        */

        return this.each(function(){

            var elem = $(this);

            // If the title attribute is empty, continue with the next element
            if(!elem.attr('title')) return true;

            // Creating new eventScheduler and Tip objects for this element.
            // (See the class definition at the bottom).

            var scheduleEvent = new eventScheduler();
            var tip = new Tip(elem.attr('title'));

            // Adding the tooltip markup to the element and
            // applying a special class:

            elem.append(tip.generate()).addClass('colorTipContainer');

            // Checking to see whether a supported color has been
            // set as a classname on the element.

            var hasClass = false;
            for(var i=0;i<supportedColors.length;i++)
            {
                if(elem.hasClass(supportedColors[i])){
                    hasClass = true;
                    break;
                }
            }

            // If it has been set, it will override the default color

            if(!hasClass){
                elem.addClass(settings.color);
            }

Cuando llama al complemento, puede pasar un objeto de configuración, que mantiene el color predeterminado y el tiempo de espera después del cual la información sobre herramientas desaparece al dejar el mouse.

Puede elegir entre seis colores posibles y asignarlos como nombre de clase al elemento. El complemento verificará si una clase de color está presente y, si no lo está, aplicará la predeterminada que haya pasado en el objeto de configuración. Si no ha pasado un objeto de configuración, se usará el amarillo en su lugar.

colortip-1.0-jquery.js - Parte 2

          // On mouseenter, show the tip, on mouseleave set the
            // tip to be hidden in half a second.

            elem.hover(function(){

                tip.show();

                // If the user moves away and hovers over the tip again,
                // clear the previously set event:

                scheduleEvent.clear();

            },function(){

                // Schedule event actualy sets a timeout (as you can
                // see from the class definition below).

                scheduleEvent.set(function(){
                    tip.hide();
                },settings.timeout);

            });

            // Removing the title attribute, so the regular OS titles are
            // not shown along with the tooltips.

            elem.removeAttr('title');
        });

    }

    /*
    /   Event Scheduler Class Definition
    */

    function eventScheduler(){}

    eventScheduler.prototype = {
        set : function (func,timeout){

            // The set method takes a function and a time period (ms) as
            // parameters, and sets a timeout

            this.timer = setTimeout(func,timeout);
        },
        clear: function(){

            // The clear method clears the timeout

            clearTimeout(this.timer);
        }
    }

En la segunda parte del código del complemento, vinculamos los detectores de eventos al evento de desplazamiento (combinación de un evento mouseenter y mouseleave).

Observe la clase del programador de eventos. Se utiliza para configurar una función para que se ejecute después de un período de tiempo predeterminado. En su corazón se encuentra una llamada a setTimeout . Un claro() El método también se proporciona como parte de la clase, por lo que los eventos programados previamente se pueden destruir (útil cuando aleja el mouse de una información sobre herramientas y luego lo vuelve a mover antes de que desaparezca).

colortip-1.0-jquery.js - Parte 3

  /*
    /   Tip Class Definition
    */

    function Tip(txt){
        this.content = txt;
        this.shown = false;
    }

    Tip.prototype = {
        generate: function(){

            // The generate() method returns either a previously generated element
            // stored in the tip variable, or generates and saves it in tip for
            // later use, after which returns it.

            return this.tip || (this.tip = $('<span class="colorTip">'+this.content+
                                             '<span class="pointyTipShadow"></span><span class="pointyTip"></span></span>'));
        },
        show: function(){
            if(this.shown) return;

            // Center the tip and start a fadeIn animation
            this.tip.css('margin-left',-this.tip.outerWidth()/2).fadeIn('fast');
            this.shown = true;
        },
        hide: function(){
            this.tip.fadeOut();
            this.shown = false;
        }
    }

})(jQuery);

En la última parte del código definimos la clase tip. Tiene un generar , mostrar y ocultar métodos. Se crea un objeto de esta clase para cada información sobre herramientas. El método de generación se llama primero y la información sobre herramientas se almacena en el this.tip local. variable. Los métodos mostrar y ocultar operan en esta variable para ejecutar animaciones de aparición/desaparición gradual.

Ahora solo nos queda llamar al complemento y agregar consejos de color a todos los enlaces en la página.

secuencia de comandos.js

$(document).ready(function(){

    /* Adding a colortip to any tag with a title attribute: */

    $('[title]').colorTip({color:'yellow'});

});

El objeto de configuración aquí también podría omitirse, porque el amarillo es el valor predeterminado de todos modos. Pero podría especificar un color diferente para la información sobre herramientas. Si aplica rojo, verde, azul , blanco , amarillo o negro como nombre de clase del elemento, se anulará el diseño de la información sobre herramientas.

¡Con esto, nuestro complemento Colortip está completo!

Envolviéndolo

Usar el complemento que escribimos hoy es realmente fácil, ya que no requiere ninguna configuración específica. Solo toma una serie de elementos y reemplaza sus atributos de título con información sobre herramientas colorida. También puede crear fácilmente sus propios diseños de información sobre herramientas simplemente incluyendo tres clases de estilo adicionales a su hoja de estilo y agregando un elemento a la matriz de colores admitida en colortip-1.0-jquery.js.

¿Qué opinas? ¿Cómo mejorarías este complemento?