Archivo de la etiqueta: jquery

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?).

Anuncios

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.

jQuery 1.2 Cheat Sheet

Chuleta bastante útil de distintas funcionalidades de jQuery, ideal para tenerla siempre a mano o en nuestro tablón de notas.

Chuleta jQuery 1.2

Chuleta jQuery 1.2

Chuleta jQuery.

Javascript no obtrusivo

Unobtrusivo. Un “palabro” muy de moda ¿Qué quiere decir?

Recuerdo mi primera página dinámica. Básicamente consistía en un fichero .php en el que se podía ver varias partes de código PHP, código HTML formado por tags que contenian atributos tipo width, align, font… (que tiempos aquellos!), y media ración de funciones JavaScript. En fin, un caos llamado “spaguetti code”.

Mas adelante leí acerca de una tal arquitectura MVC (Model View Controller), con aquello se conseguía quitar las funcionalidades definidas en los bloques PHP y definirlas como métodos de objetos. Luego aparecieron las hojas de estilo CSS y con ellas se fueron los atributos width, align, font… Y ahora llega el unobstrusive JavaScript :).

Lo que se prendete con esta técnica es “separar” la funcionalidad javaScript del código HTML, al igual que separamos el diseño con CSS. Alguna vez hemos tenido el típico formulario que necesitabamos validar con JavaScript, imaginemos que lo enviábamos con un boton (no del tipo submit, sino usando onclick) para ello declarabamos:

<input type="buttom" id="bt_send" onsubmit="javascript:validate();"/>

Ahora lo que deberíamos hacer es añadir ese comportamiento tachado en el fichero JavaScript que utilice nuestra página. La tarea no es sencilla pero disponemos de librerias que nos facilitaran el trabajo. Personalmente utilizo JQuery, aunque hay otras donde elegir, cuestión de gustos. Con JQuery puedo hacer en el código JavaScript:

$("#bt_send").bind("onClick", validate);

Con lo que se lanza la función validate que tenga definida al hacer click en el botón. Una gozada.

JQuery