AnshiG
Bienvenidos a AnshiG.!!

Unirse al foro, es rápido y fácil

AnshiG
Bienvenidos a AnshiG.!!
AnshiG
¿Quieres reaccionar a este mensaje? Regístrate en el foro con unos pocos clics o inicia sesión para continuar.

Conectarse

Recuperar mi contraseña


Afiliados Elite


Normales
Kimi wa Petto TOP
Pagerank

Últimos temas
» Blog de Renders!
Pestañas en los Modulos EmptyDom Ene 03, 2016 2:36 pm por Sakura92

» Hemos vuelto!!
Pestañas en los Modulos EmptyDom Ene 03, 2016 2:31 pm por Sakura92

» Actualización FEBRERO 2015
Pestañas en los Modulos EmptyVie Feb 27, 2015 10:22 am por Sakura92

» Cosplay (Varios)
Pestañas en los Modulos EmptyLun Feb 23, 2015 10:42 am por Sakura92

» Cosplay (Varios)
Pestañas en los Modulos EmptyLun Feb 23, 2015 10:41 am por Sakura92

» Materias favoritas... y no tanto!
Pestañas en los Modulos EmptyJue Feb 12, 2015 10:47 am por Sakura92

» Que mascotas tienen, tuvieron y les gustaria tener?
Pestañas en los Modulos EmptyJue Feb 12, 2015 10:38 am por Sakura92

» Redes sociales
Pestañas en los Modulos EmptyJue Feb 12, 2015 10:09 am por Sakura92

» PS3: Juegos!
Pestañas en los Modulos EmptyJue Feb 12, 2015 10:03 am por Sakura92

» Consolas o PC?
Pestañas en los Modulos EmptyJue Feb 12, 2015 9:55 am por Sakura92

» BUSQUEDA DE STAFF
Pestañas en los Modulos EmptyMar Feb 10, 2015 7:18 pm por Sakura92

» Requisitos y Datos
Pestañas en los Modulos EmptyMar Feb 10, 2015 12:03 pm por Sakura92

» Limpieza de afiliados
Pestañas en los Modulos EmptyMar Feb 10, 2015 9:36 am por Sakura92

» Ola ke Ase?
Pestañas en los Modulos EmptyLun Dic 09, 2013 8:07 pm por Tetsumi

» Guia 7: Reglamento Administracion
Pestañas en los Modulos EmptyVie Nov 22, 2013 1:05 pm por Sakura92

» Ideas
Pestañas en los Modulos EmptyVie Nov 22, 2013 1:02 pm por Sakura92

» Puntos
Pestañas en los Modulos EmptyVie Nov 22, 2013 12:59 pm por Sakura92

» Reglamento Soporte
Pestañas en los Modulos EmptyVie Nov 22, 2013 12:58 pm por Sakura92

» Reglamento Tutoriales
Pestañas en los Modulos EmptyVie Nov 22, 2013 12:57 pm por Sakura92

» Reglamento Galerias
Pestañas en los Modulos EmptyVie Nov 22, 2013 12:57 pm por Sakura92

» Reglamento Recursos
Pestañas en los Modulos EmptyVie Nov 22, 2013 12:56 pm por Sakura92

» Reglamento Talleres y Pedidos
Pestañas en los Modulos EmptyVie Nov 22, 2013 12:56 pm por Sakura92

» Incumplimientos
Pestañas en los Modulos EmptyVie Nov 22, 2013 12:52 pm por Sakura92

» Wings of Freedom [Elite]
Pestañas en los Modulos EmptyLun Sep 30, 2013 2:28 pm por Invitado

» Yugi Oh! RPG [Élite]
Pestañas en los Modulos EmptyMiér Ago 07, 2013 2:36 am por Invitado

» OMEGA NEW WORLD [Afiliación Élite ]
Pestañas en los Modulos EmptyMiér Jul 31, 2013 6:08 pm por Invitado

» Creando Mundos [Élite]
Pestañas en los Modulos EmptyVie Jul 26, 2013 12:22 am por Invitado

» World´s Inuyasha RPG [Normal]
Pestañas en los Modulos EmptyMiér Jul 24, 2013 11:46 pm por Invitado

» Fatal Liberty Rol [Élite]
Pestañas en los Modulos EmptyMar Jul 16, 2013 10:30 am por Invitado

» Fairy Tail Sekai || Re-Apertura! || Afiliación Elite
Pestañas en los Modulos EmptyMiér Jul 03, 2013 1:50 am por Invitado

