Slide con mooTools Publicada el Miércoles 20 de Junio de 2007 a las 3:20 am por Infected-FX
Configurando nuestro Slide
Al hacer el paso anterior nos dimos cuenta que no tenemos ningún control sobre nuestro "toggle", pero tenemos la opción de añadirle métodos de transición y tiempo de ejecución, en este caso solo utilizaremos el tiempo, para definir que tan rápido ó despacio queremos que sea la apertura ó cierre de "myContent".
Regresamos a la parte donde pusimos nuestro último javascript y lo reemplazamos por lo siguiente.
JavaScript:
-
<script type="text/javascript">
-
window.addEvent('domready', function() {
-
var miSlide = new Fx.Slide('myContent',{duration: 350}).hide();
-
$('toggle_myContent').addEvent('click', function() {
-
miSlide.toggle();
-
});
-
});
-
</script>
Lo mismo que el paso anterior, solo que aquí tenemos el argumento de duration:350 aquí ustedes definen que tan rápido ó lento quieren que se haga el toggle. De la misma forma si desean que al abrir su sitio "myContent" esté visible únicamente quítenle .hide(); al código.
Aquí pueden ver el resultado final de este tutorial.
Consideren revisar la documentación que ofrece mooTools.
Para más información FX.Slide y sus ejemplos visiten el siguiente enlace.
Para más información FX.Slide y sus ejemplos visiten el siguiente enlace.
Blind Labs
Junio 20, 2007 a las 3:41 am
esta bonito pero lo malo que está muy pesado 42kb el mootools.v1.1
Daniel
Junio 20, 2007 a las 5:47 am
Vaya sorpresa!, estaba leyendo mis feeds y he aparecido en en tu blog.
El tutorial esta muy bien, la comunidad de mootools es muy pequeñita y estas aportaciones son lo mejor.
Un pequeño detalle, yo no quitaria el event.stop en la pagina 5, asi puedes poner un enlace alternativo en caso de no tener JS activado.
En tu caso pones void();, es mejor poner un enlace y anularlo si tienes JS con event.stop.
No me considero un experto, solo alguien que tiene mucha curiosidad jeje.
Blind, pesado mootools? jeje pues acercate a otras librerias, ademas 42kb para la versión full, si lo adaptas a tu codigo seguro que reduces la mitad.
Posdata: me encantan tus botones, te han quedado genial.
Manuchis
Junio 20, 2007 a las 6:36 am
buen tutorial, pero sabes, he intentado muchas veces y no logro hacerlo funcionar, no se si es el motools o que pero no me arranca el slide… tampoco los tooltips que había puesto… en fin…
gracias igual.
lucas
Junio 20, 2007 a las 10:58 am
impresionante, MUCHISIMAS GRACIAS POR EL TUTO!!! ta barbaro…
nos vemos,
Lucas.
Francisco
Junio 20, 2007 a las 2:38 pm
Muy buen tutorial, habia escuchado mucho ese script y aquí se entiende de maravilla.
Juanjo Vargas
Junio 20, 2007 a las 3:38 pm
genial… es ke me va perfecto! hoy mismo estaba aplicando este efectoy lo he combiando con otro que es el fx.style y una mezcla de ambos se usan para obtener el efecto de esta página:
devthought.com
donde dice: click here to see HTML code ;)
en un par de dias pondré un tuto sobre cómo lo hice
Saludos!
Infected-FX
Junio 21, 2007 a las 7:53 pm
@Blind Labs: yo bajé el mootools completo, pero como dice daniel, si lo adaptas podrías reducirlo mucho más.
@Daniel: Muchas gracias por el tip y el comentario ^^ un gusto que te tomes la molestia.
@Manuchis: Al final del tutorial encontrarás el código fuente, tal vez te resulte más fácil implementarlo así.
@lucas :Gracias ñ_ñ me alegra que te haya servido bro.
@Francisco :Pffff! muchas gracias, temía que no se pudiera entender del todo bien :)
@Juanjo Vargas : Excelente bro, me gustaría ver el resultado, siempre es bueno complementarlo :).
Un saludo.
Nikko
Junio 22, 2007 a las 8:25 am
Muy bueno..gracias Amigo….
lucas
Junio 22, 2007 a las 12:53 pm
holaa de nuevooo… el tuto me salio a la perfeccion, pero tube un problema al tratar de implementar varios de ellos en mi web, es decir, en ves de tener uno como tenes vos, quiero tener tres… sabes como puedo hacer¿?¿?¿ me vendria bien una mano…
muchas gracias,
Lucas.
lucas
Junio 22, 2007 a las 12:57 pm
jajaaj listo listo ya puedeeee
perdon por molestar xD
César
Julio 1, 2007 a las 9:48 am
Hola a todos.
Lucas, ¿como has hecho para poder poner más de uno?
Muchas Gracias!!
- César-
Z01X
Julio 12, 2007 a las 4:43 pm
lucas, humildemente te digo que si le pones un
outline:0;al css en la parte de enlaces (a), se veŕia muuuuuucho mejor ;)Yo tengo una pregunta con respecto a las descargas de MooTools, soy nuevo en esto de JavaScript y no entiendo qué es lo que uno debería descargar para poder usar los efectos necesarios.
Por ahí arriba leí que pesa 42KB, al yo descargar el Core, me queda pesando 8KB.
Por ahí vi que nfected-fx dice que si uno lo adapta podría reducirse más… ¿cómo es eso?
Por favor un poco de ayuda… ¿cómo se elije una buena descarga según una u otra necesidad?
Muchas Gracias :)
Z01X
Julio 12, 2007 a las 4:45 pm
Por cierto, (discúlpenme por los dos comentarios seguidos), si descargo toodo, pesa 180KB :S
Z01X
Julio 12, 2007 a las 4:51 pm
Ahora pido disculpas por los tres comentarios seguidos y me “autocontesto”:
Z01X, por Dios, eres muy bruto… bruto, bruto!
Simplemente elijes un nivel de compresión y te van a quedar los 42,7 (para ser exactos) que mencionaron por ahí arriba y te va a funcionar normalmente… instrúyete y cacharrea más antes de preguntar.
Eso sí, verás que al descargar y abrir el .js vas a ver un montón de cosas raras… pero si lo descargas sin compresión, podrás ver hasta ejemplos en el .js, entonces la idea es que descargues el compreso para tu web y el no compreso para tu PC y vayas mirando los ejemplos y las funciones.
juanmanuel lopez
Julio 16, 2007 a las 7:56 pm
hola! gracias por la ayuda! yo he bajado el mootols con lo mínimo para que funcione el slimbox y tu tutorial… al final pesa 20kb el mootools… y he agregado otra transición!… saludos
juanmanuel lopez
Julio 16, 2007 a las 7:58 pm
hola! gracias por la ayuda! yo he bajado el mootols con lo mínimo para que funcione el slimbox y tu tutorial… al final pesa 20kb el mootools… y he agregado otra transición!… saludos… se me olvidaba el enlace es http://aptoverde.fileave.com es la misma pagina de inicio…
mario
Abril 19, 2008 a las 2:41 pm
hola, kisiera decir k este codigo en paginas .html . htm ect funciona pero en .php en ie da error (en firefox funciona).
Alguien sabe a k se debe k en paginas .php no funcione en ie??.
gracias de antemano