Ir para conteúdo
Fórum Script Brasil
  • 0

Trabalhando Com Abas

Tenko

Perguntado por Tenko,

 Share

Pergunta

Tenko

Tenko

Postado
Postado

Desta vez resolvi mostrar como é fácil trabalhar com Abas, famosas divisões em blocos para reduzir o tamanho do conteúdo visível.

Esse é um método muito simples, você vai levar uns 5 minutos para entender como funciona e poderá aplicá-lo em seu sistema tornando mais interativo.

abas.htm

<html>
    <head>
        <title>    
             Desenvolvido por Tenko            
        </title>
        
        
        <script>
        
        var aAbas       = new Array();  // Lista de abas do documento atual
        var sAbaAtiva   = ""                 // Define qual é a aba ativa no momento
        var ABA_ID      = 1
        var ABA_BLOCO   = 2
        var ABA_CAMPOS  = 3
        
        function defineAba( sId, sBloco ){
           var aAba  = new Array( ABA_CAMPOS );
           aAba[ ABA_ID    ]  = sId;
           aAba[ ABA_BLOCO ]  = sBloco;
           aAbas.push( aAba );
        }

        function defineAbaAtiva( sId ){
           trataCliqueAba( sId );
        }

        function trataMouseAba( oAba ){
           oAba.style.cursor  = "pointer";
        }

        function trataCliqueAba( sId ){
           for ( var iAba  = 0; iAba < aAbas.length; iAba++ ){
              var aAba  = aAbas[ iAba ];

              if   ( aAba[ ABA_ID ] == sId ) ativaAba( aAba );

              else                           inativaAba( aAba );
           }
        }

        function ativaAba( aAba ){
           var sAba       = aAba[ ABA_ID ];
           var oAba       = document.getElementById( sAba );
           mudaClasse( oAba, "abaativa" ); // Esse comando chama a classe css para fazer a troca

           var sBlocoAba  = aAba[ ABA_BLOCO ];
           var oBlocoAba  = document.getElementById( sBlocoAba );
           oBlocoAba.style.display  = "block";
        }

        function inativaAba( aAba ){
           var sAba       = aAba[ ABA_ID ];
           var oAba       = document.getElementById( sAba );
           mudaClasse( oAba, "abainativa" ); // Esse comando chama a classe css para fazer a troca

           var sBlocoAba  = aAba[ ABA_BLOCO ];
           var oBlocoAba  = document.getElementById( sBlocoAba );
           oBlocoAba.style.display  = "none";
        }
        
        function mudaClasse( oObjeto, sClasse ){
           oObjeto.className  = sClasse;
        }
        
        </script>
                
        <link href="estiloSistema.css" rel="stylesheet" type="text/css" />
        
    </head>
    
    <body>
    
        <table width="50%" border="0" cellpadding="0" cellspacing="1">
            <tr>
                <td width="10%" height="36" align="center" valign="middle" class="abaativa" id="celAbaCadastro" onClick="trataCliqueAba( this.id );" onMouseOver="trataMouseAba( this );">
                    Cadastro                </td>
                
                <td id="celAbaRelatorio" align="center" valign="middle" width="10%" class="abainativa" onMouseOver="trataMouseAba( this );" onClick="trataCliqueAba( this.id );">
                    Relatório
                </td>
                
                <td id="celAbaConsultas" align="center" valign="middle" width="10%" class="abainativa" onMouseOver="trataMouseAba( this );" onClick="trataCliqueAba( this.id );">
                    Consultas
                </td>
                
                <td id="celAbaModelos" align="center" valign="middle" width="10%" class="abainativa" onMouseOver="trataMouseAba( this );" onClick="trataCliqueAba( this.id );">
                    Modelos Impress&atilde;o
                </td>
            </tr>
    </table>
        
        <br>
        <br>
        
        <div id="divCadastro" style="display: block">
        
            <table border="0" width="50%">
                <tr>
                    <td>
                        CADASTRO
                    </td>
                </tr>
          </table>
        
        </div>
        
        <div id="divRelatorio" style="display: none">

            <table border="0" width="50%">
                <tr>
                    <td>
                        RELATÓRIOS
                    </td>
                </tr>
            </table>

        </div>
        
        <div id="divConsulta" style="display: none">

            <table border="0" width="50%">
                <tr>
                    <td>
                        CONSULTAS
                    </td>
                </tr>
            </table>

        </div>
        
        <div id="divModelo" style="display: none">

            <table border="0" width="50%">
                <tr>
                    <td>
                        MODELOS DE IMPRESSÃO
                    </td>
                </tr>
            </table>

        </div>
        
        <script>
            defineAba( "celAbaCadastro"  , "divCadastro"   );
            defineAba( "celAbaRelatorio" , "divRelatorio"  );
            defineAba( "celAbaConsultas" , "divConsulta"   );
            defineAba( "celAbaModelos"   , "divModelo"     );
            defineAbaAtiva( "celAbaCadastro" );
        </script>
        
    
    </body>
