jQuery / jQuery UI plug-in library – 2da. parte

Bienvenidos sean a este post, hoy continuaremos con esta libreria.

En el post anterior vimos como trabajar con algunos efectos de esta libreria, hoy nos centraremos en las interacciones y otros elementos, para trabajar con este debemos utilizar los archivos del post anterior, en caso de no tenerlos les dejo un link para descargarlos:

Extraigan todo el contenido en un directorio y listo, esta incluido el plug-in del titulo, con todo esto realizado continuemos analizando el plug-in para ello pasaremos al primer tema.

Componentes de interaccion

En el post anterior vimos con una serie de efectos que son propios de jQuery pero que la libreria nos permitia extender y agregar mas opciones, asi como a su vez un metodo para utilizar un efecto propio pero hoy nos centraremos mas en las interacciones del usuario con nuestra pagina, cuando nos referimos a interacciones hablamos de cuando el usuario hace un drag and drop en la pagina, hace un orden en esta, o modificar su tamaño (resize), para este caso nos centraremos en esta ultima interaccion representada por el componente denominado Resizable, para ello primero iremos al archivo estilo.css y le agregaremos el siguiente segmento de codigo:

#libros .ui-resizable {
  bottom: 0;
}

Este es simplemente para aplicar al resizable donde lo ubicaremos, no mucho mas, el siguiente paso sera ir al archivo plugin.html y en la seccion head despues del llamado que carga a estilo.css agregaremos la siguiente linea:

<link rel="stylesheet" href="jqueryui/jquery-ui.min.css"/>

Esta sera el de estilos de jQuery UI, ubiquenlo cerca de nuestro archivo de estilos, simplemente para que ya este cargado al momento de llamar a los archivos js, nuestro siguiente paso sera ir al archivo codigo.js al cual le agregaremos el siguiente segmento de codigo:

$(document).ready(function() {
	var $libros = $('#libros');
	$libros.find('.titulo').resizable();
});

En este asociaremos el resultado del selector a una variable, esta a su vez le aplicaremos el metodo find para buscar la clase titulo y luego le aplicamos el componente resizable, si lo probamos trabajara de la siguiente forma

En este caso al usarlo de manera predeterminada nos permite unicamente cambiarle el tamaño vertical pero si queremos modificarlo de otra forma debemos hacer lo siguiente:

$(document).ready(function() {
	var $libros = $('#libros');
	$libros.find('.titulo').resizable({
		handles: 'sw'
	});
});

Por medio de handles le decimos que utilice la parte inferior (s) y la izquierda de la pantalla (w), como podran darse cuenta coincide con los puntos cardinales pero en ingles, si lo prueban funcionara de la siguiente forma

Como pueden ver ahora para cambiar el tamaño lo podemos hacer desde el rincon inferior izquierdo, asi pueden divertirse haciendo varias pruebas, pasemos al siguiente tema.

Nota:
Cuando recopile mas informacion sobre esta libreria, hablare mas profundamente.

Widgets

Como dijimos no solamente tenemos efectos y medios de control de interaccion sino tambien de elementos para aplicar a nuestras paginas, para ver este concepto vamos a reemplazar nuestros botones con los de la libreria, para ello iremos al archivo codigo.js y modificaremos el siguiente segmento de codigo:

$('<button>Pausa</button>').click(function(e) {
	e.preventDefault();
	$libros.cycle('pause');
	$.cookie('cicloPausado', 'y');
}).appendTo($controles);
$('<button>Retomar</button>').click(function(e) {
	e.preventDefault();
	var $pausado = $('ul:paused');
	if ($pausado.length) {
		$pausado.cycle('resume');
	}
	else {
		$(this).effect('shake', {
			distance: 10
		});
	}
}).appendTo($controles);

De la siguiente manera:

$('<button>Pausa</button>').click(function(e) {
	e.preventDefault();
	$libros.cycle('pause');
	$.cookie('cicloPausado', 'y');
}).button({
	icons: {primary: 'ui-icon-pause'}
}).appendTo($controles);
$('<button>Retomar</button>').click(function(e) {
	e.preventDefault();
	var $pausado = $('ul:paused');
	if ($pausado.length) {
		$pausado.cycle('resume');
	} else {
		$(this).effect('shake', {
			distance: 10
		});
	}
}).button({
	icons: {primary: 'ui-icon-play'}
}).appendTo($controles);

