Contenido

jDigiClock, Reloj HTC Hero con jQuery

15 feb

+ 18

jDigiClock es un plugin jQuery que nos permite conseguir un reloj, inspirado en el HTC Hero, e integrarlo directamente en cualquier página web.

jdigiclock
(Ver Imagen)

Modo de empleo

Como todo plugin jQuery debemos cargar los ficheros Javascript necesarios.

<link rel="stylesheet" type="text/css" href="css/jquery.jdigiclock.css" />
<script type="text/javascript" src="lib/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="lib/jquery.jdigiclock.js"></script>

Una vez cargados ya podemos crear nuestro reloj llamando al plugin indicando el ID del elemento HTML contenedor y especificando una serie de parámetros de configuración.

// HTML
<div id="digiclock"></div>

// Javascript
<script type="text/javascript">
     $(document).ready(function() {
        $('#digiclock').jdigiclock({
            // Aquí la configuración
        });
    });
</script>

Configuración

Disponemos de una serie de parámetros para personalizar nuestro reloj:

  • clockImagesPath: Directorio de imágenes del Reloj
  • weatherImagesPath: Directorio de imágenes del tiempo
  • am_pm: Booleano para especificar AM/PM
  • weatherLocationCode: Código de tu cuidad para el tiempo (Base de datos: WeatherLocationDatabase.txt).
  • weatherMetric: Medición de la temperatura (C/F)
  • weatherUpdate: Tiempo de actualización del tiempo

Actualización (13:02):

Cane nos explica en los comentarios que el aspecto es de HTC Sense, el interface desarrollado por HTC para dispositivos Android, Windows Mobile, …

35 plugins jQuery para mejorar tu WordPress

9 sep

+ 4

¿Que puede pasar si juntamos algunos de los mejores plugins de jQuery y los añadimos a nuestro blog? Pues lo podemos probar fácilmente con estos 35 plugins para mejorar nuestro WordPress.

38 menús desplegables con jQuery y CSS

8 sep

+ 0

Impresionante listado de 38 menús desplegables desarrollados usando jQuery y CSS. ¿Necesitas alguno?

15 plugins jQuery para la manipulación de tablas

7 sep

+ 4

Los elementos <table />, poco a poco, se están usando para lo que fueron creados, como la mejor forma de mostrar datos tabulados al usuario. Gracias a este uso, es posible usar javascript para añadirle funcionalidad a esas estáticas tablas.

tablas-dinamicas-jquery
(Ver Imagen)

Entre estos 15 plugins jQuery, seguro que encuentras algo para hacer que tus tablas de datos no sean planas y sin opciones.

DataTables

Permite:

  • Edición al vuelo
  • Carga de datos con Ajax
  • Paginación
  • Multiordenación por columnas
  • Extensible por plugins
  • Personalizable por CSS
  • Idiomatizable

uiTableFilter

Permite:

  • Filtrar datos al vuelo

Scrollable HTML Table

Permite:

  • Usar la estructura HTML
  • Limitar el alto y ancho de la tabla

Tablesorter

Permite:

  • Multiordenación por columnas
  • Extensible mediante widgets

Flexigrid

Permite:

  • Re-dimensionar las columnas
  • Re-dimensionar la tabla
  • Ordenación por columnas
  • Carga de datos mediante Ajax
  • Paginación
  • Mostrar u Ocultar columnas
  • Toolbar inferior con opciones
  • Busqueda de datos
  • API accesible

HeatColor

Permite:

  • Establecer rango de colores para visualizar más fácilmente resultados.

JQTreeTable

Permite:

  • Mostrar datos en forma de arbol dentro de tu tabla.

Ingrid

Permite:

  • Re-dimensionar columnas
  • Paginación
  • Ordenación por columna o fila
  • Personalización mediante CSS

jQuery ColumnManager plugin

Permite:

  • Mostrar u ocultar columnas.

jQuery treeTable

Permite:

  • Mostrar datos en forma de árbol.

CSV2Table

Permite:

  • Cargar datos de un fichero CSV

Table Pagination

Permite:

  • Paginación

jQuery TableRowCheckboxToggle

Permite:

  • Cambiar la class de la fila mediante checkboxes (para remarcarlas)

Table Drag and Drop jQuery plugin

Permite:

  • Hacer Drag and Drop en filas reordenandolas.

uiTableEdit

Permite:

  • Permite editar la tabla por el usuario

jQuery Visualize, gráficas con canvas y Javascript

7 jul

+ 7

jQuery Visualize, es un plugin de jQuery que nos permite generar gráficas dinámicas usando <canvas /> para alogar los gráficos.

jquery.visualize
(Ver Imagen)

Usando los datos alojados en tablas el resultado no puede ser más accesible, ya que en caso de que el usuario no tenga el Javascript activo, este podrá ver la tabla con los datos. Posibilitando así su comprensión.

¿Como funciona?

