Hoy en un rato de ocio he terminado mi primer plug-in de jQuery, lo que se dedica a hacer es sacar los datos de tinydash. De manera más específica, nos permite seleccionar un usuario, checar todos los dash que tenga y checar que día he generado algún registro para ese dash.
EL plug-in nos permitirá definir un tag en la pagina y agregarlos los valores de cada dash del usuario, en el caso de que el dash tenga un valor para ese día nos entrega un div con la class sucess y en el caso de que no exista ningún valor para ese día, nos entrega un div con la class not-done en caso de no tener ningún valor ese día.
La manera de agregarlo a una página es muy sencilla, necesitaremos tener jQuery y tener el archivo de javascript en el que se encuentra el plug-in. Después solo necesitamos inicializarlo de la siguiente manera:
$(document).ready(function(){ $('#timeline').paintTimeline({ user:'Siedrix', type:'spline' }); });
El plug-in tiene tres tipos de opciones para desplegar la información:
- El usuario al que queremos pedir la información, en este caso Siedrix, este valor es obligatorio.
- EL tipo de dash que queremos pedir, en este caso estamos haciendo la petición de que sean los dashs de tipo ‘spline’, en caso de dejarse vacio pedirá todos los dash del usuario.
- Tiene la opción de que no se muestre el titulo, con la opción title:’none’.
Despues necesitaremos definir el css para que se vea de la manera que deseamos, en este ejemplo tenemos un css de esta manera:
.bigBox{ height:70px; } .box{ width:15px; height:15px; float:left; } .not-done{ background:red; } .success{ background:green; }
Pero puede ser usado de cualquier manera que deseen. Es relevante tener un css por que el plug-in no imprime ningún carácter ni información visible para el usuario.
Pueden checar el ejemplo aquí.
Pueden descargar el archivo de aquí.
Espero que les agrade y les sirva para tener una vida un poco mas organizada, mínimo para eso creo que dfect hizo tiny dash y yo para eso hice el plug-in.
Related posts: