Sistema de Abas

Página 2 de 2 Anterior  1, 2

Ver o tópico anterior Ver o tópico seguinte Ir em baixo

Atendido / Resolvido Sistema de Abas

Mensagem por ZombieW em 16.10.15 14:50

Relembrando a primeira mensagem :

Detalhes da questão


Endereço do fórum: www.tutorialdopw.com
Versão do fórum: Phpbb3

Descrição


Bom dia,

Como posso implementar este sistema de abas que existe no início do FdF?

Sistema de Abas - Página 2 00410


Última edição por ZombieW em 27.10.15 14:34, editado 1 vez(es)
ZombieW

ZombieW
Membro do Fórum

Masculino
Inscrito dia : 02/08/2010
Mensagens : 1352
Pontos Ativos : 1908

http://www.perfectteam.org

Atendido / Resolvido Re: Sistema de Abas

Mensagem por MateusAnjosV em 06.11.15 15:48

Estranho... agora aqui tá normal, bom, você testou e alterou os valores, como eu disse?
MateusAnjosV

MateusAnjosV
Membro do Fórum

Masculino
Inscrito dia : 16/10/2015
Mensagens : 1694
Pontos Ativos : 2324

http://holder.forumeiros.com/

Atendido / Resolvido Re: Sistema de Abas

Mensagem por ZombieW em 06.11.15 15:56

@MateusAnjosV

Está normal, porque eu comentei essa ultima parte do CSS! =D

E sim, eu tentei alterar os valores, mas ficou na mesma.

@Edit

Descomentei o CSS, mas aparentemente não deu resultado.

Só para constar, mudei o nome no CSS de "tabelafraise" para "sistemadeabas" e dentro do código do tópico, eu renomeei as divs (tmb fiz isso no CSS).
ZombieW

ZombieW
Membro do Fórum

Masculino
Inscrito dia : 02/08/2010
Mensagens : 1352
Pontos Ativos : 1908

http://www.perfectteam.org

Atendido / Resolvido Re: Sistema de Abas

Mensagem por MateusAnjosV em 06.11.15 18:12

É que você o personalizou... faça o seguinte, como entende um pouco de HTML (pelo que notei), atribua um id do seu gosto para os quatro conteúdos das abas.
E utilize esse CSS:
Código:
idgosto1 {margin-top: -10px}
idgosto2 {position: relative;top: -28px}
idgosto3 { position: relative;top: -48px !important}
idgosto4 { position: relative;top: -68px !important}
Lembre-se de alterar o código acima. Caso não consiga, forneça-o, ok?

Feliz
MateusAnjosV

MateusAnjosV
Membro do Fórum

Masculino
Inscrito dia : 16/10/2015
Mensagens : 1694
Pontos Ativos : 2324

http://holder.forumeiros.com/

Atendido / Resolvido Re: Sistema de Abas

Mensagem por ZombieW em 06.11.15 18:24

@MateusAnjosV

Vamos lá:

CSS:

Código:

/* Sistema de Abas - Fraise FdF */
#sistemadeabas {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #000000;
}
.menu {
margin: 1px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: bold;
color: #000033;
background-color: #FFFFFF;
border-right: 1px solid #000000;
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
padding: 5px;
cursor: hand;
text-align: center;
margin-top: 0px;
}
.menu-sel {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: bold;
color: #0000FF;
background-color: #FFFAFA;
border-right: 1px solid #000000;
border-top: 2px solid #000000;
padding: 5px;
cursor: hand;
margin: 0px;
margin-top: 0px;
}
.tb-conteudo {
border-right: 1px solid #000000;
border-bottom: 1px solid #000000;
margin: 0px;
}
.conteudo {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: normal;
color: #white !important;
background-color: ;
padding: 5px;
margin:0px;
width:500px;
}
#div_Aba0 {margin-top: -10px} /* suba o 10 para subir o primeiro */
#div_Aba1 {position: relative;top: -28px} /* suba o 28 para subir o segundo, etc */
#div_Aba2 { position: relative;top: -48px !important}
#div_Aba3 { position: relative;top: -68px !important}
#div_Aba4 { position: relative;top: -88px !important}
#div_Aba5 { position: relative;top: -108px !important}
#div_Aba6 { position: relative;top: -128px !important}
#div_Aba7 { position: relative;top: -148px !important}
#div_Aba8 { position: relative;top: -168px !important}
#div_Aba9 { position: relative;top: -188px !important}

JS:

Código:
$(document).ready(function() {
    
    $(".menu[data-tab]").click(function() {
        
        // reseta as propriedades das outras abas      
        $(".menu[data-tab]").each(function() {
            esconder($(this));
        });
        
        // muda as propriedades da aba atual
        exibir($(this));
    });
});

function esconder(menu) {
    mudarPropriedades(menu, "none", "white");
}

function exibir(menu) {
    mudarPropriedades(menu, "block", "silver");
}

function mudarPropriedades(menu, display, corDeFundo) {
    $(menu).css("background-color", corDeFundo);
    
    var aba = $(menu).attr("data-tab");
    $("#" + aba).css("display", display);
}
Acho que aqui não alterei nada...

Aqui um exemplo com 4 abas:

http://www.tutorialdoca.com/t1746-teste-sistema-de-abas#2042

Aqui um exemplo com 9 abas:

http://www.tutorialdopw.com/t1167-teste-sistema-de-abas#3529
ZombieW

ZombieW
Membro do Fórum

Masculino
Inscrito dia : 02/08/2010
Mensagens : 1352
Pontos Ativos : 1908

http://www.perfectteam.org

Atendido / Resolvido Re: Sistema de Abas

