FlipClock, tutorial para desarrollar un plugin de jQuery
Publicada el 02/03/2009 a las 06:03 y leída 3095 veces. 
Traducir ao galego.
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:
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:
-
(function($){
-
$.fn.flipclock = function(options) {
-
return this.each(function() {
-
return false;
-
});
-
};
-
})(jQuery);
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:
-
// definimos variables generales
-
var obj, divclock, divopt, flip, curtime;
-
// establecemos las opciones
-
var options = $.extend({
-
ampm: false,
-
dot: false,
-
msg: 'Hola Mundo'
-
}, options);
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):
-
// 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 = '<span class="format">AM</span>';
-
if (gh>12) {
-
gh = gh - 12;
-
html = '<span class="format">PM</span>';
-
};
-
};
-
// 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 += '<img class="n'+hd+'" src="img/blank.gif" alt="'+hd+'" /><img class="n'+hh+'" src="img/blank.gif" alt="'+hh+'" />';
-
if(options.dot) html += '<span class="dot"></span>';
-
html += '<img class="n'+md+'" src="img/blank.gif" alt="'+md+'" /><img class="n'+mm+'" src="img/blank.gif" alt="'+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);
-
};
-
};
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:
-
// 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;
-
};
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.
-
// 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;
-
});
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:
-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-
<title>FlipClock in jQuery for marcosesperon</title>
-
<link rel="stylesheet" type="text/css" href="flipclock.css" media="screen" />
-
<script type="text/javascript" src="js/jquery-1.2.3.pack.js"></script>
-
<script type="text/javascript" src="js/jquery.flipclock.js"></script>
-
<script type="text/javascript">
-
$(document).ready(function(){
-
$("#flipclock").flipclock({ampm: true, dot: true});
-
});
-
</script>
-
</head>
-
<div id="flipclock"></div>
-
</body>
-
</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
