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

Aba


Eduardo Flavic

Pergunta

Ola galera, encontrei um programinha html com javascript e css, as abas funcionam perfeitamente, então resolvi implementar algo a mais, em uma das abas exites agora um formulario, porem ao clicar no botao, ele executa o comando e volta para a aba inicia, o que deveria ser executar o comando permanecendo na aba atual.

alguém tem algum programinha assim?

Link para o comentário
Compartilhar em outros sites

9 respostass a esta questão

Posts Recomendados

  • 0

beleza Romerito, eu vou colocar o programinha aqi pra você entede-lo...

<script runat="server">

Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs)
TextBox1.Text = TextBox2.Text

End Sub
</script>

<html>
<head>
<title> Utilização de Abas - Javascript </title>
<style>

body, table {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #000000;
}

.menu {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: normal;
color: #000033;
background-color: #FFFFFF;
border-right: 1px solid #000000;
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
padding: 5px;
cursor: hand;
}

.menu-sel {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: bold;
color: #000033;
background-color: #CCCCCC;
border-right: 1px solid #000000;
border-top: 1px solid #000000;
padding: 5px;
cursor: hand;
}

.tb-conteudo {
border-right: 1px solid #000000;
border-bottom: 1px solid #000000;
}

.conteudo {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: normal;
color: #000033;
background-color: #CCCCCC;
padding: 5px;
width: 760px;
height: 460px;
}

</style>
<script language="JavaScript">

function stAba(menu, conteudo) {
this.menu = menu;
this.conteudo = conteudo;
}

var arAbas = new Array();
arAbas[0] = new stAba('td_cadastro', 'div_cadastro');
arAbas[1] = new stAba('td_consulta', 'div_consulta');
arAbas[2] = new stAba('td_manutencao', 'div_manutencao');

function AlternarAbas(menu, conteudo) {
for (i = 0; i < arAbas.length; i++) {
m = document.getElementById(arAbas[i].menu);
m.className = 'menu';
c = document.getElementById(arAbas[i].conteudo)
c.style.display = 'none';
}
m = document.getElementById(menu)
m.className = 'menu-sel';
c = document.getElementById(conteudo)
c.style.display = '';
}

</script>

</head>

<body onLoad="AlternarAbas('td_cadastro','div_cadastro')">

<form id="form1" runat="server">

<h2 align="center">Utilização de Abas - Javascript</h2>

<table width="760" height="480" cellspacing="0" cellpadding="0"
border="0" style="border-left: 1px solid #000000;">
<tr>
<td height="20" width="100" class="menu" id="td_cadastro"
onClick="AlternarAbas('td_cadastro','div_cadastro')">
Cadastro
</td>
<td height="20" width="100" class="menu" id="td_consulta"
onClick="AlternarAbas('td_consulta','div_consulta')">
Consulta
</td>
<td height="20" width="100" class="menu" id="td_manutencao"
onClick="AlternarAbas('td_manutencao','div_manutencao')">
Manutenção
</td>
<td width="460" style="border-bottom: 1px solid #000000">
&nbsp;
<td>
</tr>
<tr>
<td height="460" class="tb-conteudo" colspan="4">
<div id="div_cadastro" class="conteudo" style="display: none">
CADASTRO
</div>
<div id="div_consulta" class="conteudo" style="display: none">
CONSULTA
</div>
<div id="div_manutencao" class="conteudo" style="display: block">
MANUTENÇÃO
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
<asp:Button ID="Button1" runat="server" onclick="Button1_Click" Text="Button" />
</div>
</td>
</tr>
</table>
</form>
</body>
</html>[/codebox]

eu realmente estou no inicio, então ainda tenho dificuldades, mas se você puder me ajudar......desde já muito obrigado

Link para o comentário
Compartilhar em outros sites

  • 0

i aew carinha, bom tenta usar cookie, tipo assim, pega esse script de cookie:

cookie.js