<table>
	<caption>2009 Individual Sales by Category</caption>
	<thead>
		<tr>
			<td></td>
			<th>food</th>
			<th>auto</th>
			<th>household</th>
			<th>furniture</th>
			<th>kitchen</th>
			<th>bath</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<th>Mary</th>
			<td>150</td>
			<td>160</td>
			<td>40</td>
			<td>120</td>
			<td>30</td>
			<td>70</td>
		</tr>
		<tr>
			<th>Tom</th>
			<td>3</td>
			<td>40</td>
			<td>30</td>
			<td>45</td>
			<td>35</td>
			<td>49</td>
		</tr>
		...repetitive rows removed for brevity.	
	</tbody>
</table>

Usando una estructura de tabla normal, almacenamos los datos en ella y posteriormente el plugin los usará para generar el gráfico con estos valores.

$('table').visualize({options});

Opciones

  • type: string. Valors aceptados ‘bar’, ‘area’, ‘pie’, ‘line’. Default: ‘bar’.
  • width: number. Ancho de la gráfica. Por defecto el tamaño de la tabla.
  • height: number. Altura de la gráfica. Por defecto el tamaño de la tabla.
  • appendTitle: boolean. Añadir título a la gráfica. Default: true.
  • title: string. Título de la gráfica. Por defecto se usa el <caption /> de la tabla.
  • appendKey: boolean. Añadir color principal. Default: true.
  • colors: array. Array de colores usados. Default: [‘#be1e2d’,’#666699′,’#92d5ea’,’#ee8310′,’#8d10ee’,’#5a3b16′,’#26a4ed’,’#f45a90′,’#e9e744′]
  • textColors: array. Array de colores para el texto. Default: [].
  • parseDirection: string. Dirección de parseo de datos de la tabla Acepta ‘x’ e ‘y’. Default: ‘x’.
  • pieMargin: number.Espacio alrededor de la gráfica tipo “Pie”. Default: 20.
  • pieLabelPos: string. Posición del texto de etiqueta en la gráfica tipo “Pie”. Acepta ‘inside’ y ‘outside’. Default: ‘inside’.
  • lineWeight: number. Tamaño de la línea de la gráfica. Default: 4.
  • barGroupMargin: number. Espacio entre barras. Default: 10.
  • barMargin: number.Margenes de la gráfica. Default: 1

Podeis ver una gráfica dinámica y descargar el plugin directamente desde este enlace.

Super Gesture jQuery Plugin, gestos controlados con jQuery

9 jun

+ 1

Super Gesture jQuery Plugin, nos permite controlar gestos simples y más complejos de nuestras aplicaciones web. Además de las direcciones básicas (derecha, izquierda, arriba y abajo), podemos usar diagonales y formas como círculas, zig-zag y otras más complejas.[Dem y descarga]

jQuery Tools, herramientas para usar con tu jQuery

5 jun

+ 6

jQuery Tools es una colección de herramientas para añadir a nuestras aplicaciones en forma de plugin para jQuery. Dispone de una gran cantidad de demos para hacernos una idea de las posibilidades que nos ofrece. Y todo ello en tan solo 5,8kb.[Descargar]

jqTransform, formularios más elegantes con jQuery

27 may

+ 5

El otro día vimos Sexy Forms, un plugin para MooTools que nos permitía mejorar estéticamente los formularios de nuestras aplicaciones. jqTransform, es un plugin de jQuery que consigue más o menos lo mismo.

jqtransform
(Ver Imagen)

Implementación

Como todos los plugins de los diferentes frameworks, la implementación es realmente sencilla.

Añadimos los ficheros Javascript necesarios

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.jqtransform.min.js"></script>

Escribimos nuestro formulario

<form class="jqtransform">
  <div class="rowElem">
    <label for="name">Name: </label>
    <input type="text" name="name" />
  </div>
  <div class="rowElem"><input type="submit" value="send" /><div>
</form>

Indicamos el formulario anterior debe ser más elegante :D

<script type="text/javascript">
$(function() {
    $("form.jqtransform").jqTransform();
});
</script>

Descargar

Puedes descargarlo directamente desde aquí.

jQuery Ribbon, interface atractivo con jQuery

27 may

+ 1

jQuery Ribbon es un conjunto de elementos que nos permitirán extender los interfaces desarrollados sobre jQuery. De un resultado similar al obtenido en Ext.js, podemos montar aplicaciones web con aspecto de escritorio de una forma rápida y funcional.[Demo][Descargar]

Detecta los plugins jQuery que usa una web

19 may

+ 3

James Padolsey, ha creado un interesante bookmarlet que nos permite conocer los plugins jQuery que se están usando una página.

plugindetectorjquery
(Ver Imagen)

Instalación

Simplemente tendremos que guardar este enlace en nuestros marcadores y ejecutarlo cuando queramos conocer que plugins usa esa página que siempre nos ha fascinado.