Actualidad jQuery

Hoy os vamos a enseñar una librería en jQuery para darle un aspecto distinto y elegante a nuestros formularios.

Para empezar vamos a bajarnos la librería de su página web oficial (dfc-e.com) y añadiremos la librería a nuestro sitio web como en el ejemplo:

<script type="text/javascript" src="../js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="../jqtransformplugin/jquery.jqtransform.js"></script>
<link href="../jqtransformplugin/jqtransform.css" rel="stylesheet" type="text/css" />

Añadimos como siempre la librería jQuery, añadimos la librería jqTransform y la hoja de estilos de esta.

Se activa para todas las etiquetas de formulario, input, radio, checkbox, textarea que tengamos entre las etiqueta <form> </form>

Podemos activarlo para todos los formularios que nos encontremos dentro de la página o para un formulario específico como en el siguiente ejemplo, se lo activamos al formulario con id form2:

<script type="text/javascript">
$(document).ready(function(){
	$("#form_2").jqTransform();
});
</script>

<form action="" name="form_2" id="form_2" method="post"></form>

De esta forma, una vez haya cargado la página, se activaría jqTransform para nuestro formulario. Si quisiéramos aplicar el estilo de la librería en algún contenido dinámico cargado vía Ajax, etc. O bien aplicar el estilo más adelante, de forma interactiva, lo podríamos hacer así:

<script type="text/javascript">
$(document).ready(function(){
	$('#formulario_3_act').click(function() {
		$("#form_3").jqTransform();
	});
});
</script>

En este ejemplo utilizamos la función click() de jQuery para aplicar la librería jqTransform, una vez que hayamos hecho click sobre el botón formulario_3_act que podéis ver en el ejemplo final:

• Ejemplo
• jqTransform 1.1

Hoy os vamos a presentar Shadowbox. Con Shadowbox podemos abrir una imagen, una galería de imágenes, una página web externa en HTML, una animación SWF o incluso videos de Youtube, Quicktime, Yahoo! video, Vimeo, etc.

Podemos conseguir un efecto muy elegante, en apenas 1 minuto de trabajo.

Para descargar la librería nos iremos a la página web oficial (shadowbox-js.com) y en la sección de Download, seleccionaremos como adaptador jQuery, seleccionaremos nuestro idioma y marcaremos todos los checkbox para tener compatibilidad al 100% con imagenes, videos, html externos, etc.

Simplemente tendremos que añadir la librería Shadowbox así:

<link href="../shadowbox-3.0.3/shadowbox.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="../js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="../shadowbox-3.0.3/shadowbox.js"></script>
<script type="text/javascript"> Shadowbox.init({ language: "es", players: ['img', 'html', 'iframe', 'qt', 'wmp', 'swf', 'flv'] }); </script>

Como vemos en este ejemplo, primero incluimos jQuery (jquery-1.4.2.min.js), y después la librería Shadowbox (shadowbox.js), tanto el archivo .JS como el .CSS con los estilos.

Una vez incluida la librería Shadowbox, simplemente tendremos que añadir el parametro rel="shadowbox" dentro de la etiqueta <a>

<ul>
<li><a href="foto1.jpg" rel="shadowbox"><img src="foto1_p.jpg" width="200" height="150" /></a></li>
</ul>

Si queremos hacer una galería de fotos, simplemente tendríamos que agregar el número de la galería detrás del shadowbox, por ejemplo el 0:

<ul>
<li><a href="foto1.jpg" rel="shadowbox[0]"><img src="foto1_p.jpg" width="200" height="150" /></a></li>
<li><a href="foto2.jpg" rel="shadowbox[0]"><img src="foto2_p.jpg" width="200" height="150" /></a></li>
<li><a href="foto3.jpg" rel="shadowbox[0]"><img src="foto3_p.jpg" width="200" height="150" /></a></li>
</ul>

Si quisiéramos hacer alguna galería más dentro de la misma página, podríamos poner shadowbox[1], shadowbox[2], etc. Tantas como galerías queramos hacer…

Os dejo los ejemplos que os he comentado, más un ejemplo de video en Youtube y enlace a página externa, en este caso a Google.

• Ejemplo
• Shadowbox 3.0.3

Una de las grandes ventajas que tenemos en jQuery es la facilidad en seleccionar un elemento, obtener sus atributos, modificar sus atributos, modificar su contenido, etc.

En JavaScript teníamos que hacerlo así:

<script type="text/javascript">

// Seleccionamos el div con id "capa"
document.getElementById("capa");

// Seleccionamos todos los div
document.getElementsByTagName("div");

// Seleccionamos todos los div con la clase "capa"
document.getElementsByClassName("capa");

</script>

Con la llegada de jQuery se simplifica muchísimo, lo podemos hacer así:

<script type="text/javascript">
$(document).ready(function(){

// Seleccionamos el div con id "capa"
$("#capa");

// Seleccionamos todos los div
$("div");

// Seleccionamos todos los div con la clase "capa"
$(".capa");

});
</script>

Una vez que ya sabemos como seleccionar un elemento y administrarlo, vamos a hacer alguna prueba muy simple:

<script type="text/javascript">
$(document).ready(function(){

// Mostramos en un alert el contenido de la capa con id "capa"
alert($("#capa").html());

// Cambiamos el contenido de la capa con clase "capa"
$(".capa").html("Probando, probando..");

});
</script>

• Ejemplo

Para quien no conozca todavía jQuery, es una librería JavaScript muy rápida y ligera para simplificar el desarrollo de páginas web. En cuanto a la compatibilidad con los distintos navegadores no existe ningún problema, funciona correctamente con (Internet Explorer 6, 7, 8, Firefox, Opera, Safari, Chrome).

¿Qué podemos hacer con jQuery? Realmente la pregunta sería, ¿Qué no podemos hacer con jQuery? Personalmente destacaría la facilidad con la que podemos animar una página web, sin utilizar Flash. También habría que destacar la facilidad con la que podemos hacer páginas web dinámicas interactivas, contenidos actualizables sin tener que recargar la página.

Bueno vamos a dejarnos de rollos, y comenzaremos por lo básico y más simple. Para empezar a trabajar con jQuery deberíamos bajarnos la librería desde su página web. Nos encontraremos con 2 versiones, la (Minified version) y la (Source version). Ambas funcionan igual, la versión Minified es bastante más ligera, y sino tenemos intención de modificar el código fuente original de jQuery, la mejor opción será bajar esta versión.

A día de hoy tendríamos disponible la versión 1.4.2 Comenzamos incluyendo jQuery con una etiqueta <script> dentro del <head></head> de nuestro sitio web.

<script type="text/javascript" src="jquery-1.4.2.min.js"></script>

Una vez hecho esto, vamos a probar que hemos cargado la librería correctamente. Antiguamente cuando queríamos ejecutar un Script al cargar la página (onload) utilizabamos esto:

<script type="text/javascript">
window.onload = function() { alert("Probando, probando..."); }
</script>

Y ahora en jQuery lo haríamos así:

<script type="text/javascript">
$(document).ready(function(){
alert("Probando, probando...");
});
</script>

Si nos sale el alert diciendo "Probando, probando…" es que habremos cargado correctamente jQuery. Ya tendríamos nuestra librería cargada y lista para trabajar con ella.

• Ejemplo