Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

yfoliveira

Javascript

Por , em Javascript

Recommended Posts

yfoliveira    0

yfoliveira
Postado

Olá pessoal estou desenvolvendo um site e sou novato em js e gostaria da ajuda de vocês.

 

Eu quero fazer minha central de clientes quando clico nela, ao clicar fora da div a div volte para display none.

E também ao clicar no botão ele mudar de cor junto com div expandindo.

 

segue link do site: www.liderpro.besaba.com

 

 

grato desde já.

 

 

um exemplo e o da locaweb.

 

http://www.locaweb.com.br/default.html

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Veja:

http://wbruno.com.br/jquery/menu-dropdown-abrindo-click-fechando-ao-clicar-fora/

 

ps: eu que fiz no site da Locaweb, quando trabalhava lá.

Compartilhar este post

Link para o post
Compartilhar em outros sites

yfoliveira    0

yfoliveira
Postado
Eu sou novato será que poderia me ajudar a partir do código se possível?

Muito grato pela ajuda.



<input class="botao" id="botao-form" type="button" value="Central de Clientes" onclick="javascript: altera_display('painel-form');">





<!-- SUBMENU -->

     <div class="painel-do-cliente" id="painel-form">

<form action="www.liderpro.com.br/cliente" method="post" class="submenu">

<table> 

           <tr> 

               <td><a class="estilo-form">Nome:</a></td> 

           </tr> 

           <tr> 

               <td><input class="estilo-form painel-usuario" type="text" name="nome_do_usuario"/></td> 

           </tr> 

           <tr> 

               <td><a class="estilo-form">Senha:</a></td> 

           </tr> 

           <tr> 

               <td><input class="estilo-form painel-senha" type="password" name="senha_do_usuario"/></td> 

           </tr> 

           <tr> 

               <td><input type="submit" class="estilo-form" name="botao_enviar" id="entra-form" value="ENTRAR NA CENTRAL"/></td> 

           </tr>

           <tr>

            <td><input type="reset" class="estilo-form" name="botao_limpar" id="limpa-form" value="CANCELAR" onclick="javascript: altera_display('painel-form')"; /></td>

           </tr> 

       </table> 

</form>

</div>

Compartilhar este post

Link para o post
Compartilhar em outros sites

gpontes    9

gpontes
Postado

Antes de tudo remova o onclick do #botao-form, deixe apenas:

<input class="botao" id="botao-form" type="button" value="Central de Clientes" />

Depois adicione esse script(com a tag <script>, claro) na página:

(function() {
  //cache de elementos
  var painelForm = $('#painel-form');
  var openForm   = $('#botao-form');
  var bodyTag    = $('body');
  
  //faz com que outra funcao não seja executada
  var stop = function(e) {
    e.stopPropagation();
  };

  //abre e fecha o form
  var toggle = function(e) {
    stop(e);
    painelForm.fadeToggle();
  };
  
  //apenas desaparece com o form
  var hide = function() {
    painelForm.fadeOut();
  };

  //dom bindings
  openForm.click(toggle);
  painelForm.click(stop);
  bodyTag.click(hide);
})();

Compartilhar este post

Link para o post
Compartilhar em outros sites

yfoliveira    0

yfoliveira
Postado

Desculpe minha ignorância, mas eu tentei e não consegui, não sei se estou com a biblioteca correta, segue abaixo:

 

 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>(function() {
//cache de elementos
var painelForm = $('#painel-form');
var openForm = $('#botao-form');
var bodyTag = $('body');
//faz com que outra funcao não seja executada
var stop = function(e) {
e.stopPropagation();
};
//abre e fecha o form
var toggle = function(e) {
stop(e);
painelForm.fadeToggle();
};
//apenas desaparece com o form
var hide = function() {
painelForm.fadeOut();
};
//dom bindings
openForm.click(toggle);
painelForm.click(stop);
bodyTag.click(hide);
})();</script>
</head>
<body>
<input class="botao" id="botao-form" type="button" value="Central de Clientes" />
<!-- SUBMENU -->
<div class="painel-do-cliente" id="painel-form">
<form action="www.liderpro.com.br/cliente" method="post" class="submenu">
<table>
<tr>
<td><a class="estilo-form">Usuário:</a></td>
</tr>
<tr>
<td><input class="estilo-form painel-usuario" type="text" name="nome_do_usuario"/></td>
</tr>
<tr>
<td><a class="estilo-form">Senha:</a></td>
</tr>
<tr>
<td><input class="estilo-form painel-senha" type="password" name="senha_do_usuario"/></td>
</tr>
<tr>
<td><input type="submit" class="estilo-form" name="botao_enviar" id="entra-form" value="ENTRAR NA CENTRAL"/></td>
</tr>
<tr>
<td><input type="reset" class="estilo-form" name="botao_limpar" id="limpa-form" value="CANCELAR" onclick="javascript: altera_display('painel-form')"; /></td>
</tr>
</table>
</form>
</div>
<!-- fim submenu -->
</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

yfoliveira    0

yfoliveira
Postado

Funcionou, muito obrigado pela ajuda de vocês !!!

 

Se possível gostaria de pedir um ultimo favor, se vocês tem alguma fonte de estudo, de javascript e jquery para que eu possa estudar.

 

E mais uma vez muito obrigado.

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito