FlipClock.js

FlipClock.js es un plugin de jQuery para representar cualquier cosa relacionada con el tiempo. Tiene soporte para funcionar como un reloj, cuenta atrás o como un simple contador. Puede personalizarse completamente con CSS y existen varios métodos para controlarlo (start, stop, getTime, setTime..) con sus respectivos callbacks.

FlipClock.js

FlipClock.js » »

Instano.js: detecta si Javascript se ha deshabilitado después de cargar una página

instano.js permite detectar de forma inmediata si el Javascript se ha deshabilitado después de que la página haya sido cargada. Es un script que modifica la funcionalidad estándar de la etiquta <noscript>, por lo que los mensajes dentro de ella pueden ser mostrados de manera inmediata, independientemente de cuando el Javascript se deshabilite. También permite aplicar una función de callback que se ejecutará cuando el Javascript sea re-habilitado.

Su uso es muy sencillo:

<noscript>Puedes ver este mensaje cuando desactivas Javascript.</noscript>
<script src="instano.js"></script>
<script>
instano({
    reenabledCallback:function(){
        alert("JavaScript se ha vuelto a activar.");
    }
});
</script>

Lo malo es que instano.js no funciona con Internet Explorer.

instano.js » »

Toolbar.js: plugin jQuery para crear tooltips con aspecto de barra de herramientas

Toolbar.js te permite crear rápidamente tooltips con un aspecto similar a una barra de herramientas, en la que disponer diversos iconos. Un interesante plugin que podemos utilizar tanto en el desarrollo de sitios como de aplicaciones web.

Toolbar.Js: plugin jQuery para crear tooltips con aspecto de barra de herramientas

Características:

  • Sencilla implementación con múltiples opciones.
  • Puede ejecutar tantas barras de herramientas como sean necesarias.
  • Las barras de herramientas pueden asociarse a cualquier elemento.
  • Los iconos de la barra se personalizan fácilmente a través twitter bootstrap.
  • Las barras de herramientas son responsive y siguen al elemento al redimensionarse.

Por ejemplo, para mostrar una barra de herramientas horizontal tendríamos que añadir un código similar al siguiente:

Javascript:

$('#user-toolbar').toolbar({
	content: '#user-toolbar-options', 
	position: 'top'
});

HTML:

<div id="user-toolbar-options">
	<a href="#"><i class="icon-user"></i></a>
	<a href="#"><i class="icon-star"></i></a>
	<a href="#"><i class="icon-edit"></i></a>
	<a href="#"><i class="icon-delete"></i></a>
	<a href="#"><i class="icon-ban"></i></a>
</div>

Toolbar.js » »

DOM Enlightenment

DOM Enlightenment no se presenta como una referencia exhaustiva de acceso a DOM o de JavaScript. Aún así, puede que sea el más exhaustivo libro escrito sobre DOM scripting sin el uso de un framework. El libro obvia los navegadores antiguos y sus diferencias en la estructura del DOM para centrarse en los navegadores actuales. Un esfuerzo más que notable para plasmar en un sólo lugar todas las pautas de acceso al DOM que un desarrollador puede necesitar. Todo está muy bien documentado y con abundantes ejemplos.

DOM Enlightenment » »

Bonsai.js

Bonsai.js es un biblioteca open source de Javascript para crear gráficos y animaciones. La biblioteca es una API sencilla y muy bien documentada que procesa la salida en formato SVG. Ofrece soporte tanto para la creación de formas simples (rectángulo, círculo, elipse, etc), como para la creación de formas complejas o personalizadas mediante la función path(). Es posible aplicar colores, degradados y filtros; además de que incorpora muchos de los eventos del teclado o el ratón.

Bonsai.js » »