Bienvenidos sean a este post, hoy seguiremos con los plug-ins o complementos.
Los plug-in no solo se limitan a agregar nuevas formas de extender nuestra libreria de jQuery sino que a su vez pueden modificar la conducta de alguna de las funciones ya existentes o inclusive iniciar algunos eventos de jQuery en determinadas acciones del usuario, para entender esto que mencionamos vamos a tomar el ejemplo que vimos en el post anterior, en caso de no tenerlo les dejo todos los archivos usados a continuacion:
Extraigan todos los archivos en un mismo directorio, con esto realizado podemos proceder a trabajar en el ejemplo que veremos hoy, pasemos al primer tema.
Selectores personalizados
Cuando permitimos este tipo de selectores en los plug-ins incrementan las capacidades de nuestros codigos, con el plug-in utilizado en el post anterior tenemos esta posibilidad y para ello vamos a tomar el archivo codigo.js y agregaremos el siguiente bloque 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');
}).appendTo($controles);
$('<button>Retomar</button>').click(function(e) {
e.preventDefault();
$libros.cycle('resume');
}).appendTo($controles);
});Aca haremos algo de magia pero nada que no hayamos visto antes, primero seleccionaremos a la lista libros y la enlazaremos a la variable $libros, despues definiremos una variable llamada $controles donde a traves del selector le pasaremos un nuevo div denominado control-libros, simplemente vacio, despues por medio de insertAfter lo insertaremos despues de la lista libros, observen que usamos la variable definida anterioremente, lo siguiente sera crear dos botones para agregarlos al div que insertamos anteriormente, son iguales pero uno sera para pausar y el otro para retomar, por tanto a traves de selector pasaremos el elemento button, el primero sera para definir el boton de pausa y el siguiente para retomar, en ambos le asociaremos el evento click, en ambos interceptaremos a este y con la ayuda de preventDefault evitaremos su conducta normal pero despues usaremos al metodo cycle en la variable $libros, para el caso de pausarlo usaremos como argumento pause, y en el caso de retomar le pasaremos resume para que salga de la pausa, y por ultimo cerraremos el evento y a estos dos botones con la ayuda de appendTo lo agregaremos al div control-libros que esta en $controles, con esto ya podriamos probarlo pero antes vamos al archivo estilo.css y agregaremos el siguiente codigo:
#control-libros {
margin: 10px 0;
width: 500px;
}
#control-libros button {
margin: 0 10px 10px 0;
float: left;
}
Esto es simplemente para que los botones esten mejor ordenados en el div y mejor ubicado el div, con todo esto realizado y comentado veamos como funciona ahora
Como podemos ver en el video cuando apretamos el boton de pausa se detiene toda actividad para continuar cuando apretamos el boton de retomar, esto esta bien para un elemento pero si queremos retomar varios elementos pausados? bueno, para ese caso debemos modificar el segmento del boton retomar y modificarlo de la siguiente manera:
$('<button>Retomar</button>').click(function(e) {
e.preventDefault();
$('ul:paused').cycle('resume');
}).appendTo($controles);En este caso es similar al anterior pero en lugar de usar un elemento especificado le decimos que busque todas las listas en estado pausado y por medio de resume quitamos el estado de pausa, este selector personalizado es propio del plug-in y este se activa cuando usemos a pause, facilitando nuestras tareas pero esto es solo una parte, pasemos a ver el siguiente tema.
Plug-in de funciones globales
Como el titulo lo indica ahora muchos plug-in proveen funciones globales para el namespace de jQuery, un patron muy comun de este tipo de funciones son para cuando se agregan caracteristicas especialmente los no relacionados a los elementos DOM en la pagina y para las que no son buenas candidatas para funciones de jQuery, para analizar este concepto vamos a utilizar otro plug-in, para ello deben descargar el sigueinte archivo:
Simplemente extraigan el archivo en el directorio donde esta el proyecto, este plug-in nos permite manejar cookies en nuestra pagina, esto lo usaremos para almacenar el estado de si esta pausado o no, con el plug-in en el directorio solo nos resta implementarlo, para ello primero iremos al archivo plugin.html y agregaremos el siguiente tag en la seccion head:
<script src="jquery.cookie.js"></script>
Nota: Este plug-in es obra de Klaus Hartl, les dejo su gitub: https://github.com/carhartl/
Este deben agregarlo antes del llamado al archivo codigo.js, con esto lo implementamos pero no lo usamos todavia, para ello pasemos al archivo codigo.js y modificaremos el siguiente 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');
}).appendTo($controles);
$('<button>Retomar</button>').click(function(e) {
e.preventDefault();
$libros.cycle('resume');
}).appendTo($controles);
});De la siguiente manera:
$(document).ready(function() {
var $libros = $('#libros');
if ($.cookie('cicloPausado')) {
$('#libros').cycle('pause');
}
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);
});Los cambios son sutiles pero vamos a mencionarlos, el primero es un condicional donde a traves de la funcion cookie le pediremos que nos busque el valor de cicloPausado, en caso de tener un valor considerara que se debe pausar a cycle, ahora veremos este motivo, despues sigue todo igual salvo en los botones, donde usaremos nuevamente a la funcion cookie pero a diferencia del condicional lo usaremos para establecer un valor o eliminarlo, en el caso del boton para pausar le establece el valor de y a cicloPausado para indicar que debe seguir pausado, en el caso del otro boton le establecemos el valor de null a cicloPausado, por lo tanto omitira el condicional, como pueden ver el uso es muy simple, veamos su sintaxis:
$.cookie(identificador);Este se usara para recuperar el valor del identificador que pasemos, veamos su otra sintaxis:
$.cookie(identificador, valor);
Este le sirve para establecer un valor al identificador que le pasemos, como pueden ver es muy simple, con esto comentado solo nos resta ver como trabaja ahora la pagina
Aqui pueden ver como sigue funcionando la pagina y si la refrescamos con el boton de pausa activado seguira en pausa porque lo ha recuperado asi desde la cookie, veamos como trabaja esta
Vean como se modifica el valor de la cookie para mantenerlo pausado o no, pero esto tiene trampa porque para poder verificarlo necesitan de un servidor web sino disponen de uno les recomiendo dos posts, este es el primero:
En este les comento como crear un pc virtual e instalar un linux debian en el mismo, una vez hecho esto pueden pasar al siguiente post:
En este comento como instalar un Apache y PHP para un debian, de manera opcional pueden instalar un mariadb, esto se los recomiendo asi para no dañar el equipo propio, solo necesita un 1 GB de RAM y en caso de no necesitarlo mas simplemente borran la virtual y listo, antes de finalizar les dejo el archivo con todo los codigos finales trabajados aqui:
En resumen, hoy hemos visto otros tipos de plug-in, el primero fue para poder por medio de selectores personalizados interactuar con un plug-in, en el segundo nos centramos en como agregar una funcion global para manejar las cookies y por medio de esta trabajar con nuestra pagina y que reccuerde estados, 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
El blog de Tinchicus 