Luego de terminar la primera versión de setBio comenzamos a mejorar la aplicación, partiendo por el holder!
El holder (el home cuando no estás logeado en la aplicación) tiene dos listas de biografías en la parte inferior de la página, ahí quize innovar implementando un plugin de jQuery que hiciera el efecto “slide” para cada biografía.
El tema es que no encontré el plugin, es decir, lo encontré…pero eran demasiado para una función tan simple. Es por eso que tomé la decisión de hacerlo a mi modo, pero para hacerlo interesante me propuse aprender como es la creación de un plugin de jQuery.
Idea principal
Para crear el plugin de jQuery hice algunas pruebas “en duro” (hardcode) en el document ready.
La idea principal fué al siguiente:
- Sacar el último elemento de una lista (UL-LI) y luego dejarlo como primer elemento
- Realizar la función anterior cada cierto tiempo utilizando setInterval
El html es una lista simple como la siguiente:
<ul id="biographies"> <li>Lorem ipsum dolor sit am...</li> <li>Lorem ipsum dolor sit am...</li> <li>Lorem ipsum dolor sit am...</li> <li>Lorem ipsum dolor sit am...</li> <li>Lorem ipsum dolor sit am...</li> <li>Lorem ipsum dolor sit am...</li> <li>Lorem ipsum dolor sit am...</li> <li>Lorem ipsum dolor sit am...</li> <li>Lorem ipsum dolor sit am...</li> <li>Lorem ipsum dolor sit am...</li> </ul>
y el código que hace el efecto slider es el siguiente:
$(document).ready(function(){
// Agrego un overflow para ocultar algunos resultados
$('#biographies').css('height', 470).css('overflow', 'hidden');
setInterval("sliderText()", 5000);
});
function sliderText() {
$('#biographies').prepend('<li>' + $('li:last', $('#biographies')).html() + '</li>');
$('li:first-child', $('#biographies')).hide().fadeIn('slow');
$('li:last', $('#biographies')).remove();
}
Creando el plugin
Ahora, para convertir esto en plugin no hubo demasiada ciencia. jQuery nos dice cómo es que se debe crear un plugin en su sitio web y al final nos da la clave de cómo debemos comenzar
Utilizando esta información nos resulta algo como lo siguiente:
(function($){
$.fn.extend({
aSliderText: function(options) {
var defaults = {
updateTime: 6000,
height: 0,
element: 'li'
}
var options = $.extend(defaults, options);
return this.each(function() {
var o = options;
var obj = $(this);
if (o.height > 0) {
obj.css('height', o.height).css('overflow', 'hidden');
}
var updateSlider = function() {
obj.prepend('<'+o.element+'>' + $(o.element+':last', obj).html() + '</'+o.element+'>');
$(o.element + ':first-child', obj).hide().fadeIn('slow');
$(o.element + ':last', obj).remove();
};
window.setInterval(updateSlider, options.updateTime);
});
}
});
})(jQuery);
Acá utilicé un truco para crear el setInterval e utilizar la función de jQuery. Se entrega como parametro una función como tal, es por eso que creamos la variable updateSlider como función.
Luego, se utiliza el plugin del siguiente modo:
$('#biographies').aSliderText({updateTime:7000, height: 560});
Descarga y Demo
El plugin está bajo la Licencia MIT que puede ser descargado acá: jQuery aSliderText v0.1 y si quieren ver el DEMO, revisen aquí: jQuery aSliderText DEMO
También pueden visitar la página de plugin en jQuery Plugins
Aún estoy haciendo pruebas con este plugin con el objetivo de publicar una versión más estable, así que si lo descargan deben saber que aún puede tener bugs o no funcionar con versiones antiguas de jQuery.
Saludos y suerte con esos plugins!