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


Meriteiro

Agosto de 2016



"Este membro destacou-se pela sua dedicação e pelo seu esforço.
Ao longo do último mês, demonstrou as suas capacidades gerais no FDF e, por isso, merece o nosso agradecimento."
Login

Esqueci minha senha

Últimos assuntos
» Efeito na imagem categoria
Hoje à(s) 9:25 por sandra51

» Botão neon resposta rapida
Hoje à(s) 4:44 por Daemon

» Mudar cor Da Barrinha e mudar cor do menu
Hoje à(s) 4:35 por Mr.Probz

» [Ranks] Laranja - Médio - Texto branco
Hoje à(s) 3:47 por Harold C+

» Imagem de fundo no fórum
Hoje à(s) 3:29 por Cream

» Membro do mês
Hoje à(s) 2:42 por while

» Personalizar o menu
Hoje à(s) 2:09 por Cream

Perdi minha senha!
Obter senha

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

Últimas sugestões
Parceiros Forumeiros
Os membros mais ativos da semana
Mr.Probz
 
Cream
 
while
 
idarkdg
 
Nean
 
Apollo
 
Harleen
 
sandra51
 
lavinnia
 
Sennior
 

Quem está conectado
65 usuários online :: 1 usuário cadastrado, Nenhum Invisível e 64 Visitantes :: 2 Motores de busca

staay03

[ 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 : 1226
Pontos Ativos : 3970

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

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

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

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

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

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 : 1411
Pontos Ativos : 2314

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 : 1226
Pontos Ativos : 3970

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 : 1411
Pontos Ativos : 2314

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 : 1226
Pontos Ativos : 3970

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 : 1411
Pontos Ativos : 2314

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 : 1226
Pontos Ativos : 3970

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 : 1411
Pontos Ativos : 2314

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 : 1226
Pontos Ativos : 3970

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

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 : 1226
Pontos Ativos : 3970

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


Bem-vindo ao fórum de suporte Forumeiros!
> Tenha conhecimento do regulamento do setor de suporte.
> Conheça a staff e suas diretrizes.
> Antes de perguntar, use a busca.
> Confira a lista de tutoriais.
> MP apenas para assuntos importantes!


Fraise
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 26/06/2015
Mensagens : 4953
Pontos Ativos : 7058

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