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:
Craftyman, excelente ejemplo para ocultar/mostrar un div. En mi caso yo utilizo otra forma:
$(‘btmostrar’).addEvent(‘click’, function() {
$(‘element’).fade(‘toggle’);
});
Ahora el problema es que se oculta el div pero la zona lo bloque se queda alli, es decir queda un bloque en blanco, para resolver esto hay que cambiar la altura del div llamado ‘element’.
Saludos y felicitaciones por el blog.
Comments are closed.