El toggle es algo tan sencillo como un grupo de desplegables. Imaginad una
página de preguntas frecuentes donde sólo sean ...
exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.</p>
<ul>
<li>Listado</li>
<li>Listado</li>
<li>Lista...
porque queda bonita y simple.
El término toggle lo podríamos entender como una mezcla entre slideUp y“ ”
slideDown, es dec...
Toggle - merinadesign
Próxima SlideShare
Cargando en…5
×

Toggle - merinadesign

181 visualizaciones

Publicado el

Toggle casero hecho con jQuery sin estilos

Publicado en: Diseño
0 comentarios
0 recomendaciones
Estadísticas
Notas
  • Sé el primero en comentar

  • Sé el primero en recomendar esto

Sin descargas
Visualizaciones
Visualizaciones totales
181
En SlideShare
0
De insertados
0
Número de insertados
1
Acciones
Compartido
0
Descargas
1
Comentarios
0
Recomendaciones
0
Insertados 0
No insertados

No hay notas en la diapositiva.

Toggle - merinadesign

  1. 1. El toggle es algo tan sencillo como un grupo de desplegables. Imaginad una página de preguntas frecuentes donde sólo sean visibles los títulos y que, al clicarlos, se desplegara el contenido. Si se vuelven a clicar, el contenido desplegado se vuelve a esconder. Parece complicado, verdad? Pues no lo es. Tal vez os pique la posibilidad de a adir un plugin para crear esto, pero nosñ encontraremos con que tenéis que descargar un montón de archivos, imágenes y archivos con montones de líneas que realmente no os hacen falta. Todo el código basura termina por ralentizar nuestra web y deberíamos“ ” evitarlo. En este caso lograremos un toggle con 5 líneas de código... No está mal! jQuery es una librería de JavaScript, es decir, no es un lenguaje propiamente dicho, sino una forma fácil de hablar Java. Las órdenes son más sencillas e intuitivas por lo que, con pocas líneas se pueden conseguir efectos bonitos y llamativos. Para empezar crearemos una lista desordenada <ul> donde cada elemento de lista <li> contendrá el título a mostrar. Dentro de cada elemento de lista podemos introducir otra lista, un párrafo, imágenes... Lo que necesitemos. <ul> <li><h3 class="titulo">Esto es un titular pequeño</span> <ul class="contraido"> <li> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p> </li> </ul> </li> <li><h3 class="titulo">Esto es un titular largo y aburrido, o no, quien sabe</span> <ul class="contraido"> <li>Lorem ipsum dolor <div> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud Toggle Septiembre - 2013
  2. 2. exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> <ul> <li>Listado</li> <li>Listado</li> <li>Listado</li> <li>Listado</li> <li>Listado</li> <li>Listado</li> <li>Listado</li> <li>Listado</li> </ul> <div> </li> </ul> </li> </ul> Lógicamente aquí podemos a adir todas las class o id que necesitárais parañ “ ” “ ” poner estilos posteriormente. Hoy no vamos a trabajar estilos por lo que quedará bastante feo visualmente. Lo que nos interesa es que funcione! Ya tenemos nuestra lista. A adid lo que queráis pero mantened lañ class="contraido" y la class="titulo" para que funcione (o cambiad los atributos en el query. Lo primero que hay que hacer, como siempre, es la llamada al archivo .js. Se puede poner el enlace directo o bajarnos el archivo. <script type="text/javascript" src="http://code.jquery.com/jquery- 1.10.2.js"></script> En el head, por ejemplo, abrimos una etiqueta de script y a adimos loñ siguiente. Con esta frase preparamos el DOM para recibir las funciones pertinentes: $(document).ready(function() { A continuación escondemos todo aquello que tenga la class contraido para“ ” que no se vea de inicio: $("ul.contraido").hide(); Ahora viene la clave: $('.titulo').click(function () { $(this).next('ul.contraido').slideToggle(); }); Aquí le hemos dado la función con un click y la orden de deslizar. Hay muchas más pero esta en especial se usa mucho y a título personal me gusta
  3. 3. porque queda bonita y simple. El término toggle lo podríamos entender como una mezcla entre slideUp y“ ” slideDown, es decir, que sube y baja alternativamente cada vez que lo haces funcionar. Por último, pensando en nuestro amigo Iexplorer, podríamos a adir una fraseñ más al script: $('ul li').css('display', 'none'); De esta manera le estamos diciendo que, si el javascript está desactivado (cosa que ocurre en algunas versiones antiguas, los desplegables estarán a la vista. Es decir, no funcionaría de manera bonita pero el usuario no se perderá nuestro contenido. Es importante que en el primer paréntesis incluyérais todos los elementos necesarios. Ya sólo nos quedaría a adir estilos, imágenes de fondo, bordes, efectos deñ hover y demás para que nos quedara un desplegable de lo más decente. Obviamente hay más formas de hacerlo y puede que haya otras más efectivas, pero con esto ya es suficiente para hacer un buen trabajo a adiendoñ luego una capa de css. Si encontráis algún problema avisad :) Encontraréis todo lo referente a toggle en: http://api.jquery.com/toggle/ Y para los más vagos, aquí os dejo el código completo. Recordad que si cambiáis el contenido del html tendríais que cambiar aquí también: <script> $(document).ready(function() { $('ul li').css('display', 'none'); $("ul.contraido").hide(); $('.titulo').click(function () { $(this).next('ul.contraido').slideToggle(); }); }); </script>

×