Archivo de la etiqueta: jquery

jQuery Custom Events (eventos personalizados)

En jQuery podemos crear eventos propios y asociarles a estos una funcionalidad. En cualquier momento de nuestro código podremos lanzar estos eventos asignados a objetos de nuestro DOM.

Para asignar eventos propios usaremos la función de jQuery .on() de la forma:

l_obj_selector.on("processing", function (e) { ... });

dentro de la función podremos añadir argumentos de entrada para poder parametrizar nuestros eventos y tomar distintas decisiones en el código asignado:

l_obj_selector.on("processing", function (e, a_b_processing, a_b_show, a_b_done) { ... });

Para lanzar estos eventos haremos uso de la función trigger() de jQuery sobre un determinado selector indicando el nombre del evento y los parámetros opcionales a la función que se ejecutará;

l_obj_mi_selector.trigger("processing", [ true, $("#item_1").attr("data-show") == 1, false ]);

Anuncios

Validar un solo campo en JQuery Validation

Para validar un único campo de un formulario configurado para ser validado con JQuery Validation tan sólo debes añadir la siguiente linea:

$(_selector_).valid();

donde “_selector_” es el selector JQuery del campo que deseas validar, por ejemplo:

$(“#txt_email”).valid();

Este método, además de poder mostrar/ocultar el error espécifico que hayas configurado en la declaración del método validate(), también devuelve true o false, con lo que podrás determinar además que acciones realizar en función de si la validación se realizó correctamente o no

 

http://jqueryvalidation.org/

15 recursos útiles relacionados con jQuery

En esta página podeis encontrar enlaces a 15 recursos de ayuda relacionados con jQuery ideales para empezar una primera toma de contacto, enlaces, artículos realmente útiles, plugins, etc. Algunos enlaces que proponen fueron no hace demasiado mi primera toma de contacto con este espectacular framework.

15 Resources To Get You Started With jQuery From Scratch

jQuery – plugin imgPreview

imgPreview es un plugin para jQuery con el que podremos realizar previsualizaciones de imágenes a modo de tooltip. La forma de uso es sencilla, usamos el tag <a> donde queramos aplicar el tooltip indicando qué imagen aparecerá en el mismo al pasar el ratón por el enlace tooltip:


<a href="https://websenior.wordpress.comg/img/mi-imagen.jpg">tooltip</a>

Disponemos de varias opciones de configuración, como establecer el ancho del tooltip:


$('a').imgPreview({
    imgCSS: {
        width: '200px'
    }
});

En la página oficial podemos documentarnos sobre otras opciones que proporciona el plugin.

Página oficial jQuery imgPreview

Referencia online jQuery 1.2

Una página que nos puede servir de gran ayuda en nuestros desarrollo jQuery. Nos presenta de manera visual una referencia completa de las funcionalidades de este framework. A día de hoy lo encontramos actualizado a la versión 1.2.6.

Referencia online jQuery 1.2.

jQuery quicksearch Plugin

Una vez más me he visto gratamente sorprendido por otro plugin para el framework jQuery. Y es que si tenemos en nuestro sitio web algún tipo de listado (tablas, párrafos, listas,…) y deseamos establecer un filtro que en tiempo real vaya actualizando dicho listado con los registros que se ajusten a la búsqueda, sin duda alguna, necesitamos el plug-in quicksearch.

Puedes descargárte su última versión y ver distintos ejemplos de uso en su web oficial.

jQuery Quicksearch

jmaps – jQuery Google Maps Plugin

Google nos anuncia un nuevo plugin para jQuery llamado jmaps. Este plugin nos facilita la gestión de mapas Google en nuestras páginas. Con jmaps podemos realizar operaciones como:

  • Usar geocodificación de Google Maps (normal e inversa).
  • Realizar búsquedas de direcciones.
  • Añadir puntos.
  • Añadir polígonos
  • Obtener información del mapa como tamaño, centro…

Sirva como ejemplo la creación de un mapa y su centrado en un punto:

jQuery('#map1').jmap('init', {
    'mapType':'hybrid',
    'mapCenter':[37.4419, -122.1419]
});

Documentación jmaps