</html>
Folha de estilos que vai fazer a coisa acontecer. estiloSistema.css 
.abaativa {
    font-family: verdana;
    font-size: 10px;
    font-style: normal;
    line-height: normal;
    font-weight: bold;
    font-variant: normal;
    text-transform: capitalize;
    color: #FFFFFF;
    background-image: url(../imagens/telas/abaAtiva.png);
    background-color: #999999;
}

.abainativa {
    font-family: verdana;
    font-size: 10px;
    font-style: normal;
    line-height: normal;
    font-weight: bold;
    font-variant: normal;
    text-transform: capitalize;
    color: #FFFFFF;
    background-image: url(../imagens/telas/abaInativa.png);
    background-color: #666666;
}

Espero que gostem, precisando estamos ai para tirar as dúvidas.

Abraços

Link para o comentário
Compartilhar em outros sites

13 respostass a esta questão

Posts Recomendados

  • 0
Guest Desconhecido

Guest Desconhecido

Postado
Postado

Tenko,Achei esse código MUITO COMPLEXO.tinha criado uma versão simplificada do seu script

<body onload="altTab(0)" style="margin: 0; padding: 0">

<table cellspacing="1" cellpadding="0" width="100%" height="22">

<tr>

<td class="focused" id="pt" onclick="altTab(0)" onmouseover="hoverClass('hovered',0)" onmouseout="hoverClass('blured',0)">ABA 1</td>

<td class="blured" id="pt" onclick="altTab(1)" onmouseover="hoverClass('hovered',1)" onmouseout="hoverClass('blured',1)">ABA 2</td>

<td class="blured" id="pt" onclick="altTab(2)" onmouseover="hoverClass('hovered',2)" onmouseout="hoverClass('blured',2)">ABA 3</td>

<td class="blured" id="pt" onclick="altTab(3)" onmouseover="hoverClass('hovered',1]3)" onmouseout="hoverClass('blured',3)">ABA 4</td>

</tr>

</table>

<style>

.focused {color: white; background: red; font-size: 8pt; font-fanily: verdana; cursor: default}

.blured {color: white; background: green; font-size: 8pt; font-fanily: verdana; cursor: default}

.hovered {color: white; background: blue; font-size: 8pt; font-fanily: verdana; cursor: default}

</style>

&lt;script>

function altTab(indexObj){

for (x=0;x<document.getElementsByName('ct').length;x++){

document.getElementsByName('ct')[x].style.display='none'}

for (x=0;x<document.getElementsByName('pt').length;x++){

document.getElementsByName('pt')[x].className='blured'}

document.getElementsByName('ct')[indexObj].style.display='block'

document.getElementsByName('pt')[indexObj].className='focused'}

function hoverClass(statusTab, indexTab){

if (document.getElementsByName('pt')[indexTab].className=="focused"){

return false}

else {document.getElementsByName('pt')[indexTab].className=statusTab}

}

</script>

<div id="ct">

AQUI ESTÁ O TEXTO DA ABA 1

</div>

<div id="ct">

AQUI ESTÁ O TEXTO DA ABA 2

</div>

<div id="ct">

AQUI ESTÁ O TEXTO DA ABA 3

</div>

<div id="ct">

AQUI ESTÁ O TEXTO DA ABA 4

</div>

Link para o comentário
Compartilhar em outros sites
  • 0
Lenne

Lenne

Postado
Postado

Olá muito bom este script parabéns! e obrigado pela ajuda!

Gostaria de lhe fazer uma pergunta.

Na folha de estilo existe está chamada: background-image: url(../imagens/telas/abaInativa.png);

