Lighter.js es una clase echa con MooTools 1.2.1 para el remarcado de código js, html, php, entre otros.
Su uso es muy sencillo en seguidamente explicaremos como utilizarlo.Primero descargamos la librería Mootools 1.2.1 y la clase Lighter.js con sus componentes aquí.
Despues de descomprimirlo pasaremos a crear una pagina html donde incluiremos la librería Mootools y la clase Lighter.
<head> <script src="js/mootools-1.2.1-core.js"></script> <script src="js/Lighter.js"></script> </head>Ahora incluiremos este script antes de cerrar el "head" que se encargara de recorrer los tag "pre" y darle el estilo correspondiente.
window.addEvent('domready', function() { $$('pre').light({ altLines: 'hover', indent: 2, editable: true, mode: 'ol', path: 'compressed/' }); });donde las opciones significan:
altLines: Le dara un estilo diferente a la fila, en este caso es cuando el mouse esta sobre la fila....TwitterGitter es un plugin creado por DavidWalsh y sirve para recuperar tus últimos estados e información de tu Twitter. Utiliza la librería Mootools 1.2 y la extensión JSONP para Mootools ...
Link nudging realiza un efecto de animación muy bueno para enlaces, cuando el mouse esta sobre el enlace, lo lanza a la derecha y cuando se quita el mouse regresa a su posición original.
Este ejemplo se realizara con dos librerías muy usadas, Mootools y jQuery.
Ejemplo con jQuery 1.2.6
Primero tienes que descargar esta versión de jQuery y colocarla en el head de tu pagina web, luego colocar este script también en el head.
$(document).ready(function() { $('a.nodo').hover(function() { $(this).animate({ paddingLeft: '20px' },400); }, function() { $(this).animate({ paddingLeft: 0 }, 400); }); });Ejemplo con MooTools 1.2
Para este caso descargar Mootools 1.2 y colocarlo dentro del head de nuestra pagina web, el siguiente ...
En este tutorial muestro como ocultar y mostrar elementos (show and hide) de manera animada con Mootools. Primero haremos un ejemplo básico y luego el avanzado.
Antes que nada tendremos que incluir la librería Mootools para comenzar a implementar esta funcionalidad, para este ejemplo estoy usando la versión 1.2.0
<script src="mootools.js"></script>Ejemplo básico:
Incluiremos este script en el head para implementar los metodos para un elemento
window.addEvent('domready', function() { Element.implement( { //mostrar show: function() { this.setStyle('display',''); }, //ocultar hide: function() { this.setStyle('display','none'); } }); });En nuestra pagina podremos llamar a los metodos show() y hide() de esta manera:
<a onclick="$('element').show()">Mostrar</a>/ <a onclick="$('element').hide()">Ocultar</a> <div id="element">Show/Hide</div> Ver demo1Ejemplo Avanzado:
Incluiremos el ...
Multibox es una librería que nos sirve para poder crear nuestra galería ya no solo de fotos, el multibox soporta distintos tipos de formato multimedia, como: flash (flv), video(mov,wmv), mp3, html.