Si les gusta el desarrollo web seguro que conocen 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 puedes 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:
|
1 2 3 4 5 6 7 |
(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:
|
1 2 3 4 5 6 7 8 |
// 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):
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
// 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); }; }; |
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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
// 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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
// 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: index.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>FlipClock en jQuery | NochesDeCode.com.ar</title> <link rel="shortcut icon" href="http://nochesdecode.com.ar/wp-content/uploads/2014/04/favicon.ico" /> <link rel="stylesheet" type="text/css" href="flipclock.css" media="screen" /> <script type="text/javascript" src="jquery-1.2.3.pack.js"></script> <script type="text/javascript" src="jquery.flipclock.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#flipclock").flipclock({ampm: true, dot: true}); }); </script> </head> <body> <div id="flipclock"></div> </body> </html> |
Como pueden 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.
Puedes ver un ejemplo Online en: http://nochesdecode.com.ar/dev/flipclock/
Descarga: FlipClock.rar
como le cambio el tamaño a los numeros? gracias.
Todo con CSS.