Desarrollo web. Redes sociales, Herramientas Web y más
Categoría "Mootools"
Creando un simple Slideshow con Mootools
David Walsh nos trae este excelente tutorial para agregar un Slideshow de manera muy sencilla a nuestro Website con el Framework Javascript Mootools.
Seguir leyendo...
10 útiles plugins Mootools para formularios HTML
Esta vez les traigo una recopilación de plugins Mootools para formularios.
Los formularios siempre son indispensables en cualquier website, ya sean formularios para mandar un simple mail, hasta formularios muy completos de registro.
El objetivo de este post es tratar de convertir los simples formularios html en formularios más útiles y fáciles de llenar para el usuario, convirtiéndolo en una alternativa para familiarizar el formulario al cualquier usuario.
Seguir leyendo...
Lighter.js resaltado de sintaxis con Mootools
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: lista tus tweets con ajax
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 con Mootools y jQuery
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 ...
Mootools – Fancy Show and Hide
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 con Mootools
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.
TextboxList con Autocompleter
Si tienes una cuenta en Facebook te habras dado cuenta al enviar mensajes a tus amigos de la forma en que puedes agregar nombres y estos se autocompletan y forman botones con opciones de eliminar ...
Seguir leyendo...
Soy