La unica modificacion que hicimos en ambos botones fue agregar el metodo button que es propio de la libreria y en ambos casos lo usamos principalmente para establecer los iconos que los representan, tanto para la pausa como para el play, y en ambos casos van despues del evento click y antes del appendTo, si recargan la pagina se vera de la siguiente forma

Nuestro siguiente elemento sera agregar un control deslizante para ello en el bloque de codigo donde estaban los botones modificados anteriormente agregaremos el siguiente segmento de codigo:

$('<div id="slider"></div>').slider({
	min: 0,
	max: $('#libros li').length -1,
	slide: function(e, ui) {
		$libros.cycle(ui.value);
	}
}).appendTo($controles);

Primero «creamos» un div para el deslizador que llamaremos slider, esto ya lo hicimos en otros ejemplos, a este div le pasamos la funcion slider donde estableceremos el valor minino y maximo de este, slide establecera la ubicacion en la barra en base al valor que devuelve la libreria, pero en este caso no se actualizara automaticamente porque no hay nada que lo llene automaticamente, para ello en el mismo archivo debemos tomar este bloque de codigo:

$(document).ready(function() {
	$('#libros').cycle({
		timeout: 2000,
		speed: 200,
		pause: true
	});
});

Y lo modificaremos de la siguiente manera:

$(document).ready(function() {
	$('#libros').cycle({
		timeout: 2000,
		speed: 200,
		pause: true,
		before: function() { 
			$('#slider').slider('value', $('#libros li').index(this));
		}
	});
});

En este caso simplemente agregamos a la opcion de before, esta sera la encargada de establecer un valor inicial para el slider y este inicie al slider, y despues lo desplace a medida que se va cambiando, veamos como trabaja ahora con todo esto realizado

En el video podemos ver como se desplaza automaticamente cuando se cambia de portada, por otro lado tambien vemos como es el nuevo boton, y un detalle opcional como es eliminar el random para dar una mejor visualizacion del ejemplo, si desean hacerlo simplemente pasen de true a false la siguiente linea:

$.fn.cycle.defaults.random = false;

Por ultimo si observan en el video no use al chrome sino al firefox, esto es asi porque el primer navegador no selecciona nada al comienzo por lo tanto no se vera el efecto hasta seleccionarlo, ya sea por mouse o con el teclado, esto es simplemente anecdotico pasemos al siguiente tema.

jQuery UI Theme Roller

Este es simplemente una opcion de la pagina de jQueryUI para descargar temas predeterminados que podemos aplicar rapidamente a nuestra pagina, por ejemplo en el caso del post anterior y el de hoy fue siempre con el tema base, pero si quieren cambiarlo vayan a su seccion:

https://jqueryui.com/themeroller/

Ahi tendran las distintas opciones para descargar, en el siguiente video les muestro algunos de los disponibles

En cualquier caso observen que poseen un boton de download pero este no lo descargara sino que los redireccionara a la seccion de download de la pagina, la cual usamos en el post anterior para descargar la libreria pero con una diferencia, si van al final ahora tendran la opcion de theme seleccionada con el tema seleccionado

Y deberan descargar nuevamente la libreria pero esta vez con el tema seleccionado, y este se aplicara automaticamente cuando lo usemos, por lo tanto si quieren variar la estetica de una manera simple sigan nuevamente los pasos y descarguen la libreria nuevamente con el nuevo tema, antes de finalizar les dejo los archivos modificados y codigos finales vistos en este post:

En resumen, hoy hemos ccompletado una explicacion breve sobre la libreria jQuery UI plug-in, en este caso nos hemos centrado en los componetes de interaccion, asi como elementos de una pagina y por ultimo como aplicar un tema de manera sencilla a las paginas mediante esta libreria, espero les haya sido util sigueme en tumblr, Twitter o Facebook para recibir una notificacion cada vez que subo un nuevo post en este blog, nos vemos en el proximo post.

Donación

Es para mantenimento del sitio, gracias!

$1.50