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>
Ejemplo Avanzado:
Incluiremos el javascript que nos creara dos metodos mas, estos los llamaremos fancyShow() y fancyHide()
window.addEvent('domready', function()
{
Element.implement(
{
fancyShow: function()
{
this.fade('in');
},
fancyHide: function()
{
this.fade('out');
}
});
});
Para llamar a estos metodos lo podremos hacer igual que el anterior ejemplo
<a onclick="$('element').fancyShow()">Mostrar</a>
<a onclick="$('element').fancyHide()">Ocultar</a>
<div id="element">Show/Hide</div>
Recursos:
Comentarios