en Programacion

FlipClock, tutorial para desarrollar un plugin de jQuery

Si os gusta el desarrollo web seguro que conoceis el framework de javascript jQuery. Personalmente yo comencé mis primeros desarrollos usando otros frameworks disponibles (sobre todo mootools) pero debido a la popularidad de jQuery y su integración en sistemas como WordPress o Drupal he tenido que adaptarme a esta biblioteca.

A pesar de que jQuery tiene una muy buena documentación comparado con otros proyectos, en su momento eché en falta la información sobre como desarrollar un plugin básico para jQuery explicado de forma sencilla. Así que he desarrollado un pequeño plugin a modo de ejemplo para intentar solucionar las dudas iniciales que podais tener. Para ello vamos a programar un flip clock:

FlipClock for jQuery


Lo primero que necesitamos es crear un nuevo fichero que llamaremos jquery.flipclock.js. Editamos el archivo y escribimos la estructura básica del plugin:
[JS]
(function($){
$.fn.flipclock = function(options) {
return this.each(function() {
return false;
});
};
})(jQuery);
[/JS]

En este plugin necesitaremos llevar una serie de variables y opciones generales, así que definiremos unos valores por defecto al comienzo de la función flipclock:
[JS]
// definimos variables generales
var obj, divclock, divopt, flip, curtime;
// establecemos las opciones
var options = $.extend({
ampm: false,
dot: false,
msg: ‘Hola Mundo’
}, options);
[/JS]

Tras esto añadimos las funciones necesarias. En este plugin necesitamos dos: una para construir el reloj y otra para mostrar la barra de información.

La función que contruye el reloj básicamente lo que hace es obtener la fecha y generar dinámicamente el código HTML que se visualizará en la página. Tendrá en cuenta la opción de formato (ampm) para construir la hora en formato corto AM/PM o largo (24H):
[JS]
// funcion encargada de recuperar la hora y generar el HTML
var setclock = function() {
var gh, gm, hd, hh, md, mm, html;
html = »;
// obtenemos la hora y los minutos
gh = new Date().getHours();
gm = new Date().getMinutes();
// si usamos el formato de hora corta, modificamos la fecha y mostramos el AM/PM
if (options.ampm) {
html = ‘AM‘;
if (gh>12) {
gh = gh – 12;
html = ‘PM‘;
};
};
// desglosamos los digitos de la hora y minutos
if (gh>9) {
hd = gh.toString().substring(0,1);
hh = gh.toString().substring(1);
} else {
hd = ‘0’;
hh = gh.toString();
};
if (gm>9) {
md = gm.toString().substring(0,1);
mm = gm.toString().substring(1);
} else {
md = ‘0’;
mm = gm.toString();
};
// generamos el HTML
html += ‘'+hd+''+hh+'‘;
if(options.dot) html += ‘‘;
html += ‘'+md+''+mm+'‘;
// recargamos el reloj si la hora es distinta a la mostrada actualmente
if(curtime!=gh.toString()+gm.toString()){
curtime = gh.toString()+gm.toString();
$(divclock).html(html);
};
};
[/JS]

La función que construye la barra de información tan solo muestra un mensaje predefinido y activa un enlace para cambiar el formato de la hora:
[JS]
// funcion encargada de mostrar la barra de opciones (mensaje + cambio de formato de hora)
var setopt = function() {
// creamos el bloque de opciones
divopt = document.createElement(‘div’);
// asginamos su clase de estilo y su HTML
divopt.className = ‘opt’;
$(divopt).html(options.msg);
// construimos un enlace para alternar entre los modos de formato de fecha
ampm = document.createElement(‘a’);
ampm.className = ‘mode’;
ampm.setAttribute(‘href’, ‘#’);
ampm.innerHTML = (options.ampm) ? ’24h’ : ’12h’;
// al pulsar sobre el enlace modificamos la opcion de formato y el texto del enlace
$(ampm).click (function (evt) {
evt.preventDefault();
if (options.ampm) {
ampm.innerHTML = ’12h’;
options.ampm = false;
} else {
ampm.innerHTML = ’24h’;
options.ampm = true;
};
return false;
});
// agregamos en enlace al bloque de opciones
$(divopt).prepend(ampm);
return false;
};
[/JS]

Finalmente nos quedaría la llamada principal del plugin. Esta llamada se encarga de llamar a las otras funciones y generar un temporizador para que se actualice el reloj.
[JS]
// llamada principal: construye el reloj en el elemento usado al llamar a flipclock
return this.each(function() {
obj = $(this);
// creamos el bloque que va a contener al reloj
divclock = document.createElement(‘div’);
// asginamos su clase de estilo
divclock.className = ‘clock’;
// creamos un intervalo de actualizacion del reloj
flip = setInterval(setclock, 1000);
// llamamos a la contruccion de la barra de opciones
setopt();
// agregamos el bloque del reloj y la barra de opciones al elemento principal
$(obj).append(divclock);
$(obj).prepend(divopt);
return false;
});
[/JS]

Con nuestro plugin finalizado tan solo nos queda declarar la llamada en la página web. En este caso necesitamos llamar al plugin desde un elemento en el cual se construirá el reloj:
[HTML]



FlipClock in jQuery for marcosesperon





[/HTML]
Como podeis comprobar, en la llamada se pueden pasar los valores de las opciones que queremos que se sobreescriban.

Tan solo nos queda aplicar un poco de CSS al HTML generado para darle un toque más atractivo.

Podeis ver el resultado final de la demostración o descargar todo el ejemplo en este ZIP:

FlipClock plugin for jQuery
Ver: 0.1 Tam: 140 Kb