Bienvenidos sean a este post, hoy seguiremos con los plug-in pero de una manera especial.
Hasta ahora hemos visto un par de plug-in que hacen tareas especificas pero la libreria del titulo realiza un monton de tareas dado que el equipo creador se enfoco en poder conceder un monton de artilugios (widgets) para mejorar la experiencia web y hacerla semejante a una aplicacion de escritorio, asi como incorporar la capacidad de realizar drag and drop, cambiar el tamaño, ordenar, seleccionar y muchas acciones mas sobre elementos, y estos widgets pueden ser:
- Botones
- Selectores de fechas
- Dialogos
Y muchos mas asi como tambien agregamos efectos y animaciones, si bien no lo vamos a cubrir completamente en este post si consigo un buen material armare uno especifico, nuestro primer paso sera descargar el plug-in para ello deben ir a la siguiente pagina:
En la seccion de Downloads pueden descargar las distintas versiones estables y a su vez su contenido, pueden serlecccionar todo o simplemente lo que necesiten, una vez realizado presionan download y se descargara la libreria en un .zip, para probarlo usaremos el codigo del post anterior, en caso de no tenerlo les dejo un link para descargarlo:
Extraigan todos los archivos en un directorio y despues de realizado esto, extraigan todo el contenido del archivo de la libreria en este mismo directorio, con todo esto realizado podemos pasar al ejemplo.
⚠¡ Aviso !⚠
Antes de continuar les recomiendo que eliminen el siguiente segmento de codigo del archivo codigo.js:
if ($.cookie('cicloPausado')) {
$libros.cycle('pause');
}
Porque sino deberan usarlo si o si desde un servidor web.
Un ultimo aviso, al momento de extraer el contenido del archivo de la libreria renombren el nombre del directorio donde esta a jqueryui,, simplemente para mayor comodidad al momento de implementarlo, con esto comentado pasemos a modificar el primer archivo y este sera plugin.html donde en la seccion de head agregaremos el siguiente tag:
<script src="jqueryui/jquery-ui.min.js"></script>
Este deben agregarlo antes del llamado a codigo.js, con esto lo implementamos, ahora nuestro siguiente paso sera comenzar a trabajar, veamos el primer tema.
Animacion de colores
Este va a ser el primer efecto que probaremos, es una animacion simple de transicion y usaremos al metodo animate, para esto iremos al archivo codigo.js y el siguiente segmento de codigo:
$(document).ready(function() {
var $libros = $('#libros');
var $controles = $('<div id="control-libros"></div>');
$controles.insertAfter($libros);
$('<button>Pausa</button>').click(function(e) {
e.preventDefault();
$libros.cycle('pause');
$.cookie('cicloPausado', 'y');
}).appendTo($controles);
$('<button>Retomar</button>').click(function(e) {
e.preventDefault();
$libros.cycle('resume');
$.cookie('cicloPausado', null);
}).appendTo($controles);
});Lo modificaremos de la siguiente manera:
$(document).ready(function() {
var $libros = $('#libros');
var $controles = $('<div id="control-libros"></div>');
$controles.insertAfter($libros);
$('<button>Pausa</button>').click(function(e) {
e.preventDefault();
$libros.cycle('pause');
$.cookie('cicloPausado', 'y');
}).appendTo($controles);
$('<button>Retomar</button>').click(function(e) {
e.preventDefault();
$libros.cycle('resume');
$.cookie('cicloPausado', null);
}).appendTo($controles);
$libros.hover(function() {
$libros.find('.titulo').animate({
backgroundColor: '#eee',
color: '#000'
}, 1000);
}, function() {
$libros.find('.titulo').animate({
backgroundColor: '#000',
color: '#fff'
}, 1000);
});
});Basicamente le agregamos un evento para cuando pasemos arriba de la lista libros, en este caso le diremos que busque el estilo titulo y le aplicaremos el metodo animate, en este cambiaremos el color del fondo y la letra y una demora de 1 s (1000 ms), esto lo hara siempre q este arriba del titulo, la siguiente vuelve a hacer lo mismo pero reestablece los colores originales cuando salimos de estar arriba de este, con esto comentado veamos como trabaja
Como pueden ver de una manera muy simple pudimos agregar un efecto simple pero funcional para indicar algo, esto gracias a que jQuery UI nos permite agregar las propiedades DOM para poder dar el efecto visto, pasemos a ver el siguiente caso.
Animaciones de clases
Este en realidad es una adicion a los metodos addClass, removeClass y toggleClass dado que jQuery UI nos permite adicionar un argumento mas para controlar la animacion de mejor forma, las funciones comentadas las hemos visto anteriormente en otros posts, pero antes de comenzar con el codigo vayamos al archivo estilo.css y agreguemos el siguiente codigo:
h1 {
text-align: center;
border: 0 solid #fff;
width: 500px;
margin-bottom: 20px;
}
h1.resaltado {
border: 10px solid #F79321;
padding: 10px;
width: 460px;
margin-bottom: 0;
background-color: #000;
color: #F79321;
}Agregamos dos estilos nuevos, el primero para reemplazar al existente y el segundo para cuando apliquemos el efecto, con esto realizado vayamos al archivo codigo.js y agreguen el siguiente codigo:
$(document).ready(function() {
$('h1').click(function() {
$(this).toggleClass('resaltado','slow');
});
});En este caso asociamos el evento click a todos los estilos h1, donde cada vez que le hagamos click alternara entre aplicar o no el estilo llamado resaltado, si lo prueban funcionara con ese efecto pero ahora vamos a aplicarle el efecto que nos permite agregar jQuery UI, para ello cambiaremos la linea de toggleClass de la siguiente manera:
$(this).toggleClass('resaltado','slow','easeInExpo');En este caso le agregamos una animacion donde primero cargara todo lentamente y luego lo completa rapidamente, veamos como funciona mediante el siguiente video
Hasta ahora hemos visto cosas muy basicas y que se complementan a lo ya visto anteriormente, para ver algo distinto pasemos al siguiente tema.
effect
Esta funcion permite aplicar efectos a un elemento, estas van desde mostrar u ocultar hasta efectos de slide, para verlo de una manera simple vayamos al archivo codigo.js y tomemos el siguiente segmento de codigo:
$('<button>Retomar</button>').click(function(e) {
e.preventDefault();
$libros.cycle('resume');
$.cookie('cicloPausado', null);
}).appendTo($controles);
Y modifiquemoslo de la siguiente manera:
$('<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);El cambio principal es que ahora en una variable almacenamos el estado de pausado de la lista, de esto hablamos en el post anterior, despues tenemos un condicional donde evalua la longitud de la variable anterior, si la lista esta en pausa tendra un valor y por lo tanto length tendra uno, en todo caso procede a retomar el ciclo, en caso contrario a este boton le aplicaremos el efecto de «shake» para mostrar que no se puede usar porque no esta pausado, distance se usara para establecer cuanto se desplazara, esto lo agregaremos al div donde estan los controles, veamos como funciona
Como pueden ver en el video de una forma muy simple hicimos algo de forma vistosa para indicar que el boton no debe ser usado, antes de finalizar les dejo todos los archivos modificados en este post y necesarios para probar el proyecto:
Nota: En el archivo tambien inclui a todos los plug-in utilizados hasta ahora.
En resumen, hoy hemos visto a la jQuery UI plug-in library, de que se trata, como descargarla, como implementarla, y algunos efectos que podemos utilizar gracias a esta, espero les haya sido de utilidad 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
El blog de Tinchicus 