cookie = {
                set : function( name , val , dias ){
                    var data = new Date();
                    if ( !dias ) dias = 1000;
                    data.setTime( data.getTime() + ( 86400 * dias ) );
                    document.cookie = name + "=" + val + "; expires=" + data.toGMTString() + "; path=/";
                } ,
                
                get : function( name ){
                    try {
                        var cookies = document.cookie.split( name + "=" );
                        var c = cookies[1].split( ";" );
                        return c[0];
                    }
                    catch( exc ){ return false; }
                } ,
                
                unset : function( name ){
                    this.set( name , "" , -1 );
                }
            }
e depois deixe seu script assim:
<script language="javascript">

    var arAbas = new Array();
    arAbas[0] = new stAba('td_cadastro', 'div_cadastro');
    arAbas[1] = new stAba('td_consulta', 'div_consulta');
    arAbas[2] = new stAba('td_manutencao', 'div_manutencao');

    function stAba( menu , conteudo )
    {
        cookie.set( 'abaSelecionada' , conteudo.replace( /^.*_/ , '' ) );
        this.menu = menu;
        this.conteudo = conteudo;
    }

    function AlternarAbas( menu , conteudo )
    {
        for (i = 0; i < arAbas.length; i++) 
        {
            m = document.getElementById(arAbas[i].menu);
            m.className = 'menu';
            c = document.getElementById(arAbas[i].conteudo)
            c.style.display = 'none';
        }
        
        m = document.getElementById(menu)
        m.className = 'menu-sel';
        c = document.getElementById(conteudo)
        c.style.display = '';
    }

window.onload = function(){
    var strAba = cookie.get( 'abaSelecionada' );
    
    if ( strAba )
        AlternarAbas( 'td_' + strAba , 'div_' + strAba );
    else
        AlternarAbas( 'td_cadastro' , 'div_cadastro' );
    
}

</script>

espero que ajude abraço!

Link para o comentário
Compartilhar em outros sites

  • 0

acho q não precisa de cookies...

no clique do botao você so quer trocar o texto do textbox1 pelo do textbox2?? se for esse o caso, então você deveria usar uma funcao javascript pra fazer isso, e não o codigo asp.net q você esta usando. porque senao, ele vai ter q postar a pagina.

Link para o comentário
Compartilhar em outros sites

  • 0

então, eu so qria mm q exista um form dentro de uma das abas so mm para ter uma ideia de como funciona, porem m apareceu esse problema porque ao executar o comando em q um textbox envia dados para o outro esta trocando de aba o que não deveria acontecer. Deveria executar somento o comando e quando eu decidir trocar de aba iria apenas clicar em outra aba.

Link para o comentário
Compartilhar em outros sites

  • 0

não é q ele troca de aba. quando você clica no botao, ele posta a pagina ne. ai quando a pagina é postada ele carrega tudo de novo como se tivesse chegado nela agora. so preserva os dados pros objetos com viewstate habilitados (o q não da pra fazer com suas tabs, pois estao escritas em codigo html e não com objetos do asp.net).

se você não quer q a pagina seja postada, você usa java script:

<div id="div_manutencao" class="conteudo" style="display: block">
MANUTENÇÃO
    <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
    <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
    <input type="button" value="Button" onclick="document.getElementById('TextBox1').value = document.getElementById('TextBox2').value;" />
</div>[/code]

se você quer q a pagina seja postada, mas depois de carregada de novo, q a aba selecionada seja a da formulario, você poderia, naquela sua sub Button1_Click(), escrever algum codigo pra q seja selecionada a tab onde esta o formulario.

se não me engano acho q tem um objeto asp:Literal ou coisa assim, q você poderia usar pra escrever seu codigo javascript na pagina.

Editado por kuroi
Link para o comentário
Compartilhar em outros sites

  • 0

Boa tarde,

Bom, como havia dito que uma nova dúvida surgira....

Possui um codigo em html/asp, mas agora a duvida é a seguinte:

preciso me conectar com um BD para fazer o login

A conexão esta em .net C#(já foi testada em outro programa.Funciona). Mas no nesta web não esta funcionando, quando eu clico em Login, ele deveria exibir uma mensagem de "Bem Vindo....", mas ao invés disso ele volta na aba inicial( o mm q estava ocorrendo com um outro exemplo) e não conecta.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title>My First Page</title>

