Fórum dos Fóruns

Fórum dos Fóruns Forumeiros

Welcome FdF Bem-vindo ao fórum de suporte Forumeiros  Muito feliz


Para aproveitar tudo o que o nosso fórum lhe oferece, agradecemos que se identifique, se já é nosso membro, ou que se junte à nossa comunidade, fazendo o seu registo.
Acesso rápido

Fóruns de suporte oficiais


Pesquisa de Satisfação
Queremos saber a sua opinião sobre os nossos serviços. Clique nesta vinheta e preencha este inquérito.

Login

Esqueci minha senha

Últimos assuntos
» [Logo] Musculação
Hoje à(s) 4:33 por P.H

» [Logo] Pássaros
Hoje à(s) 3:45 por P.H

» Problemas na ativação do Formulario
Hoje à(s) 1:59 por Harleen

» Mudar pre-visualização do formulário
Hoje à(s) 0:29 por YouTube3

» Personalizar SCEditor
Hoje à(s) 0:29 por YouTube3

» Personalizar Widget
Ontem à(s) 23:39 por YuriGama

» Bug na Pagina HTML
Ontem à(s) 23:37 por xBreninho_.

LiveStream TV Forumeiros - #Forumeiros
Perdi minha senha!
Obter senha

Nota: use se tiver perdido acesso ao seu painel de controle.

Parceiros Forumeiros
Quem está conectado
68 usuários online :: Nenhum usuário registrado, Nenhum Invisível e 68 Visitantes :: 2 Motores de busca

Nenhum

[ Ver toda a lista ]


O recorde de usuários online foi de 3131 em Qui 24 Dez 2009 - 15:05

Sistema de Abas

Página 2 de 2 Anterior  1, 2

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

Resolvido Sistema de Abas

Mensagem por ZombieW em Sex 16 Out 2015 - 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?



Última edição por ZombieW em Ter 27 Out 2015 - 14:34, editado 1 vez(es)

ZombieW
Membro do Fórum

Masculino
Inscrito dia : 02/08/2010
Mensagens : 1232
Pontos Ativos : 4053

http://www.perfectteam.org

Resolvido Re: Sistema de Abas

Mensagem por ZombieW em Sex 6 Nov 2015 - 13:32

Certo, tudo instalado.

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

Fiz apenas uma modificação na tabela para ficar menor e quebrar em 2 linhas:

Código:
<table id="tabelafraise" width="450" height="50"  align="left" valign="top" cellspacing="0" cellpadding="5" border="0" style="border-left: 1px solid #000000;" >
<tr><td height="20" width="50" class="menu" id="td_usua" data-tab="div_usua">Usuario</td>
<td height="20" width="50" class="menu" id="td_empr" data-tab="div_empr">Empresa</td></tr>
<tr><td height="20" width="50" class="menu" id="td_nota" data-tab="div_nota">Nota Fiscal</td>
<td height="20" width="50" class="menu" id="td_soft" data-tab="div_soft">Software</td>
</tr>
</table>
<div id="div_usua" class="conteudo" style="display: none; padding-top:5px;">
<table align="left" border="0" width="2%">
<tr>
<td>USUA</td>
</tr>
</table></div>
<div id="div_empr" class="conteudo"  style="display: none; padding-top:5px;">
<table border="0" width="" align="left"valign="top">
<tr>
<td>EMPR</td>
</tr>
</table></div>
<div id="div_nota" class="conteudo"  style="display: none; padding-top:5px;">
<table border="0" width="" align="left"valign="top">
<tr>
<td>NOTA</td>
</tr>
</table></div>     
<div id="div_soft" class="conteudo"  style="display: none; padding-top:5px;">
<table border="0" width="" align="left"valign="top">
<tr>
<td>SOFT</td>
</tr>
</table></div>

Mas como você pode ver o texto ao clicar nos "botões" não funciona.

Sei que fui avisado que bugs podiam ocorrer.

ZombieW
Membro do Fórum

Inscrito dia : 02/08/2010
Mensagens : 1232

http://www.perfectteam.org

Resolvido Re: Sistema de Abas

Mensagem por MateusAnjosV em Sex 6 Nov 2015 - 13:35

Relaxe, não vai "rolar" bugs, ok?
Ele funciona sim, veja:
http://prntscr.com/8zonsh


Acrescente em seu CSS, assim, modificamos a cor do texto:
Código:
.conteudo {color: gray !important}

MateusAnjosV
Membro do Fórum

Inscrito dia : 16/10/2015
Mensagens : 1417

http://ajuda.forumeiros.com/

Resolvido Re: Sistema de Abas

Mensagem por ZombieW em Sex 6 Nov 2015 - 13:40

@MateusAnjosV

Funcionou, obrigado.

Porém, eu vi que cada botão trás o texto em uma linha.

É possível sempre trazer na mesma linha?

Pergunto porque minha ideia é criar de fato uma tabela bem grande com diversas armas. E o usuário escolher uma das versões das armas nesse sistema de abas.

Só que se uma arma sair numa posição e outra mais abaixo, vai dar no mesmo de não ter o sistema de abas! :S

