Inquiridor
Efeitos ao dar visible no div

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 retornovc saberia dizer como chamar a função via code behind?Pois no meu caso estou fazendo assimIf Len(vsRetorno) > 0 ThenFormsAuthentication.RedirectFromLoginPage(txtUsuario.Text, False)ElsefgMsg(Me.Page, "", "Acesso Negado!", "aviso")Master.FindControl("divMsg").Visible = TrueDim voLb As Label = Master.FindControl("lblMsg")voLb.Text = fMsgIf UCase(fTipo) = "ERRO" ThenDim voI As Image = Master.FindControl("iMsg")voI.ImageUrl = "~/Imagens/erro.png"End IfEnd Ifsegunda-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 ThenFormsAuthentication.RedirectFromLoginPage(txtUsuario.Text, False)Elsehabilita o div aqui.....End IfCatch ex As Exceptionhabilita o div aqui.....FinallyvcAce = NothingEnd TryEnd Subterç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çãoProtected Sub btnEntrar_Click(ByVal sender As Object, ByVal e As EventArgs) Handles btnEntrar.ClickTryvsRetorno = vcAce.Ace_Busca_Usuario(vsSc, txtUsuario.Text.Trim, txtSenha.Text.Trim)If Len(vsRetorno) > 0 ThenFormsAuthentication.RedirectFromLoginPage(txtUsuario.Text, False)ElselblAviso.Text = "Senha/Usuário inválidos... tente novamente..."fgMsg(Me.Page, "", "Acesso Negado!", "aviso")End IfCatch ex As ExceptionfgMsg(Me.Page, "Ao logar", ex.Message, "erro")FinallyvcAce = NothingEnd TryEnd Submando 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 = TrueDim voLb As Label = fPagina.Master.FindControl("lblMsg")voLb.Text = fMsgEnd SubEspero 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 informandoque 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 fechara 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