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

JavaScript - Montando ABA.

IBIMON

Perguntado por IBIMON,

 Share

Pergunta

IBIMON

IBIMON

Postado
Postado (editado)

Veja como montar uma aba com poucos recursos de java script:

É muito simples usar formas de CSS para controlar cores em uma JSP, vamos mostrar uma forma simples e que atende a sistemas pequenos ou, ate mesmo pequenos sites que usam JavaScript, CSS e JSP. Aqui estou utilizando tudo em uma pagina, mas se achar melhor pode usar em arquivos separados, e apenas setar onde eles estão dento do JSP;

Usamos o CSS para controlar cor, fonte, localização etc.

<style>
.TabChecked {
border-top:1px solid #A0A0A0;
border-left:0px solid #A0A0A0;
border-right:1px solid #A0A0A0;
border-bottom:1px solid #FFFFFF;
background-color: aqua;
padding-bottom: 05px;
text-align: center;
color:#0000FF;
font-weight: bold;
font-size: 12px;
cursor:pointer;
width: 15%;
}

.TabUnChecked {
border-top:1px solid #A0A0A0;
border-left:1px solid #A0A0A0;
border-right:1px solid #A0A0A0;
border-bottom:1px solid #A0A0A0;
background-color: white;
padding-bottom: 05px;
text-align: center;
color:#000000;
font-weight: bold;
font-size: 12;
cursor:pointer;
width: 15%;
}


.linha{
background-color: #000000;
background-repeat: repeat-x;
background-color: '|';
border-top:0px solid #A0A0A0;
border-left:0px solid #A0A0A0;
border-right:0px solid #A0A0A0;
border-bottom:1px solid #A0A0A0;
padding-bottom: 05px;
text-align: center;
color:#0000FF;
font-weight: bold;
font-size: 12px;
cursor:default;
width: 70%;
}
</style>
• Sendo usado com bastante praticidade Após montar o CSS, vamos mostrar a parte de JavaScript que usaremos para controlar duas abas, sem muito incremento: 
<script>
/**
*
* @param {Object} id
*/
function selecionarAba(id){
if(!id){
id = "aba1";
}
switch (id) {
case "aba1":
mostrarAbaDadosPessoais(true);
mostrarAbaEndereco(false);
break;
case "aba2":
mostrarAbaDadosPessoais(false);
mostrarAbaEndereco(true);
break;
default:
alert("Aba " + id + " inexistente.");
}
}

/**
*
* @param {Object} mostrar
*/
function mostrarAbaDadosPessoais(mostrar) {
var idAba1         = document.getElementById("aba1");
var divAba1     = document.getElementById("abaDadosPessoais");

if (mostrar) {
idAba1.className = "TabChecked";
divAba1.style.display = "";
montarCor();
} else {
idAba1.className = "TabUnChecked";
divAba1.style.display = "none";
}
}

/**
*
* @param {Object} mostrar
*/
function mostrarAbaEndereco(mostrar) {
var idAba2    = document.getElementById("aba2");
var divAba2   = document.getElementById("abaEnderecos");

if (mostrar) {
idAba2.className = "TabChecked";
divAba2.style.display = "";
montarCorEnde();
} else {
idAba2.className = "TabUnChecked";
divAba2.style.display = "none";
}
}

function montarCor(){
var valor;
var colorVariavel = new Array("cyan", "yellow", "green", "red");
for(i = 1; i < 5; i++){
valor = document.getElementById(i);
valor.innerHTML = '';
valor.innerHTML += '<table border=1 style="background-color:Yellow;" width=20% width=50%><tr><td width=10% style=background-color:'+colorVariavel[i-1]+';  border-bottom:15px solid #000000; > Ibimon '+i+' </td></tr></table>';
}
}

function montarCorEnde(){
var valor;
var colorVariavel = new Array("yellow", "green", "cyan", "red");
var cor1 = "#CCCCCC";
var cor2 = "#FFFFFF";
for(i = 5; i < 9; i++){
valor = document.getElementById(i);
valor.innerHTML = '';
valor.innerHTML += '<table border=1 style="background-color:WHITE;" width=20% width=50%><tr><td  onmouseover=java script:um(this); onmouseout=java script:dois(this);  width=10% style=background-color:'+colorVariavel[i-5]+';  border-bottom:15px solid #000000; > Ibimon '+i+' </td></tr></table>';
}

}


function um(src) {
src.bgColor='#CCCCCC';
src.style.cursor="hand";
}
function dois(src) {
src.bgColor='#FFFFFF';
src.style.cursor="default";
}

</script>
• JSP usado para mostrar a Aba no browser: 
<body  onload="java script:selecionarAba('aba1'); ">
<table width=100% cellpadding=0 cellspacing=0>
<tr>
<td class="TabChecked" id="aba1" onclick="java script:selecionarAba(this.id);">Dados Pessoais</td>
<td class="TabUnChecked" id="aba2" onclick="java script:selecionarAba(this.id);">Endereço</td>
<td class="linha">-</td>
</tr>
</table>

</br>

<div id="abaDadosPessoais">
<div id=1></div>
<div id=2></div>
<div id=3></div>
<div id=4></div>
</div>