Mensagem por MateusAnjosV em 06.11.15 18:40

Entendi.... vamos lá, vou tentar explicar, ok? Isso vai ser muito relativo a tamanho, então não da pra automatizar... Cada vez que for postar terá de configurar:
Código:

.conteudo:nth-of-type(10) {position: relative !important;top: -10px !important}
Nesse caso, o 10 = 9, ele afetará a aba 9.
Vamos lá, procure por 10 no código (não é -10, é 10) e entenda que ele é o que define o elemento que será alterado. Ou seja, se desejar alterar a aba 1 você vai adicionar um número somado a ela, então, se for alterar a aba 1, escreva 2, se for alterar a aba 3, escreva 4.


Agora procure por -10, isso é quanto cada um vai subir, entendeu? Testei aqui e foi de boa, vamos ver se consegue ai.


MateusAnjosV

MateusAnjosV
Membro do Fórum

Masculino
Inscrito dia : 16/10/2015
Mensagens : 1694
Pontos Ativos : 2324

http://holder.forumeiros.com/

Atendido / Resolvido Re: Sistema de Abas

Mensagem por ZombieW em 09.11.15 11:42

Desculpe a demora para responder, não parei muito em casa.

@Topic

Não entendi muito bem onde eu deva alterar esse código? No CSS? Mas se eu terei de alterar toda vez, uma alteração não vai influenciar nas outras?

E outra coisa, você poderia me "mastigar" mais o que você quis dizer? Ficou confuso.
ZombieW

ZombieW
Membro do Fórum

Masculino
Inscrito dia : 02/08/2010
Mensagens : 1352
Pontos Ativos : 1908

http://www.perfectteam.org

Atendido / Resolvido Re: Sistema de Abas

Mensagem por MateusAnjosV em 09.11.15 15:25

Um exemplo mais "mastigado":
Spoiler:
Temos essa div:
Código:
<div></div>
Para colocar um efeito CSS só nela, faremos assim:
Código:
<div style=""></div>
Ou seja, na div que modificou, é só adicionar o style="", entendeu?
Exemplo:
Código:
<div style="position: relative !important;top: -10px !important"></div>
Entendeu? Espero que sim e no caso, terá de fazer para todos que for postar... Posso tentar automatizar... tentar, mas não garanto, ok ?
MateusAnjosV

MateusAnjosV
Membro do Fórum

Masculino
Inscrito dia : 16/10/2015
Mensagens : 1694
Pontos Ativos : 2324

http://holder.forumeiros.com/

Atendido / Resolvido Re: Sistema de Abas

Mensagem por ZombieW em 09.11.15 16:10

uahauhauha

Essa parte eu entendi camarada.

Foi essa que não:

@MateusAnjosV escreveu:Nesse caso, o 10 = 9, ele afetará a aba 9.
Vamos lá, procure por 10 no código (não é -10, é 10) e entenda que ele é o que define o elemento que será alterado. Ou seja, se desejar alterar a aba 1 você vai adicionar um número somado a ela, então, se for alterar a aba 1, escreva 2, se for alterar a aba 3, escreva 4.
ZombieW

ZombieW
Membro do Fórum

Masculino
Inscrito dia : 02/08/2010
Mensagens : 1352
Pontos Ativos : 1908

http://www.perfectteam.org

Atendido / Resolvido Re: Sistema de Abas

Mensagem por Ace em 09.11.15 16:12

@ZombieW escreveu:uahauhauha

Essa parte eu entendi camarada.

Foi essa que não:

@MateusAnjosV escreveu:Nesse caso, o 10 = 9, ele afetará a aba 9.
Vamos lá, procure por 10 no código (não é -10, é 10) e entenda que ele é o que define o elemento que será alterado. Ou seja, se desejar alterar a aba 1 você vai adicionar um número somado a ela, então, se for alterar a aba 1, escreva 2, se for alterar a aba 3, escreva 4.

Olá,

A numeração em códigos se comporta de maneira diferente do que estamos acostumados. Ela começa sempre no 0, embora ela seja a 1. Ou seja, se você quiser editar a primeira aba, terá de procurar a correspondencia 0, e não a 1. Se quiser editar a aba 3, o número dela no código será 2 e assim por diante. Feliz

Att.
Ace

Ace
Principal contribuidor
Principal contribuidor

Inscrito dia : 06/07/2011
Mensagens : 8881
Pontos Ativos : 11607

https://ajuda.forumeiros.com
  • 0

Atendido / Resolvido Re: Sistema de Abas

Mensagem por ZombieW em 13.11.15 1:32

Agradeço toda a ajuda, mas vou descontinuar com esse sistema, ele está bugando alguns JS do fórum.

Sendo assim, obrigado a todos pela a ajuda.

@MateusAnjosV

Vai virar Ajudeiro? Deveria! =D
ZombieW

ZombieW
Membro do Fórum

Masculino
Inscrito dia : 02/08/2010
Mensagens : 1352
Pontos Ativos : 1908

http://www.perfectteam.org

Atendido / Resolvido Re: Sistema de Abas

Mensagem por Fraise em 13.11.15 1:33

Não deve faltar muito. Rindo

Sistema de Abas - Página 2 Symbol10 Questão marcada como Resolvida ou o Autor solicitou que ela fosse arquivada.

Tópico marcado como Resolvido e movido para "Questões resolvidas".
Fraise

Fraise
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 26/06/2015
Mensagens : 6303
Pontos Ativos : 7760

https://ajuda.forumeiros.com/ https://twitter.com/@FraiseFdF

Página 2 de 2 Anterior  1, 2

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo


Permissão deste fórum:
Você não pode responder aos tópicos neste fórum