Aba

Eduardo Flavic · Setembro 9, 2010

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?

Romerito · Setembro 9, 2010

i aew Eduardo Flavic, bom tem esse aqui:

http://jqueryui.com/demos/tabs/

espero que ajude, abraço!

Eduardo Flavic · Setembro 10, 2010

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

Romerito · Setembro 10, 2010

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!

Eduardo Flavic · Setembro 11, 2010

fala ae amigo,

cara ainda não funcionou, você implementou e funcionou? talves eu coloquei o cookie em algum lugar errado...

Eduardo Flavic · Setembro 11, 2010

se fera, entendi o que me postou, deu certo, mas quando sai da aba não consigo retornar ou ir a nehuma aba.

kuroi · Setembro 11, 2010

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.

Eduardo Flavic · Setembro 11, 2010

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.

kuroi · Setembro 12, 2010

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 Setembro 12, 2010 por kuroi

Eduardo Flavic · Setembro 12, 2010

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">

<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>

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">

 

<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>

 :

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

</td>

</tr>

<tr>

<td>

            <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 Dezembro 16, 2010 por Eduardo Flavic

Entrar

Aba

Pergunta

Eduardo Flavic

Link para o comentário

Compartilhar em outros sites

9 respostass a esta questão

Posts Recomendados

Romerito

Link para o comentário

Compartilhar em outros sites

Eduardo Flavic

Link para o comentário

Compartilhar em outros sites

Romerito

Link para o comentário

Compartilhar em outros sites

Eduardo Flavic

Link para o comentário

Compartilhar em outros sites

Eduardo Flavic

Link para o comentário

Compartilhar em outros sites

kuroi

Link para o comentário

Compartilhar em outros sites

Eduardo Flavic

Link para o comentário

Compartilhar em outros sites

kuroi

Link para o comentário

Compartilhar em outros sites

Eduardo Flavic

Link para o comentário

Compartilhar em outros sites

Participe da discussão

Estatísticas dos Fóruns

Navegação

Atividades