Como parte de mis juegos con javascript, estoy empezando a probar jQuery y jQuery UI. Se trata de dos librerías muy útiles que facilitan mucho el trabajo con html en una página web.

En el caso de jQuery UI, añade un buen número de controles y efectos gráficos que permiten dotar a nuestras aplicaciones web de un aspecto bastante profesional, sobre todo si no somos diseñadores y no somos capaces de crear ese aspecto nosotros mismos. Además, jQuery UI permite personalizar el aspecto de los controles, por lo que podemos elegir entre una amplia variedad de aspectos ya creados o incluso personalizarlos nosotros mismos.

Desde el punto de vista de la experiencia de usuario, es importante que los controles y la información que se muestran en la página estén diseñados con un aspecto consistente para que sean fácilmente reconocibles, por lo que vamos a intentar aprovechar los controles que ya tiene jQuery UI para usarlos en otros puntos de la aplicación.

jQuery UI incluye dos tipos de formas de resaltar un mensaje al usuario para indicarle errores y advertencias:

Estos mensajes son usados por jQuery UI en algunos controles, pero no he encontrado una forma fácil de usarlos arbitrariamente en nuestra aplicación. La parte buena de todo esto es que jQuery es muy sencillo de extender con nueva funcionalidad, y añadirle la funcionalidad necesaria para poder mostrar errores y advertencias que mantengan el estilo general del UI es fácil. Para ello, podemos declarar dos nuevas funciones dentro de jQuery:

jQuery.fn.asError = function() {
    return this.each(function() {
        $(this).replaceWith(function(i, html) {
            var newHtml = "<div class='ui-state-error ui-corner-all' style='padding: 0 .7em;'>";
            newHtml += "<p><span class='ui-icon ui-icon-alert' style='float: left; margin-right: .3em;'>";
            newHtml += "</span>";
            newHtml += html;
            newHtml += "</p></div>";
            return newHtml;
        });
    });
};

jQuery.fn.asHighlight = function() {
    return this.each(function() {
        $(this).replaceWith(function(i, html) {
            var newHtml = "<div class='ui-state-highlight ui-corner-all' style='padding: 0 .7em;'>";
            newHtml += "<p><span class='ui-icon ui-icon-info' style='float: left; margin-right: .3em;'>";
            newHtml += "</span>";
            newHtml += html;
            newHtml += "</p></div>";
            return newHtml;
        });
    });
};

Para añadir nuevas funciones a jQuery, debemos agregarlas al objeto fn de jQuery. Esto deberemos hacerlo antes de empezar a utilizar jQuery en nuestra página. Una vez que lo hemos hecho, para añadir un mensaje de error basta con:

<div id=”error-list”>
</div>

$('<p>').text('soy el mensaje de error').appendTo('#error-list').asError();

En este caso, en nuestro html tendríamos un div (error-list) en al que iríamos añadiendo los errores. Cuando queramos añadir un error, creamos un nuevo elemento de tipo p (párrafo), le establecemos el texto, lo añadimos a la lista de errores e invocamos a nuestra nueva función para que lo formatee como error.

Algunas cosas a tener en cuenta al añadir funciones a jQuery:

• Hay que tener en cuenta qué representa this en cada contexto.
• Puesto que podemos seleccionar varios objetos a la vez, deberemos hacer un each para aplicar la acción a todos.
• La guía para crear plugins recomienda devolver $(this) para poder seguir encadenando funciones.

Todo bastante sencillo y práctico ;-).