IBIMON
-
Total de itens
3 -
Registro em
-
Última visita
Tudo que IBIMON postou
-
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> <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>
-
[resolvido] Posicionamento De Div
pergunta respondeu ao Norivan Oliveira de IBIMON em Ajax, JavaScript, XML, DOM
Coloca o Codigo para ter uma ideia melhor... Paz do Senhor -
Barra De Rolagem De Baixo Para Cima
pergunta respondeu ao foxbh de IBIMON em Ajax, JavaScript, XML, DOM
Boa Tarde, Não sei bem se é iss o que esta precisando mais esta ai: <div align="center" style = " height:330; width:90%; overflow-y:scroll ;position:static ; border:1px solid Black;" > Se não for assim me desculpar, ou então não entendi muito bom o que precisa.... Paz do Senhor!