» Hi(: !
Pestañas en los Modulos EmptyLun Jul 01, 2013 3:47 am por #Re Sound

» Hola, Hola, ¿hay alguien ahi?
Pestañas en los Modulos EmptyLun Jul 01, 2013 3:37 am por #Re Sound

» Bleach: Shadow Of Seireitei [Cambio de dirección]
Pestañas en los Modulos EmptySáb Jun 29, 2013 11:52 am por Invitado

» Volvi... nose si para siempre pero volvi xD
Pestañas en los Modulos EmptyVie Jun 28, 2013 9:08 am por Sakura92

» Me extravié en el cielo, ¿qué puedo hacer?
Pestañas en los Modulos EmptyVie Jun 28, 2013 8:55 am por Sakura92

» Roma Antiqua {Afiliación Normal}
Pestañas en los Modulos EmptyDom Jun 23, 2013 3:07 pm por Invitado

» Saint Seiya Cosmos Rebellion Rol [Afiliación Élite]
Pestañas en los Modulos EmptyDom Jun 16, 2013 12:13 am por Invitado

» Buck Tick Fans [Élite]
Pestañas en los Modulos EmptyJue Jun 13, 2013 1:49 am por Invitado

» End of Silence [Cambio de dirección y botones]
Pestañas en los Modulos EmptyVie Mayo 31, 2013 5:54 am por Invitado

» Campamento mestizo [Afiliación Elite]
Pestañas en los Modulos EmptyMiér Mayo 29, 2013 6:11 pm por Invitado

» Render Universe - Elite
Pestañas en los Modulos EmptyDom Mayo 19, 2013 3:58 pm por Invitado

» Love orange and cyan (tutorial9
Pestañas en los Modulos EmptyJue Mayo 16, 2013 3:51 pm por Loki

» AVISO
Pestañas en los Modulos EmptyJue Mayo 16, 2013 8:49 am por Sakura92

» Code Geass: Endless Dark [Élite]
Pestañas en los Modulos EmptyMiér Mayo 01, 2013 2:22 am por Invitado

» Creative Designs (normal)
Pestañas en los Modulos EmptyMar Abr 30, 2013 12:48 am por Invitado

» Ultimate Inazuma Rol -Cambio de banner-
Pestañas en los Modulos EmptyJue Abr 25, 2013 1:26 pm por Invitado

» Buenas...
Pestañas en los Modulos EmptyMar Abr 16, 2013 3:58 pm por Naggar

» Actualizacion de Abril
Pestañas en los Modulos EmptyMar Abr 16, 2013 2:00 pm por Sakura92

» Texuras y Png hechas por mi (Sueltas) - Actu 13/04
Pestañas en los Modulos EmptyLun Abr 15, 2013 8:16 am por Jotaro Kujo

» AVISO DE AUSENCIA TEMPORAL
Pestañas en los Modulos EmptyVie Abr 12, 2013 2:46 pm por Zec



Las imagenes e historias que se posteen en este foro son de sus respectivos dueños, cada uno tendra el link correspondiente a la pagina donde lo ubico su creador originalmente.Todo el materia ya se encuentra bajo licencia por favor si quieres tomar algo comunicarse con la administración del foro, o el dueño del post.
Creative Commons License
Crear
foro
Codigos CSS-HTML-JS

APRENDO EN...
Estudio en Eternal Designs Melody Graphics School ise-graficos Pestañas en los Modulos 08 Pestañas en los Modulos Yyyghjy Pestañas en los Modulos Mschool

TOMO RECURSOS DE...
Pestañas en los Modulos Recursos-1

RESEÑAS...


Pestañas en los Modulos

Ir abajo

Pestañas en los Modulos Empty Pestañas en los Modulos

Mensaje por Sakura92 Sáb Abr 06, 2013 7:17 pm

TUTORIAL REALIZADO POR PYRITE WOLF DE SOURCECODE


Módulos con pestañas

Oye! Espera un segundo.
No sé si me recuerdas pero soy esa tonta persona que no pide crédito por sus tutoriales. Así que si estás pensando en dejar link para autentificar el crédito y colocarme en algún rincón de tu foro ¡alto, humano! No es necesario (: Tampoco es necesario postear para ver los codes ni nada de eso.

Para leer este tuto, es altamente recomentable haber leído el resto de los TUTORIALES DE JAVASCRIPT BÁSICO.
Bueno, creo que todos entienden a lo que me refiero, pero por las dudas les dejo un ejemplo. Básicamente, aprenderemos a colocar pestañitas para que se muestren algunos módulos sí, otros no.

1. El HTML & el CSS

Hay muchas formas de hacer esto, pero vamos a ver la que considero más sencilla para empezar. ¡Veamos! Primero que todo, necesitamos tener en claro qué cosas queremos en cada pestaña, y debemos ordenarlas de modo que nos queden cómodas: primero las que van en la primera, segundo las que van en la segunda, etc. Además, debemos asegurarnos de que diga SI en todos los módulos cuando pregunta si quieres que estén en una tabla tipo. Una vez ordenado todo, crearemos un módulo en el que pongamos los botones. A cada botón, debemos ponerle un class diferente y un class común. Por ejemplo:
Código:
<div class="botones boton1">Botón 1</div><div class="botones boton2">Botón 2</div><div class="botones boton3">Botón 3</div>
Cada botón tiene un class común (botones) y uno particular (boton1, boton2, boton3,...). Debemos recordar colocar que NO donde dice "Usar tabla tipo" para este módulo en particular. Para que los botones te salgan uno al lado del otro, añade esto a tu CSS:
Código:
.botones { display: inline-block;}
Luego de estos botones, crearemos cajas que contendrán a los módulos que serán mostrados por cada pestaña, para evitarnos problemas. Cada una debe tener un class o id diferente:
Código:
<div id="caja1"></div><div id="caja2"></div><div id="caja3"></div>
Y en el CSS, haremos que todas estas cajas menos #caja1 (que será la que se verá por defecto) estén ocultas:
Código:
#caja2, #caja3 {display: none;}

2. El Javascript

Bueno, veamos lo que hará funcionar a la magia. Lo primero que necesitaremos será hacer que cada botón muestre una caja y oculte todas las demás:
Código:
$(document).ready(function () {
//el botón 1 accionará la caja 1 y ocultará a la 2 y la 3
 $('.boton1').click(function () {
  $('#caja1').slideDown(700);$('#caja2, #caja3').slideUp(200);
 });
//el botón 2 accionará la caja 2 y ocultará a la 1 y la 3
 $('.boton2').click(function () {
  $('#caja2').slideDown(700);$('#caja1, #caja3').slideUp(200);
 });
//el botón 3 accionará la caja 3 y ocultará a la 1 y la 2
 $('.boton3').click(function () {
  $('#caja3').slideDown(700);$('#caja1, #caja2').slideUp(200);
 });

 })
Es importantísimo tener en cuenta que si tenemos más botones, tendremos que asegurarnos de que por ejemplo el botón 1 oculte a la caja 4 al ser clickeado, por lo que tendrás que añadir bastante code. Por ejemplo, si tuvieses cuatro pestañas, el code sería:
code de cuatro pestañas:
Ahora, los botones funcionan, ¡pero aún nos falta meter los módulos en sus cajas respectivas! Para eso, emplearemos algo de este tuto: los selectores con +. Entonces, supongamos que tenemos seis módulos, ordenados correctamente, que queremos colocar en cada una de las cajas de las pestañas (dos en cada caja). Tendremos que añadir a nuestro JavaScript (adentro del document ready):
Código:
//añadir el primer y segundo módulo a #caja1
$('#caja3+.module, #caja3+.module+.module').appendTo('#caja1');

//añadir el tercer y cuarto módulo a #caja2
$('#caja3+.module+module+module, #caja3+.module+.module+.module+.module').appendTo('#caja2');

//añadir el quinto y sexto módulo a #caja3
$('#caja3+.module+module+module, #caja3+.module+.module+.module+.module').appendTo('#caja3');
¿Qué pasó allí? Veamos un poco los selectores: el de la primer linea que hice llama a #caja3+.module (es decir, el primer módulo después de #caja3) y a #caja3+.module+.module (es decir, el segundo módulo consecutivo después de #caja3). No es muy complicado: cuentas la cantidad de modules consecutivos que hay y la colocas en forma de +.modules.


Me he liado más de lo que esperaba D: pero espero que haya quedado claro. Si tienen dudas, por favor no duden en preguntar aquí mismo, sé que este tuto ha sido enredado y no es apto para cualquiera (?)
​​​​​​​​​​​​​​​​​​​​​​​​​​​
Sakura92
Sakura92
Webmaster
Webmaster

Mensajes : 175
Puntos : 408942
Reputación : 2
Edad : 31

Volver arriba Ir abajo

Volver arriba

- Temas similares

 
Permisos de este foro:
No puedes responder a temas en este foro.