mooTools
En esta primera parte del tutorial haremos el slide utilizando mooTools, que es el que usamos aquí en el sitio.
Para empezar vamos al sitio de mooTools y descargamos la librería, seguimos creando un archivo html.
Ahora vamos a incluirla entre las etiquetas head de nuestro archivo
HTML:
-
<script type="text/javascript" src="mootools.v1.1.js"></script>
El archivo html
Ok, con esto tendremos ya hemos mandado a llamar a nuestro archivo la librería de mooTools, continuamos con la parte que "ocultaremos" para eso utilizaremos lo siguiente.
HTML:
-
<!-- contenedor -->
-
<div id="container">
-
<!-- contenido oculto -->
-
<div id="myContent">
-
<h2>Yo estoy oculto</h2>
-
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam porttitor vestibulum dui. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent placerat. Nulla fermentum. Aliquam varius ultricies libero. Donec viverra ornare nulla. Sed ornare massa. Duis augue augue, suscipit elementum, volutpat hendrerit, feugiat at, lacus. Nunc mauris velit, tempus lobortis, mollis nec, fringilla a, lacus. Sed vestibulum facilisis nisi. Pellentesque malesuada mi quis eros. Integer dictum lobortis velit. Duis tincidunt, mi in elementum laoreet, ante nisl aliquam felis, sed auctor sem mi id odio. Aliquam consequat arcu in quam.</p>
-
</div>
-
<!-- / contenido oculto -->
-
<!-- controlador -->
-
<div id="toggleContainer"><a href="javascript:void(0);">Toggle</a></div>
-
<!-- / controlador -->
-
<!-- contenido normal -->
-
<h2>Ah caray! ¿Dónde está el otro?</h2>
-
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam porttitor vestibulum dui. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent placerat. Nulla fermentum. Aliquam varius ultricies libero. Donec viverra ornare nulla. Sed ornare massa. Duis augue augue, suscipit elementum, volutpat hendrerit, feugiat at, lacus. Nunc mauris velit, tempus lobortis, mollis nec, fringilla a, lacus. Sed vestibulum facilisis nisi. Pellentesque malesuada mi quis eros. Integer dictum lobortis velit. Duis tincidunt, mi in elementum laoreet, ante nisl aliquam felis, sed auctor sem mi id odio. Aliquam consequat arcu in quam.</p>
-
<!-- / contenido normal -->
-
</div>
-
<!-- / contenedor -->
Les cuento un poquito sobre la estructura de esto:
- container : Contenedor global
- myContent : Será el contenido que ocultemos/mostremos
- toggleContainer : Este es nuestro controlador para mostrar u ocultar "myContent"
Pueden ver como va el primer paso de este tutorial.
17 comentarios para Slide con mooTools
esta bonito pero lo malo que está muy pesado 42kb el mootools.v1.1
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.
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.
impresionante, MUCHISIMAS GRACIAS POR EL TUTO!!! ta barbaro…
nos vemos,
Lucas.
Muy buen tutorial, habia escuchado mucho ese script y aquí se entiende de maravilla.
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!
@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.
Muy bueno..gracias Amigo….
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.
jajaaj listo listo ya puedeeee
perdon por molestar xD
Hola a todos.
Lucas, ¿como has hecho para poder poner más de uno?
Muchas Gracias!!
– César-
lucas, humildemente te digo que si le pones un
outline:0;al css en la parte de enlaces (a), se veŕia muuuuuucho mejorYo 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
Por cierto, (discúlpenme por los dos comentarios seguidos), si descargo toodo, pesa 180KB :S
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.
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
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…
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