jQuery PointPoint:un complemento para señalar cosas

Los diseñadores web se encuentran en una situación difícil:tienen que crear hermosas interfaces de usuario que sean intuitivas y utilizables al mismo tiempo. A veces, a pesar de nuestros fervientes esfuerzos, las aplicaciones web pueden volverse difíciles de usar para los usuarios novatos. Una solución es crear algún tipo de recorrido por las características de su aplicación. La otra es incorporar señales visuales en el diseño mismo.

En este tutorial, escribiremos un complemento jQuery que lo ayudará a llamar la atención de los usuarios hacia una parte específica de la página, en forma de una pequeña flecha que se muestra junto al cursor del mouse. Esto puede ser útil para señalar campos de formulario perdidos, botones que deben presionarse o errores de validación que deben desplazarse para ver.

Cómo funciona

Vayamos directamente al código:tiene alrededor de 100 líneas (con comentarios), por lo que no es difícil de seguir.

jquery.pointpoint.js

(function($){

    // Defining our jQuery plugin

    $.fn.pointPoint = function(prop){

        // Default parameters

        var options = $.extend({
            "class"     : "pointPointArrow",
            "distance"  : 30
        },prop);

        var pointers = [];

        // If CSS transforms are not supported, exit;

        if(!$.support.transform){
            this.destroyPointPoint = function(){};
            return this;
        }

        this.each(function(){

            var findMe = $(this),
                point = $('<div class="'+options['class']+'">').appendTo('body'),
                offset, center = {}, mouse = {}, props = {}, a, b, h, deg, op,
                pointHidden = true, rad_to_deg = 180/Math.PI;

            pointers.push(point);

            // Calculating the position of the pointer on mouse move

            $('html').bind('mousemove.pointPoint',function(e){

                if(pointHidden){
                    point.show();
                    pointHidden = false;
                }

                offset = findMe.offset();

                // The center of the element we are pointing at
                center.x = offset.left + findMe.outerWidth()/2;
                center.y = offset.top + findMe.outerHeight()/2;

                mouse.x = e.pageX;
                mouse.y = e.pageY;

                // We are treating the mouse position and center
                // point as the corners of a right triangle.
                // h is the hypotenuse, or distance between the two.

                a = mouse.y - center.y;
                b = center.x - mouse.x;
                h = Math.sqrt(a*a + b*b);

                // Calculating the degree (in radians),
                // the pointer should be rotated by:
                deg = Math.atan2(a,b);

                // Lowering the opacity of the pointer, depending
                // on the distance from the mouse pointer

                op = 1;
                if(h < 50){
                    op = 0;
                } else if(h < 160){
                    op = (h - 50) / 110;
                }

                // Moving and rotating the pointer

                props.marginTop  = mouse.y-options.distance*Math.sin(deg);
                props.marginLeft = mouse.x+options.distance*Math.cos(deg);
                props.transform  = 'rotate('+(-deg*rad_to_deg)+'deg)';
                props.opacity    = op;

                point.css(props);

            }).bind('mouseleave.pointPoint',function(){
                point.hide();
                pointHidden = true;
            });

        });

        this.destroyPointPoint = function(){

            // Unbind all the event handlers
            // and remove() the pointers 

            $('html').unbind('.pointPoint');

            $.each(pointers,function(){
                this.remove();
            });

        };

        return this;
    };

})(jQuery);

Cuando llamas a pointPoint() , crea un detector de eventos para el evento mousemove. En su interior, el complemento calcula la posición y la rotación de la flecha utilizando funciones de trigonometría. Consulte este artículo de Wikipedia si desea obtener más información.

También estoy usando los ganchos CSS de transform.js para jQuery, que nivelan la compatibilidad con las rotaciones de CSS3 en los navegadores que las admiten (esto significa que el complemento no funcionará en IE678 ).

Cómo usarlo

Para incluir jQuery PointPoint en su sitio web, debe copiar el jquery.pointpoint carpeta (ubicada en /assets en el zip descargable) en su estructura de directorios. Después de esto, todo lo que necesita hacer es incluir los dos archivos js y la hoja de estilo, que encontrará dentro, en su página. Consulte index.html como ejemplo.

El complemento en sí es fácil de usar. Solo necesita llamarlo en el elemento al que necesita apuntar. El complemento encontrará automáticamente la posición del elemento y actualizará la flecha cuando mueva el mouse. También puede pasar un objeto de argumentos con dos propiedades:"clase " y "distancia ".

$('#pushButton').pointPoint();

/*
    // You can also pass arguments:
    $('#pushButton').pointPoint({
        "class":"myNewPointer",
        "distance":100
    });
*/

El fragmento anterior agrega una flecha al lado del cursor del mouse, que apunta al elemento con una identificación de "pushButton ". Los argumentos del segundo ejemplo establecerán una clase personalizada en la flecha (en caso de que desee personalizar el estilo) y la moverán más lejos del cursor del mouse. Los estilos predeterminados de la flecha se definen en jquery.pointpoint.css .

Cuando llama al complemento, devuelve un objeto jQuery, por lo que puede usarlo dentro de cadenas de llamadas de métodos. Sin embargo, hay una diferencia menor:este objeto tiene un método adicional:destroyPointPoint() , que puede usar para cancelar el complemento:

var pp = $('#pushButton').pointPoint();

$('body').click(function(){
    pp.destroyPointPoint();
});

Esto eliminará todas las flechas y destruirá los detectores de eventos para el evento de movimiento del mouse.

¡Hemos terminado!

Espero que encuentre útil el complemento y solo lo use para el bien, no para el mal. Como siempre, comparte tus sugerencias en la sección de comentarios.