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.
Conectar-se

Esqueci minha senha

Últimos assuntos
» Formular página do Mobirise
Hoje à(s) 03:05 am por Gaaratsu

» Pagina Mobirise Bugado No HTML Do Forum
Hoje à(s) 02:58 am por Daniel Yan

» Personalização De Linhas No Forum Na Barra De Rolamento Da Tela
Hoje à(s) 02:38 am por Daniel Yan

» Nome do Responsável pelo fórum
Hoje à(s) 02:20 am por odelgado

» Domínio Personalizado
Hoje à(s) 01:53 am por Gaaratsu

» Remover espaçamento a mais :\
Hoje à(s) 01:37 am por Gaaratsu

» Avatar Sonic
Hoje à(s) 01:08 am por Gaaratsu

Perdi minha senha!
Você precisa recuperar sua senha?
Clique aqui
Os membros mais ativos da semana
Luiz
 
Gaaratsu
 
iScroll
 
Daniel Yan
 
Ketholy
 
Eduardo Lima
 
Shek
 
ranzatti
 
cocas20
 
Lost154
 

Quem está conectado
201 usuários online :: 6 usuários cadastrados, Nenhum Invisível e 195 Visitantes :: 2 Motores de busca

Daniel Yan, Gaaratsu, Guzonaro, Insano556, Lost154, odelgado

[ Ver toda a lista ]


O recorde de usuários online foi de 3131 em 24/12/09, 01:05 pm

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 16/10/15, 10:50 am

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 27/10/15, 12:34 pm, editado 1 vez(es)
avatar

ZombieW
Membro do Fórum

Masculino
Inscrito dia : 02/08/2010
Mensagens : 1262
Pontos Ativos : 1779

Ver perfil do usuário http://www.perfectteam.org

Resolvido Re: Sistema de Abas

Mensagem por ZombieW em 06/11/15, 11:32 am

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 : 1262

Ver perfil do usuário http://www.perfectteam.org

Resolvido Re: Sistema de Abas

Mensagem por MateusAnjosV em 06/11/15, 11:35 am

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 : 1436

Ver perfil do usuário http://ajuda.forumeiros.com/

Resolvido Re: Sistema de Abas

Mensagem por ZombieW em 06/11/15, 11:40 am

@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 : 1262

Ver perfil do usuário http://www.perfectteam.org

Resolvido Re: Sistema de Abas

Mensagem por MateusAnjosV em 06/11/15, 11:54 am

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 : 1436

Ver perfil do usuário http://ajuda.forumeiros.com/

Resolvido Re: Sistema de Abas

Mensagem por ZombieW em 06/11/15, 01:36 pm

@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 : 1262

Ver perfil do usuário http://www.perfectteam.org

Resolvido Re: Sistema de Abas

Mensagem por MateusAnjosV em 06/11/15, 01:48 pm

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

MateusAnjosV
Membro do Fórum

Masculino
Inscrito dia : 16/10/2015
Mensagens : 1436
Pontos Ativos : 2009

Ver perfil do usuário http://ajuda.forumeiros.com/

Resolvido Re: Sistema de Abas

Mensagem por ZombieW em 06/11/15, 01:56 pm

@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).
avatar

ZombieW
Membro do Fórum

Masculino
Inscrito dia : 02/08/2010
Mensagens : 1262
Pontos Ativos : 1779

Ver perfil do usuário http://www.perfectteam.org

Resolvido Re: Sistema de Abas

Mensagem por MateusAnjosV em 06/11/15, 04:12 pm

É 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
avatar

MateusAnjosV
Membro do Fórum

Masculino
Inscrito dia : 16/10/2015
Mensagens : 1436
Pontos Ativos : 2009

Ver perfil do usuário http://ajuda.forumeiros.com/

Resolvido Re: Sistema de Abas

Mensagem por ZombieW em 06/11/15, 04:24 pm

@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
avatar

ZombieW
Membro do Fórum

Masculino
Inscrito dia : 02/08/2010
Mensagens : 1262
Pontos Ativos : 1779

Ver perfil do usuário http://www.perfectteam.org

Resolvido Re: Sistema de Abas

Mensagem por MateusAnjosV em 06/11/15, 04:40 pm

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.


avatar

MateusAnjosV
Membro do Fórum

Masculino
Inscrito dia : 16/10/2015
Mensagens : 1436
Pontos Ativos : 2009

Ver perfil do usuário http://ajuda.forumeiros.com/

Resolvido Re: Sistema de Abas

Mensagem por ZombieW em 09/11/15, 09:42 am

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.
avatar

ZombieW
Membro do Fórum

Masculino
Inscrito dia : 02/08/2010
Mensagens : 1262
Pontos Ativos : 1779

Ver perfil do usuário http://www.perfectteam.org

Resolvido Re: Sistema de Abas

Mensagem por MateusAnjosV em 09/11/15, 01:25 pm

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 ?
avatar

MateusAnjosV
Membro do Fórum

Masculino
Inscrito dia : 16/10/2015
Mensagens : 1436
Pontos Ativos : 2009

Ver perfil do usuário http://ajuda.forumeiros.com/

Resolvido Re: Sistema de Abas

Mensagem por ZombieW em 09/11/15, 02:10 pm

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.
avatar

ZombieW
Membro do Fórum

Masculino
Inscrito dia : 02/08/2010
Mensagens : 1262
Pontos Ativos : 1779

Ver perfil do usuário http://www.perfectteam.org

Resolvido Re: Sistema de Abas

Mensagem por Ace em 09/11/15, 02:12 pm

@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.
avatar

Ace
Principal contribuidor
Principal contribuidor

Inscrito dia : 06/07/2011
Mensagens : 8880
Pontos Ativos : 11604

Ver perfil do usuário http://ajuda.forumeiros.com
  • 0

Resolvido Re: Sistema de Abas

Mensagem por ZombieW em 12/11/15, 11:32 pm

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
avatar

ZombieW
Membro do Fórum

Masculino
Inscrito dia : 02/08/2010
Mensagens : 1262
Pontos Ativos : 1779

Ver perfil do usuário http://www.perfectteam.org

Resolvido Re: Sistema de Abas

Mensagem por Fraise em 12/11/15, 11:33 pm

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".
avatar

Fraise
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 26/06/2015
Mensagens : 5023
Pontos Ativos : 6703

Ver perfil do usuário 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


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