so que você não disponibilisou a imagem. poderia no passar.

abraço e novamente obrigado!

Lenne

Folha de estilos que vai fazer a coisa acontecer.

estiloSistema.css

.abaativa {
    font-family: verdana;
    font-size: 10px;
    font-style: normal;
    line-height: normal;
    font-weight: bold;
    font-variant: normal;
    text-transform: capitalize;
    color: #FFFFFF;
    background-image: url(../imagens/telas/abaAtiva.png);
    background-color: #999999;
}

.abainativa {
    font-family: verdana;
    font-size: 10px;
    font-style: normal;
    line-height: normal;
    font-weight: bold;
    font-variant: normal;
    text-transform: capitalize;
    color: #FFFFFF;
    background-image: url(../imagens/telas/abaInativa.png);
    background-color: #666666;
}

Espero que gostem, precisando estamos ai para tirar as dúvidas.

Abraços

Link para o comentário
Compartilhar em outros sites
  • 0
Guest Fogaça

Guest Fogaça

Postado
Postado

Tenko !!!

Parabéns pelo trabalho ... Muito bom mesmo e até estou usando na minha Intranet.

Respeitados os seus créditos, fiz uma pequena modificaçãozinha no código (HTML), com a finalidade de tornar ele mais genérico, uma vez que vou utilizá-lo em aplicações diferentes. Veja como ficou e como pretendo utilizálo:

<html>
    <head>
        <title>    
             Desenvolvido por Tenko            
        </title>
        
        
        &lt;script>
        
        var aAbas       = new Array();  // Lista de abas do documento atual
        var sAbaAtiva   = ""                 // Define qual é a aba ativa no momento
        var ABA_ID      = 1
        var ABA_BLOCO   = 2
        var ABA_CAMPOS  = 3
        
        function defineAba( sId, sBloco ){
           var aAba  = new Array( ABA_CAMPOS );
           aAba[ ABA_ID    ]  = sId;
           aAba[ ABA_BLOCO ]  = sBloco;
           aAbas.push( aAba );
        }

        function defineAbaAtiva( sId ){
           trataCliqueAba( sId );
        }

        function trataMouseAba( oAba ){
           oAba.style.cursor  = "pointer";
        }

        function trataCliqueAba( sId ){
           for ( var iAba  = 0; iAba < aAbas.length; iAba++ ){
              var aAba  = aAbas[ iAba ];

              if   ( aAba[ ABA_ID ] == sId ) ativaAba( aAba );

              else                           inativaAba( aAba );
           }
        }

        function ativaAba( aAba ){
           var sAba       = aAba[ ABA_ID ];
           var oAba       = document.getElementById( sAba );
           mudaClasse( oAba, "abaativa" ); // Esse comando chama a classe css para fazer a troca

           var sBlocoAba  = aAba[ ABA_BLOCO ];
           var oBlocoAba  = document.getElementById( sBlocoAba );
           oBlocoAba.style.display  = "block";
        }

        function inativaAba( aAba ){
           var sAba       = aAba[ ABA_ID ];
           var oAba       = document.getElementById( sAba );
           mudaClasse( oAba, "abainativa" ); // Esse comando chama a classe css para fazer a troca

           var sBlocoAba  = aAba[ ABA_BLOCO ];
           var oBlocoAba  = document.getElementById( sBlocoAba );
           oBlocoAba.style.display  = "none";
        }
        
        function mudaClasse( oObjeto, sClasse ){
           oObjeto.className  = sClasse;
        }
        
        </script>
                
        
<link href="inc/estiloSistema.css" rel="stylesheet" type="text/css" />
        
    </head>
    
    <body bgcolor="#CCCCCC">
    
        
