locked
Efeitos ao dar visible no div RRS feed

  • Pergunta

  • Senhores uso vs2008 vb.

    Mostro as msgs do sistema através de um div, ou seja, quando tem uma msg, dou visible true para o div e depois o usuária fecha, gostaria de colocar um efeito ao abrir e fechar, acredito que tenha que ser via jquery ou ajax, tenho no projeto referencia para jquery-1[1].3.2.min.js e AjaxControlToolkit, por exemplo como fazer um efeito slide ao dar visible true no div?
    t+

    quarta-feira, 3 de março de 2010 19:55

Todas as Respostas

  • Bom dia, DET1

    Segue alguns exemplos para você em Jquery.

    <!DOCTYPE html>
    <html>
    <head>
      <link type="text/css" href="http://jqueryui.com/latest/themes/base/jquery.ui.all.css" rel="stylesheet" />
      <script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.4.2.js"></script>
      <script src="http://ui.jquery.com/latest/ui/effects.core.js"></script>
    <script src="http://ui.jquery.com/latest/ui/effects.explode.js"></script>
    <style type="text/css">
      div { margin: 0 auto; width: 100px; height: 80px; background: blue; position: relative; }
    </style>
      <script type="text/javascript">
      $(document).ready(function(){
        $("p").click(function () {
          $("div").effect("explode");
        });
      });
      </script>
    </head>
    <body style="font-size:62.5%;">
      
    <p>Click me</p><div></div>
    
    </body>
    </html>
    



    http://www.java2s.com/Code/JavaScript/jQuery/jQueryUIEffectsExplode.htm

    http://docs.jquery.com/UI/Effects/effect#option-effect

    Américo Arvani MCP/MCTS - WEB Se ajudou , marque como resposta.
    • Sugerido como Resposta Américo Arvani quinta-feira, 4 de março de 2010 11:39
    quinta-feira, 4 de março de 2010 11:38
  • obrigado pelo retorno
    vc saberia dizer como chamar a função via code behind?

    Pois no meu caso estou fazendo assim

    If Len(vsRetorno) > 0 Then
             FormsAuthentication.RedirectFromLoginPage(txtUsuario.Text, False)
    Else
         fgMsg(Me.Page, "", "Acesso Negado!", "aviso")
          Master.FindControl("divMsg").Visible = True
          Dim voLb As Label = Master.FindControl("lblMsg")
          voLb.Text = fMsg
          If UCase(fTipo) = "ERRO" Then
                Dim voI As Image = Master.FindControl("iMsg")
                voI.ImageUrl = "~/Imagens/erro.png"
            End If
    End If
    segunda-feira, 8 de março de 2010 21:07
  • Bom dia, Det1
    Então, você deve adicionar o efeito no click do seu botão por exemplo:

    <link type="text/css" href="base/jquery.ui.all.css" rel="stylesheet" />    
    <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
    <script type="text/javascript" src="ui/jquery.effects.core.js"></script>
    <script type="text/javascript" src="ui/jquery.effects.slide.js"></script>
    
    <script type="text/javascript">
        $(document).ready(function() {
        $("#Button1").click(function() {
                $("#div2").effect("slide");
            });
        });
    
        
      </script>
    

    e

    <asp:Button ID="Button1" runat="server" Text="Button" OnClick="botaoclick"   />
        
    <div runat="server" id="div2" visible="false" >
     TESTE
        
    </div>

    Américo Arvani MCP/MCTS - WEB Se ajudou , marque como resposta.
    • Sugerido como Resposta Américo Arvani terça-feira, 9 de março de 2010 12:32
    terça-feira, 9 de março de 2010 12:32
  • O problema é que se eu colocar no click, para todo click ele vai abrir, mas no caso é uma condicional se houver erro é para abrir o div.
    Ex. 

        Protected Sub btnEntrar_Click(ByVal sender As Object, ByVal e As EventArgs) Handles btnEntrar.Click
    .......
                vsRetorno = vcAce.Ace_Busca_Usuario(vsSc, txtUsuario.Text.Trim, txtSenha.Text.Trim)
                If Len(vsRetorno) > 0 Then
                    FormsAuthentication.RedirectFromLoginPage(txtUsuario.Text, False)
                Else
                    habilita o div aqui.....
                End If
            Catch ex As Exception
                habilita o div aqui.....
            Finally
                vcAce = Nothing
            End Try
        End Sub


     
    terça-feira, 9 de março de 2010 18:42
  • Partial Class Default
        Inherits System.Web.UI.Page
    
        Protected Sub form1_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles form1.Load
            div2.Visible = False
        End Sub
    
        Protected Sub btnEntrar_Click(ByVal sender As Object, ByVal e As EventArgs) Handles btnEntrar.Click
            Try
                If Len(vsRetorno) > 0 Then
                    FormsAuthentication.RedirectFromLoginPage(txtUsuario.Text, False)
                Else
                    div2.Visible = True
                End If
            Catch ex As Exception
                div2.Visible = True
            Finally
                vcAce = Nothing
            End Try
        End Sub
    
    
    End Class
    

    Ele vai verificar se der erro mosta o DIV com efeito , caso não ele redirecioa para outra página e nem mostra o div , não é isso que você quer?

    Américo Arvani MCP/MCTS - WEB Se ajudou , marque como resposta.
    terça-feira, 9 de março de 2010 19:49
  • Como estou usando a biblioteca jquery-1[1].3.2.min.js, usei o efeito .slideDown("slow").

    Funcionou em uma pagina de teste sem mp...vamos agora aos detalhes, ai veja se pode me ajudar..

    Meu projeto usa um MaterPage, na mp faço a referência ao jq e script assim :

    <head runat="server">
        <title></title>
        <script src="../ScriptsJQ/jquery-1[1].3.2.min.js" type="text/javascript"></script> 
        <script src="../JS.js" type="text/javascript"></script>
        <link href="../EstiloJH.css" rel="stylesheet" type="text/css" />         
        <asp:ContentPlaceHolder ID="head" runat="server">
        </asp:ContentPlaceHolder>
        <script type="text/javascript">
            $(document.divMsg).click(function() {
                $("#divMsg").slideDown("slow");
            });
        </script>
    </head>

    Abaixo segue a estrutura da mp..

    <body>
        <form id="form1" runat="server">
             <asp:ScriptManager ID="ScriptManager1" runat="server">
             </asp:ScriptManager>
             <div id="base">  
                <div id="cabecalho">
                    
                    <table style="width:100%;" id="tblCabecalhoTopo">
                        <tr>
                            <td>
                    <asp:Label ID="lblData" runat="server" Text="segunda feira 01/01/2005" 
                                    CssClass="escrevebranco"></asp:Label>
                            </td>
                            <td>
                    <asp:Label ID="lblUsuario" runat="server" Text="Usuario X" CssClass="escrevebranco"></asp:Label>
                            </td>
                            <td>
                                <asp:LinkButton ID="lbSair" runat="server" CssClass="sair" Height="20px" 
                                    ToolTip="Sair do Sistema" Width="20px"></asp:LinkButton>
                            </td>
                        </tr>
                    </table>
                </div>       
                <div id ="cabecalhologo"> 
                    <div id="divlicenciadotudo" runat ="server" >
                     <div id="divlicenciado">
                        <asp:Label ID="lblLicenciado" runat="server" Text="Licenciado para o cliente: " 
                             Visible="False"></asp:Label>
                    </div> 
                    <br />
                    <div id="divImgCliente" >
                    <br/>
                    </div>
                    </div>
                </div>
                <div id ="cabecalhomenu">         
                    <ul id="itemmenu" runat="server">
                        <li><a href=""><span>Arquivo</span></a></li>
                        <li><a href=""><span>Ajuda</span></a></li>
                        <li><a href=""><span>Log</span></a></li>
                     </ul>                          
                </div>
                <div id="divMsg" runat="server">
                    
                    <div id="divMsgE" align="center">
                    Mensagem <br />
                        <asp:Image ID="iMsg" runat="server" 
                            ImageUrl="~/Imagens/aviso.png" />
                    </div>
                    <div id="divMsgC">
                        <asp:Label ID="lblMsg" runat="server" Text="Label"></asp:Label>
                    </div>
                    <div id="divMsgD">
                                <asp:LinkButton ID="lbFechar" runat="server" CssClass="fechar" Height="30px" 
                                    ToolTip="Fechar msg" Width="30px"></asp:LinkButton>
                    </div>

                </div>
                <div id="divfaixa" runat="server"> 
                   <div id="faixaesquerda">
                        <asp:Label ID="lblModulo" runat="server" Text="Nome do Módulo"></asp:Label>
                    </div>
                    <div id="faixadireita">
                        <asp:Label ID="lblForm" runat="server" Text="Admissão Paciente"></asp:Label>
                    </div>
                </div>
                <div id="principal"> 
                     <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">

                     </asp:ContentPlaceHolder>
                </div>
                <div id="rodape"> 
                    <asp:Label ID="lblRodape" runat="server" Text="Label"></asp:Label>
                </div>
            </div>
        </form>
    </body>

    Uma das divisões é a divMsg onde a msg deve sair com o tal efeito JQ...
    Quando gero o erro, não esta saindo o efeito, apenas pisca a tela e a divMsg vem visible = true..

    Obs. estou gerando o erro em uma  pagina que herda a MP..la esta o botão que o codigo que ja poste, mas segue novamente que tem mais uma informação

        Protected Sub btnEntrar_Click(ByVal sender As Object, ByVal e As EventArgs) Handles btnEntrar.Click
            Try
                vsRetorno = vcAce.Ace_Busca_Usuario(vsSc, txtUsuario.Text.Trim, txtSenha.Text.Trim)
                If Len(vsRetorno) > 0 Then
                    FormsAuthentication.RedirectFromLoginPage(txtUsuario.Text, False)
                Else
                    lblAviso.Text = "Senha/Usuário inválidos... tente novamente..."
                    fgMsg(Me.Page, "", "Acesso Negado!", "aviso")
                End If
            Catch ex As Exception
                fgMsg(Me.Page, "Ao logar", ex.Message, "erro")
            Finally
                vcAce = Nothing
            End Try
        End Sub
     
    mando para uma função no modulo e código é esse:

        Public Sub fgMsg(ByVal fPagina As Page, ByVal fLocal As String, ByVal fMsg As String, ByVal fTipo As String)
            fPagina.Master.FindControl("divMsg").Visible = True
            Dim voLb As Label = fPagina.Master.FindControl("lblMsg")
            voLb.Text = fMsg
        End Sub

    Espero que tinha ficado claro. 
    A intenção é implementar ajax para evitar as piscada, mas é próximo passo.


    Onde esta o problema?
    Obrigado e t+
    terça-feira, 9 de março de 2010 23:13
  • Olá,

    JQUERY

    <script type="text/javascript">
    
        function teste()
        {
            $(document).ready(function() {
                $('.divOne').slideDown(5000).delay(1000);
            });
        }
      
        </script>     
    

    CODIGO VBNET

    Try
                vsRetorno = vcAce.Ace_Busca_Usuario(vsSc, txtUsuario.Text.Trim, txtSenha.Text.Trim)
                If Len(vsRetorno) > 0 Then
                    FormsAuthentication.RedirectFromLoginPage(txtUsuario.Text, False)
                Else
                    lblAviso.Text = "Senha/Usuário inválidos... tente novamente..."
    
                    Me.Page.ClientScript.RegisterStartupScript(Me.GetType(), "startup", "teste();", True)
    
                    fgMsg(Me.Page, "", "Acesso Negado!", "aviso")
                End If
            Catch ex As Exception
                Me.Page.ClientScript.RegisterStartupScript(Me.GetType(), "startup", "teste();", True)
                fgMsg(Me.Page, "Ao logar", ex.Message, "erro")
            Finally
                vcAce = Nothing
            End Try
    HTML

    <div id="divMsg" runat="server"  
                     style="background-color: #808000; display:none  "   class="divOne"> 
                    
                    <div id="divMsgE" align="center">
                    Mensagem <br />
                        <asp:Image ID="iMsg" runat="server" 
                            ImageUrl="~/Imagens/aviso.png" />
                    </div>
                    <div id="divMsgC">
                        <asp:Label ID="lblMsg" runat="server" Text="Label"></asp:Label>
                    </div>
                    <div id="divMsgD">
                                <asp:LinkButton ID="lbFechar" runat="server" CssClass="fechar" Height="30px" 
                                    ToolTip="Fechar msg" Width="30px"></asp:LinkButton>
                    </div>
    
                </div>

    Américo Arvani MCP/MCTS - WEB Se ajudou , marque como resposta.
    quarta-feira, 10 de março de 2010 15:33
  • A piscada permanece e não aparece o efeito....vou criar um novo projeto para fazer testes.
    valeu....
    quinta-feira, 11 de março de 2010 19:09
  • Olá, DET
    A forma que eu fiz foi de arcodo com que você me disse que sua aplicação está rodando, e aqui está funcionando.
    Vamos fazer um teste crie uma nova pagina master , com um content para logon de usuario e copie o código que eu desenvolvi.

    Pagina Master

    <%@ Master Language="VB" CodeFile="MasterPage.master.vb" Inherits="MasterPage" %>
    
    <!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 id="Head1" runat="server">
        <title></title>
      <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
        <%--<script type="text/javascript" src="ui/jquery.effects.core.js"></script>
        <script type="text/javascript" src="ui/jquery.effects.slide.js"></script>
    --%>
        <script  type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript">
    
        function teste()
        {
            $(document).ready(function() {
                $('.divOne').slideDown(5000).delay(1000);
            });
        }
      
        </script>     
     
           
                
        <asp:ContentPlaceHolder ID="head" runat="server">
        </asp:ContentPlaceHolder>
       
        
        
    </head>
    
    
    Abaixo segue a estrutura da mp..
    
    
    <body>
        <form id="form1" runat="server">
        
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        
      
        
             <div id="base">  
                <div id="cabecalho">
                    
                    <table style="width:100%;" id="tblCabecalhoTopo">
                        <tr>
                            <td>
                    <asp:Label ID="lblData" runat="server" Text="segunda feira 01/01/2005" 
                                    CssClass="escrevebranco"></asp:Label>
                            </td>
                            <td>
                    <asp:Label ID="lblUsuario" runat="server" Text="Usuario X" CssClass="escrevebranco"></asp:Label>
                            </td>
                            <td>
                                <asp:LinkButton ID="lbSair" runat="server" CssClass="sair" Height="20px" 
                                    ToolTip="Sair do Sistema" Width="20px"></asp:LinkButton>
                            </td>
                        </tr>
                    </table>
                </div>       
                <div id ="cabecalhologo"> 
                    <div id="divlicenciadotudo" runat ="server" >
                     <div id="divlicenciado">
                        <asp:Label ID="lblLicenciado" runat="server" Text="Licenciado para o cliente: " 
                             Visible="False"></asp:Label>
                    </div> 
                    <br />
                    <div id="divImgCliente" >
                    <br/>
                    </div>
                    </div>
                </div>
                <div id ="cabecalhomenu">         
                    <ul id="itemmenu" runat="server">
                        <li><a href=""><span>Arquivo</span></a></li>
                        <li><a href=""><span>Ajuda</span></a></li>
                        <li><a href=""><span>Log</span></a></li>
                     </ul>                          
                </div>
               
                <div id="divfaixa" runat="server"> 
                   <div id="faixaesquerda">
                        <asp:Label ID="lblModulo" runat="server" Text="Nome do Módulo"></asp:Label>
                    </div>
                    <div id="faixadireita">
                        <asp:Label ID="lblForm" runat="server" Text="Admissão Paciente"></asp:Label>
                    </div>
                </div>
                <div id="principal"> 
                     <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
    
    
                     </asp:ContentPlaceHolder>
                </div>
                <div id="rodape"> 
                    <asp:Label ID="lblRodape" runat="server" Text="Label"></asp:Label>
                </div>
                
                <div id="divMsg" runat="server"  
                     style="background-color: #808000; display:none  "   class="divOne"> >asa
                    
                    <div id="divMsgE" align="center">
                    Mensagem <br />
                        <asp:Image ID="iMsg" runat="server" 
                            ImageUrl="~/Imagens/aviso.png" />
                    </div>
                    <div id="divMsgC">
                        <asp:Label ID="lblMsg" runat="server" Text="Label"></asp:Label>
                    </div>
                    <div id="divMsgD">
                                <asp:LinkButton ID="lbFechar" runat="server" CssClass="fechar" Height="30px" 
                                    ToolTip="Fechar msg" Width="30px"></asp:LinkButton>
                    </div>
    
                </div>
                
            </div>
            
            
            
            
        </form>
    </body>
    </html>
    Content LOGON

    <%@ Page Title="" Language="VB" MasterPageFile="~/MasterPage.master" AutoEventWireup="false" CodeFile="Default3.aspx.vb" Inherits="Default3" %>
    
    <asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
    
        
      
        
    </asp:Content>
    <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server" >
    
    
    <asp:Button ID="Button1" runat="server" Text="Button"    />
    <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
    <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
     <div   >
            clicar
            
            </div>
      
    
    </asp:Content>
    Código VB.NET no logon

    Partial Class Default3
        Inherits System.Web.UI.Page
    
       
    
        Public Sub fgMsg(ByVal fPagina As Page, ByVal fLocal As String, ByVal fMsg As String, ByVal fTipo As String)
    
            'Master.FindControl("divMsg").Visible = True
    
            Dim voLb As Label = fPagina.Master.FindControl("lblMsg")
            voLb.Text = fMsg
    
        End Sub
    
        Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button1.Click
    
    
            Try
                vsRetorno = vcAce.Ace_Busca_Usuario(vsSc, txtUsuario.Text.Trim, txtSenha.Text.Trim)
                If Len(vsRetorno) > 0 Then
                    FormsAuthentication.RedirectFromLoginPage(txtUsuario.Text, False)
                Else
                    lblAviso.Text = "Senha/Usuário inválidos... tente novamente..."
    
                    Me.Page.ClientScript.RegisterStartupScript(Me.GetType(), "startup", "teste();", True)
    
                    fgMsg(Me.Page, "", "Acesso Negado!", "aviso")
                End If
            Catch ex As Exception
                Me.Page.ClientScript.RegisterStartupScript(Me.GetType(), "startup", "teste();", True)
                fgMsg(Me.Page, "Ao logar", ex.Message, "erro")
            Finally
                vcAce = Nothing
            End Try
        End Sub
    
     
    End Class
    




    Américo Arvani MCP/MCTS - WEB Se ajudou , marque como resposta.
    sexta-feira, 12 de março de 2010 11:20
  • Ola Américo...

    Mexi em tanta coisa que começou a quase funcionar, funcionou o efeito do div fazendo show...mas está piscando...
    Na sequência usando o codigo que vc ajustou fiz tb no mesmo projeto uma MP nova e um form usando esta nova mp, mas tb pisca. Depois criei um novo projeto com 2 paginas  e tb pisca. 
    Agora segue algumas dúvidas.

    1 - Preciso usar a linha -  <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
    pois o efeito funciona sem ela?

    2 - a minha mp tem varias divisões, feitas com div, e faço atualizações separadas nestas divs, 
    então não teria que colocar as divs entre updatepanel? Tentei fazer isso, mas da erro informando 
    que o div não permite ficar dentro do updatepanel, isto procede?

    3 - se eu quiser fazer o efeito ao contrario, ou seja, colocar um link para fechar
    a div como ficaria?

    4 - Tenho recebido erro de js no canto esquerdo inferior do browser, isto seria um novo tópico,
    mas no projeto novo que criei de 2 paginas ja esta dando este erro...será que tem algo a ver?

    Mas uma vez obrigado pelos retornos e paciência...
    t+ e fico fazendo outros testes...[]
    segunda-feira, 15 de março de 2010 22:03