Últimos temas
» [SKIN] Hello? how are you
por Unity Vie Ene 06, 2017 11:55 pm

» Pack 1 de html (personaje + firma)
por Rose Jue Ene 05, 2017 5:19 pm

» [FIRMA] Mikagura Suite
por Natty Mar Dic 27, 2016 9:57 am

» [SKIN] Attack No Titan
por Flowman Jue Dic 15, 2016 8:51 pm

» Owari no seraph's
por Cool Skelleton_95 Mar Nov 15, 2016 2:04 pm

» Simple flutter
por Amaranth Miér Oct 26, 2016 8:54 am

» Duda sobre sorteo de skin
por SS Jue Sep 15, 2016 8:22 pm

» [MOVIL] [ FA ] Haikyuu
por Sarisha Mar Ago 30, 2016 6:07 am

» Pedido grafico
por DangerStRichard Dom Ago 28, 2016 7:09 pm


{TUTORIAL JS} Categorías en Pestañas

Ver el tema anterior Ver el tema siguiente Ir abajo

{TUTORIAL JS} Categorías en Pestañas

Mensaje por Mikae el Jue Jul 09, 2015 9:55 am

Categorías en Pestañas
Nombre del tutorial: Categorías en Pestañas
Dificultad: Intermedia
Tiempo de lectura: 10 minutos.
Creador del tutorial: Foroactivo
Si está dedicado a alguien en particular: Todo aquel que lo lea.

Bases y Recordatorios

¡Hey! No olvides leer completito, esté código aun no sé o que yo recuerda el nombre del creador, pero si alguien sabe me avisa, para dar los respectivos códigos. Este código es para la plataforma phpbb3, permite separar las categorías en pestañas, acostando visiblemente el scroll y evitando que este se alargue mucho.


Manos a la obra

Ingresan a Ir al planel de administración Visualización     Imágenes y Colores Colores

Copian y pegan esto:

Código:
#cat-tabs { text-align: center; margin: 10px auto; }
#cat-tabs .ct-item { display: inline; background: blue; color: #fff; margin: 5px; padding: 5px; }
#cat-tabs .ct-abled { color: blue; background: #fff; }

#cat-tabs para editar el ancho y alto de las categorias
#cat-tabs .ct-item para editar los botones de las pestañas.
#cat-tabs .ct-abled para editar los botones de las pestañas al no clickearla.


Finalmente se dirijen a Ir al planel de administración Módulos     HTML & JAVASCRIPT Gestión de los códigos Javascript

Título: Categorias
Posición: En todas las páginas o en el indice
Código:
Código:
       $(function() {
        $("div.table-title").closest("div.forabg").addClass("cat-table").first().before('<div id="cat-tabs"></div>');
        $(".cat-table:not(:first)").hide();
        $("div.table-title h2").each(function() {
         $("#cat-tabs").append('<div class="ct-item">' + $(this).text() + "</div>")
        });
        $("#cat-tabs .ct-item").click(function() {
         $("#cat-tabs .ct-abled").removeClass("ct-abled");
         $(this).addClass("ct-abled");
         $(".cat-table").not($(".cat-table").eq($("#cat-tabs .ct-item").index(this)).slideDown(200)).slideUp(200)
        }).first().addClass("ct-abled")
        });


mikae © 2016


Última edición por Mikae el Dom Jul 31, 2016 7:48 pm, editado 1 vez
avatar
Mikae

Mensajes : 275

Ver perfil de usuario

Volver arriba Ir abajo

Re: {TUTORIAL JS} Categorías en Pestañas

Mensaje por Kye el Sáb Jul 02, 2016 10:46 pm

Hola! Una pregunta... ¿En qué parte del CSS se pega el primer código? Shocked
avatar
Kye

Mensajes : 2

Ver perfil de usuario

Volver arriba Ir abajo

Re: {TUTORIAL JS} Categorías en Pestañas

Mensaje por Mikae el Dom Jul 03, 2016 10:28 am

Ir al planel de administración Visualización Imágenes y Colores > Colores > CSS Stylesheet

Solo le pegas en el CSS.
avatar
Mikae

Mensajes : 275

Ver perfil de usuario

Volver arriba Ir abajo

Re: {TUTORIAL JS} Categorías en Pestañas

Mensaje por Kye el Dom Jul 03, 2016 5:10 pm

Es que, lo pongo (ya activado el javascript) y no me sale Sad
screenshots:




avatar
Kye

Mensajes : 2

Ver perfil de usuario

Volver arriba Ir abajo

Re: {TUTORIAL JS} Categorías en Pestañas

Mensaje por Contenido patrocinado


Contenido patrocinado


Volver arriba Ir abajo

Ver el tema anterior Ver el tema siguiente Volver arriba

- Temas similares

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