<div id="abaEnderecos" style="display: none;">
<div id=5></div>
<div id=6></div>
<div id=7></div>
<div id=8></div>
</div>
</body >
• Código Completo: 
<!-- 
Exemploto de uma aba simples com JavaScript, Div, e CSS (Já tem um exemplo parecido não utilizando CSS para controlar Cores....
    
-->
<html>
<head>
    <style>
        .TabChecked {
            border-top:1px solid #A0A0A0;
            border-left:0px solid #A0A0A0;
            border-right:1px solid #A0A0A0;
            border-bottom:1px solid #FFFFFF;
            background-color: aqua;
            padding-bottom: 05px;
            text-align: center;
            color:#0000FF;
            font-weight: bold;
            font-size: 12px;
            cursor:pointer;
            width: 15%;
        }
        
        .TabUnChecked {
            border-top:1px solid #A0A0A0;
            border-left:1px solid #A0A0A0;
            border-right:1px solid #A0A0A0;
            border-bottom:1px solid #A0A0A0;
            background-color: white;
            padding-bottom: 05px;
            text-align: center;
            color:#000000;
            font-weight: bold;
            font-size: 12;
            cursor:pointer;
            width: 15%;
        }


        .linha{
            background-color: #000000;
            background-repeat: repeat-x;
            background-color: '|';
            border-top:0px solid #A0A0A0;
            border-left:0px solid #A0A0A0;
            border-right:0px solid #A0A0A0;
            border-bottom:1px solid #A0A0A0;
            padding-bottom: 05px;
            text-align: center;
            color:#0000FF;
            font-weight: bold;
            font-size: 12px;
            cursor:default;
            width: 70%;
        }
    </style>
    
    &lt;script>
/**
 * 
 * @param {Object} id
 */
            function selecionarAba(id){
                if(!id){
                    id = "aba1";        
                }
                switch (id) {
                    case "aba1":
                        mostrarAbaDadosPessoais(true);
                        mostrarAbaEndereco(false);
                        break;
                    case "aba2":
                        mostrarAbaDadosPessoais(false);
                        mostrarAbaEndereco(true);
                        break;
                    default:
                        alert("Aba " + id + " inexistente.");
                }
            }

/**
 * 
 * @param {Object} mostrar
 */
            function mostrarAbaDadosPessoais(mostrar) {
                var idAba1         = document.getElementById("aba1");
                var divAba1     = document.getElementById("abaDadosPessoais");
                
                if (mostrar) {
                    idAba1.className = "TabChecked";
                    divAba1.style.display = "";
                    montarCor();
                } else {
                    idAba1.className = "TabUnChecked";
                    divAba1.style.display = "none";
                }
            }

/**
 * 
 * @param {Object} mostrar
 */
            function mostrarAbaEndereco(mostrar) {
                var idAba2    = document.getElementById("aba2");
                var divAba2   = document.getElementById("abaEnderecos");
                
                if (mostrar) {
                    idAba2.className = "TabChecked";
                    divAba2.style.display = "";
                    montarCorEnde();
                } else {
                    idAba2.className = "TabUnChecked";
                    divAba2.style.display = "none";
                }
            }
            
            function montarCor(){
                var valor;
                var colorVariavel = new Array("cyan", "yellow", "green", "red");
                for(i = 1; i < 5; i++){
                    valor = document.getElementById(i);
                    valor.innerHTML = '';
                    valor.innerHTML += '<table border=1 style="background-color:Yellow;" width=20% width=50%><tr><td width=10% style=background-color:'+colorVariavel[i-1]+';  border-bottom:15px solid #000000; > Ibimon '+i+' </td></tr></table>';
                }
            }
            
            function montarCorEnde(){
                var valor;
                var colorVariavel = new Array("yellow", "green", "cyan", "red");
                var cor1 = "#CCCCCC";
                var cor2 = "#FFFFFF";
                for(i = 5; i < 9; i++){
                    valor = document.getElementById(i);
                    valor.innerHTML = '';
                    valor.innerHTML += '<table border=1 style="background-color:WHITE;" width=20% width=50%><tr><td  onmouseover=java script:um(this); onmouseout=java script:dois(this);  width=10% style=background-color:'+colorVariavel[i-5]+';  border-bottom:15px solid #000000; > Ibimon '+i+' </td></tr></table>';
                }
                    
            }
            
            
        function um(src) { 
        src.bgColor='#CCCCCC';
        src.style.cursor="hand"; 
        } 
        function dois(src) { 
            src.bgColor='#FFFFFF';
            src.style.cursor="default"; 
        } 

    </script>
</head>
    <body  onload="java script:selecionarAba('aba1'); ">
        <table width=100% cellpadding=0 cellspacing=0>
            <tr>
                <td class="TabChecked" id="aba1" onclick="java script:selecionarAba(this.id);">Dados Pessoais</td>
                <td class="TabUnChecked" id="aba2" onclick="java script:selecionarAba(this.id);">Endereço</td>    
                <td class="linha">-</td>
            </tr>
        </table>
        
        </br>
        
        <div id="abaDadosPessoais">
            <div id=1></div>
            <div id=2></div>
            <div id=3></div>
            <div id=4></div>
        </div>

        <div id="abaEnderecos" style="display: none;">
            <div id=5></div>
            <div id=6></div>
            <div id=7></div>
            <div id=8></div>
        </div>
    </body >
</html>

Editado por andreia_sp
Utilize tag para código, facilita a visualização. Andreia_Sp
Link para o comentário
Compartilhar em outros sites

0 respostass a esta questão

Posts Recomendados

Até agora não há respostas para essa pergunta

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,1k
    • Posts
      652k
×
×
  • Criar Novo...