Jump to content
Fórum Script Brasil
  • 0

JavaScript - Montando ABA.


IBIMON

Question

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>

Edited by andreia_sp
Utilize tag para código, facilita a visualização. Andreia_Sp
Link to comment
Share on other sites

0 answers to this question

Recommended Posts

There have been no answers to this question yet

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.



  • Forum Statistics

    • Total Topics
      152k
    • Total Posts
      651.6k
×
×
  • Create New...