ZombieW
Membro do Fórum

Inscrito dia : 02/08/2010
Mensagens : 1232

http://www.perfectteam.org

Resolvido Re: Sistema de Abas

Mensagem por MateusAnjosV em Sex 6 Nov 2015 - 13:54

Entendo... adicione mais este CSS:
Código:
#div_usua {margin-top: -10px} /* suba o 10 para subir o primeiro */
#div_empr {position: relative;top: -28px} /* suba o 28 para subir o segundo, etc */
#div_nota { position: relative;top: -48px !important}
#div_soft { position: relative;top: -68px !important}
Eu não estou conseguindo clicar... então não testei, fui na cabeça mesmo...

MateusAnjosV
Membro do Fórum

Inscrito dia : 16/10/2015
Mensagens : 1417

http://ajuda.forumeiros.com/

Resolvido Re: Sistema de Abas

Mensagem por ZombieW em Sex 6 Nov 2015 - 15:36

@MateusAnjosV escreveu:Entendo... adicione mais este CSS:
Código:
#div_usua {margin-top: -10px} /* suba o 10 para subir o primeiro */
#div_empr {position: relative;top: -28px} /* suba o 28 para subir o segundo, etc */
#div_nota { position: relative;top: -48px !important}
#div_soft { position: relative;top: -68px !important}
Eu não estou conseguindo clicar... então não testei, fui na cabeça mesmo...

É, ele bugou após clicar em qualquer uma das abas.

ZombieW
Membro do Fórum

Inscrito dia : 02/08/2010
Mensagens : 1232

http://www.perfectteam.org

Resolvido Re: Sistema de Abas

Mensagem por MateusAnjosV em Sex 6 Nov 2015 - 15:48

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

MateusAnjosV
Membro do Fórum

Masculino
Inscrito dia : 16/10/2015
Mensagens : 1417
Pontos Ativos : 2398

http://ajuda.forumeiros.com/

Resolvido Re: Sistema de Abas

Mensagem por ZombieW em Sex 6 Nov 2015 - 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
Membro do Fórum

Masculino
Inscrito dia : 02/08/2010
Mensagens : 1232
Pontos Ativos : 4053

http://www.perfectteam.org

Resolvido Re: Sistema de Abas

Mensagem por MateusAnjosV em Sex 6 Nov 2015 - 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
Membro do Fórum

Masculino
Inscrito dia : 16/10/2015
Mensagens : 1417
Pontos Ativos : 2398

http://ajuda.forumeiros.com/

Resolvido Re: Sistema de Abas

Mensagem por ZombieW em Sex 6 Nov 2015 - 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
Membro do Fórum

Masculino
Inscrito dia : 02/08/2010
Mensagens : 1232
Pontos Ativos : 4053

http://www.perfectteam.org

Resolvido Re: Sistema de Abas

Mensagem por MateusAnjosV em Sex 6 Nov 2015 - 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
Membro do Fórum

Masculino
Inscrito dia : 16/10/2015
Mensagens : 1417
Pontos Ativos : 2398

http://ajuda.forumeiros.com/

Resolvido Re: Sistema de Abas

Mensagem por ZombieW em Seg 9 Nov 2015 - 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
Membro do Fórum

Masculino
Inscrito dia : 02/08/2010
Mensagens : 1232
Pontos Ativos : 4053

http://www.perfectteam.org

Resolvido Re: Sistema de Abas

Mensagem por MateusAnjosV em Seg 9 Nov 2015 - 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
Membro do Fórum

Masculino
Inscrito dia : 16/10/2015
Mensagens : 1417
Pontos Ativos : 2398

http://ajuda.forumeiros.com/

Resolvido Re: Sistema de Abas

Mensagem por ZombieW em Seg 9 Nov 2015 - 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
Membro do Fórum

Masculino
Inscrito dia : 02/08/2010
Mensagens : 1232
Pontos Ativos : 4053

http://www.perfectteam.org

Resolvido Re: Sistema de Abas

Mensagem por Ace em Seg 9 Nov 2015 - 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
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 06/07/2011
Mensagens : 8878
Pontos Ativos : 13582

http://ajuda.forumeiros.com
  • 0

Resolvido Re: Sistema de Abas

Mensagem por ZombieW em Sex 13 Nov 2015 - 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
Membro do Fórum

Masculino
Inscrito dia : 02/08/2010
Mensagens : 1232
Pontos Ativos : 4053

http://www.perfectteam.org

Resolvido Re: Sistema de Abas

Mensagem por Fraise em Sex 13 Nov 2015 - 1:33

Não deve faltar muito. Rindo

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
Super usuário

Masculino
Inscrito dia : 26/06/2015
Mensagens : 4973
Pontos Ativos : 7161

http://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

- Tópicos similares

Permissão deste fórum:
Você não pode responder aos tópicos neste fórum
Fórum dos Fóruns - Ajuda mútua para usuários forumeiros
on
Fórum grátis: interajuda aos usuários forumeiros. Criar e administrar um fórum. Descubra nossos guias, tutoriais e astúcias no suporte de Forumeiros.
Votações: 5