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 ]);

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

ShadowBox – Algo mas que lightBox

En el post anterior hablamos de jQuery lightBox, un plugin que nos permite desarrollar atractivas galerias de fotos sin ninguna dificultad con javascript no obtrusivo. Pues bien, ¿que opinarías si pudieras hacer galerias con la misma facilidad pero con cualquier tipo de contenido? Si, si, imágenes, videos, películas flash, html, googlemaps, youtube… espera, espera, que encima funciona por si misma o la puedes acoplar a jQuery, Prototype, Mootolls, Ext, Dojo… y obviamente configurable en comportamiento y diseño (CSS). Pues esa librería existe y se llama ShadowBox.js.

ShadowBox

ShadowBox

ShadowBox es descargable y usable bajo licencia Creative Commons Attribution-Noncommercial-Share Alike. Si queremos usarla en algún proyecto comercial, debemos comprar una licencia por unos ridículos 20$ (¿acaso no lo merece?).

jQuery LightBox – Galeria de Fotos

¿Necesitas una galería de fotos? ¿Que tenga algún efecto original pero que no tengamos que usar flash? Seguramente conozcas lightBox, pues has de saber que disponemos de un plugin lightbox para jQuery. Sencillo de usar, personalizable y funcional.

jQuery lightBox para galerias de fotos

jQuery lightBox para galerías de fotos

Cualquier duda, no dudes en comentarla.

jQuery lightBox

Resaltar filas de una tabla con jQuery

Un efecto que suelo emplear en las tablas que utilizo en cualquier aplicación web es la de resaltar la fila por la que sitúo el cursor. Con jQuery podemos hacerlo de una manera muy fácil y evitando añadir javascript obtrusivo a nuestro sitio.

Partimos de la tabla:

<table id="table_customer">
  <thead>
    <tr>
      <th>Name</th>
      <th>Surname</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Luis</td>
      <td>López</td>
    </tr>
    <tr>
      <td>Pedro</td>
      <td>Fernández</td>
    <tr>
  </tbody> (obviaremos el tfoot para el ejemplo)
</table>

y tenemos la siguiente clase CSS:

.tr_hover {background-color: #ffccee}

nos quedaría definir el comportamiento usando jQuery:

// para cada fila del body de la tabla table_customer
// defino el comporatamiento que tendrá cuando el ratón
// pase por encima
$("#table_customer tbody tr").mouseover(function() {
     // a la fila sobre la que esté el ratón (this)
     // le añado la clase que la resaltará
     $(this).addClass("tr_hover");
});

// para cada fila del body de la tabla table_customer
// defino el comporatamiento que tendrá cuando el ratón
// deje de estar encima
$("#table_customer tbody tr").mouseout(function() {
     // a la fila sobre la que esté el ratón (this)
     // le quito la clase que hace que resalte
     $(this).removeClass("tr_hover");
});

y listos, esto tendrás que implementarlo el ready() o bien en la funcion de tipo Ajax response que implementes a una llamada Ajax que genere la tabla con los datos.

Página oficial de jQuery.