<table width="100%" border="0" cellpadding="3" cellspacing="1">
  <tr> 
    <td width="10%" height="0" align="center" valign="middle" class="abaativa" id="celAba01" onClick="trataCliqueAba( this.id );" onMouseOver="trataMouseAba( this );"> 
      Aba 1</td>
    <td id="celAba02" align="center" valign="middle" width="10%" class="abainativa" onMouseOver="trataMouseAba( this );" onClick="trataCliqueAba( this.id );"> 
      Aba 2</td>
    <td id="celAba03" align="center" valign="middle" width="10%" class="abainativa" onMouseOver="trataMouseAba( this );" onClick="trataCliqueAba( this.id );"> 
      Aba 3</td>
    <td id="celAba04" align="center" valign="middle" width="10%" class="abainativa" onMouseOver="trataMouseAba( this );" onClick="trataCliqueAba( this.id );"> 
      Aba 4
    <td id="celAba05" align="center" valign="middle" width="10%" class="abainativa" onMouseOver="trataMouseAba( this );" onClick="trataCliqueAba( this.id );"> 
      Aba 5
    <td id="celAba06" align="center" valign="middle" width="10%" class="abainativa" onMouseOver="trataMouseAba( this );" onClick="trataCliqueAba( this.id );"> 
      Aba 6</td>
  </tr>
  <tr> 
    <td height="0" colspan="7" align="center" valign="middle"><hr></td>
  </tr>
</table>
        
       
        <div id="div01" style="display: block">
        
            <table border="0" width="100%">
                <tr>
                    
      <td> Aba 01</td>
                </tr>
          </table>
        
        </div>
        
        <div id="div02" style="display: none">

            <table border="0" width="100%">
                <tr>
                    
      <td> Aba 02</td>
                </tr>
            </table>

        </div>
        
        <div id="div03" style="display: none">

            <table border="0" width="100%">
                <tr>
                    
      <td> Aba 03</td>
                </tr>
            </table>

        </div>
        
        <div id="div04" style="display: none">

            <table border="0" width="100%">
                <tr>
                    
      <td> Aba 04</td>
                </tr>
            </table>

        </div>
        
        <div id="div05" style="display: none">

            <table border="0" width="100%">
                <tr>
                    
      <td> Aba 05</td>
                </tr>
            </table>

        </div>
        
        <div id="div06" style="display: none">

            <table border="0" width="100%">
                <tr>
                    
      <td> Aba 06</td>
                </tr>
            </table>

        </div>
        
        &lt;script>
            defineAba( "celAba01" , "div01" );
            defineAba( "celAba02" , "div02" );
            defineAba( "celAba03" , "div03" );
            defineAba( "celAba04" , "div04" );
            defineAba( "celAba05" , "div05" );
            defineAba( "celAba06" , "div06" );
            defineAba( "celAba07" , "div07" );
            defineAbaAtiva( "celAba01" );
        </script>

    </body>
</html>

<-------------------------------------

Fogaça - Visitante

Polícia Militar do Paraná - Curitiba

alcinofogaca@gmail.com

-------------------------------------->

Link para o comentário
Compartilhar em outros sites
  • 0
Guest Visitante

Guest Visitante

Postado
Postado

Com as abas numeradas, eun facilito o meu trabalho no caso de ter que colocar uma ou mais abas dependendo do que a aplicação exige.

<-------------------------------------

Fogaça - Visitante

Polícia Militar do Paraná - Curitiba

alcinofogaca@gmail.com

-------------------------------------->

Link para o comentário
Compartilhar em outros sites
  • 0
Guest --felipee --

Guest --felipee --

Postado
Postado

Amigos,

so não sei o q isso significaria para os buscadores.

os correto seria cada pagina com um assunto. desta forma temos todos os assuntos numa mesmo pagina.

felipee.

Link para o comentário
Compartilhar em outros sites
  • 0
Eduardo Flavic

Eduardo Flavic

Postado
Postado

Ola, alguém sabe me ajudar como posso implementar uma form dentro de umas das abas(2textboxes e 1botao), mas ele devera ser livre do cod javascript. E ao executar o resultado matera na mm aba e não ir para a aba inicial.

Para manipular o evento textboxes e o botao sera em C#.

alguém pode m ajudar?

Link para o comentário
Compartilhar em outros sites

Participe da discussão

Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.

Visitante
Responder esta pergunta...

×   Você colou conteúdo com formatação.   Remover formatação

  Apenas 75 emoticons são permitidos.

×   Seu link foi incorporado automaticamente.   Exibir como um link em vez disso

×   Seu conteúdo anterior foi restaurado.   Limpar Editor

×   Você não pode colar imagens diretamente. Carregar ou inserir imagens do URL.

×
 Share
Ir para lista de Perguntas


  • Estatísticas dos Fóruns

    • Tópicos
      152,3k
    • Posts
      652,4k
×
×
  • Criar Novo...