Mootools Chain es una maravilla
Mootools es esa fabulosa libreria la cual ayuda a mejorar radicalmente las aplicaciones y permite de muchas formas manipular los elementos html para tener mejor control sobre ellos.. Esta vez traigo un post relacionado a la funcion chain que ya existia desde la version 1.0.
Esta funcion lo que hace es encadenar funciones y su funcionamiento es que ejecutan una funcion al terminar la anterior.. se escucha un poco confuso pero es más fácil en la práctica.. de verdad..
Para empezar creamos un archivo de php, lo llamaremos process.php y pegamos lo siguiente dentro de el:
1 2 3 | <?php echo "<div class=\"error\">Esto es un mensaje de error</div>"; ?> |
Ahora creamos un archivo y lo llamaremos ejemplo.html (lo pueden llamar como quieran) y pegan el siguiente código dentro de el:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Ejemplo Chain</title> <script type="text/javascript" src="mootools-1.2-core.js"></script> <script type="text/javascript" src="mootools-1.2-more.js"></script> <style type="text/css"> .error { color: #9F6000; background-color: #FEEFB3; background-image: url('error.png'); border: 1px solid; margin: 10px 0px; padding:15px 10px 15px 50px; background-repeat: no-repeat; background-position: 10px center; } </style> </head> <body> <div id="log" style="height:5px;"></div> <input type="button" value="Click" id="btnclick" name="btnclick" /> <script type="text/javascript" language="javascript"> window.addEvent('domready', function() { // esto solamente manejara el efecto con que aparece y desaparece el mensaje var myEffect = new Fx.Morph('log', {duration: 700, transition: Fx.Transitions.Back.easeInOut}); $('btnclick').addEvent('click', function(e){ // esto detiene que se dispare o que siga en ejecucion el evento e.stop(); new Request({ method: 'get', url: 'process.php', // nuestra pagina php la que hacemos la peticion onSuccess: function(e){ myEffect.start({ // funcion inicial 'height': [5, 60], 'opacity' : [0, 1] }).chain(function() { // al terminar la funcion anterior aparecera el mensaje this.start.delay(200, this, {'opacity' : 1}) $('log').set('html', e); }).chain(function(){ // al terminar la funcion anterior desaparecera el mensaje this.start({ 'height': [60, 5], 'opacity' : [1, 0] }) }) } }).send(); }); }); </script> </body> </html> |
El ejemplo final lo pueden ver en este enlace y pueden descargar el ejemplo haciendo click aqui.
There are currently no comments highlighted.