<style>

body, table {

font-family: Verdana, Arial, Helvetica, sans-serif;

font-size: 10px;

color: #000000;

}

.menu {

font-family: Verdana, Arial, Helvetica, sans-serif;

font-size: 10px;

font-weight: normal;

color: #000000;

background-color: #7fff00;

border-right: 1px solid #000099;

border-top: 1px solid #000099;

border-bottom: 1px solid #000099;

padding: 5px;

cursor: hand;

}

.menu-sel {

font-family: Verdana, Arial, Helvetica, sans-serif;

font-size: 10px;

font-weight: bold;

color: #000000;

background-color: #D8BFD8;

border-right: 1px solid #000099;

border-top: 1px solid #000099;

padding: 5px;

cursor: hand;

}

.tb-conteudo {

border-right: 1px solid #000099;

border-bottom: 1px solid #000099;

}

.conteudo {

font-family: Verdana, Arial, Helvetica, sans-serif;

font-size: 10px;

font-weight: normal;

color: #000000;

background-color: #D8BFD8;

padding: 5px;

width: 760px;

height: 460px;

}

#Button1

{

height: 27px;

}

.style1

{

width: 100%;

}

</style>

<script language="JavaScript">

function stAba(menu,conteudo)

{

this.menu = menu;

this.conteudo = conteudo;

}

var arAbas = new Array();

arAbas[0] = new stAba('td_cadastro','div_cadastro');

arAbas[1] = new stAba('td_consulta','div_consulta');

arAbas[2] = new stAba('td_manutencao','div_manutencao');

function AlternarAbas(menu,conteudo)

{

for (i=0;i<arAbas.length;i++)

{

m = document.getElementById(arAbas.menu);

m.className = 'menu';

c = document.getElementById(arAbas.conteudo)

c.style.display = 'none';

}

m = document.getElementById(menu)

m.className = 'menu-sel';

c = document.getElementById(conteudo)

c.style.display = '';

}

function Button1_onclick() {

}

</script>

</head>

<body onLoad="AlternarAbas('td_cadastro','div_cadastro')">

<form id="form1" runat="server">

<h2 align="center">Utilização de Abas - Javascript</h2>

<table width="760" height="480" cellspacing="0" cellpadding="0"

border="0" style="border-left: 1px solid #000000;">

<tr>

<td height="20" width="100" class="menu" id="td_cadastro"

onClick="AlternarAbas('td_cadastro','div_cadastro')">

Cadastro

</td>

<td height="20" width="100" class="menu" id="td_consulta"

onClick="AlternarAbas('td_consulta','div_consulta')">

Consulta

</td>

<td height="20" width="100" class="menu" id="td_manutencao"

onClick="AlternarAbas('td_manutencao','div_manutencao')">

Login

</td>

<td width="460" style="border-bottom: 1px solid #000000">

&nbsp;

<td>

</tr>

<tr>

<td height="460" class="tb-conteudo" colspan="4">

<div id="div_cadastro" class="conteudo" style="display: none">

CADASTRO

</div>

<div id="div_consulta" class="conteudo" style="display: none">

CONSULTA

</div>

<div id="div_manutencao" class="conteudo" style="display: block">

<table class="style1">

<tr>

<td>

<asp:Label ID="Label1" runat="server" Text="Usuario"></asp:Label>

:<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>

</td>

</tr>

<tr>

<td>

<asp:Label ID="Label2" runat="server" Text="Senha"></asp:Label>

&nbsp;:

<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>

</td>

</tr>

<tr>

<td>

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;<asp:Button

ID="Button1" runat="server" Text="Login" />

</td>

</tr>

</table>

</div>

</td>

</tr>

</table>

</form>

</body>

</html>

Se alguém puder me ajudar estarei eternamente agradecido

Editado por Eduardo Flavic
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.



  • Estatísticas dos Fóruns

    • Tópicos
      152k
    • Posts
      651,8k
×
×
  • Criar Novo...