Mostrar mensagem de aguarde após clicar em botão com JQuery

jquery

PUBLICIDADE


Adicione o JQuery em sua Página Após baixar na página oficial http://docs.jquery.com/Downloading_jQuery#Download_jQuery


<script src="js/jquery-1.2.3.pack.js" type="text/javascript"></script>



Adicione o bloco de código abaixo na página.

<script type="text/javascript">

$().ready(function () {

$('#Button1').show();

$('[id$=Button1]').click(function () {

$('#MsgAguarde').show();

});

});

</script>


Adicione em sua página o código html que pode ser modificado a vontade. Este código será exibido quando o botão for clicado.


<span id="MsgAguarde" style="display:none; font-size:11px;">

<img src="img/loading.gif" alt="Aguarde.." /><br />

Aguarde...

</span>


Acima foi adicionado um gif animado circular chamado "loading.gif" e a palavra "Aguarde" Após o botão ser clicado tudo que estiver dentro do SPAN id=MsgAguarde será exibido.


Adicione o botão que irá executar o processamento (adicione-o normalmente à página)


<input type="image" name="Button1" id="Button1" src="img/email-cadastrar.png" style="border-width:0px;" />


Caso queira fazer o botão ficar invisível, desaparecer, após ser clicado, coloque após

$('#PostBackMsg').show();


o código

$('#Button1').hide();


Lembre-se de trocar no bloco de código Javascript / JQuery o ID do SPAN que contém a mensagem de aguarde e o código do botão caso necessário.




Veja Também

>> Como pegar todos os itens de um select dropbox com jquery
>> Selecionar segunda linha de uma tabela jquery
>> Jquery Each
>> Notas e Tooltips com o BigFoot - Plugin Jquery
>> FerroSlider 2: Slider para navegação diferente e Full Screen
>> Detectar Enter Pressionado em Input Text com Jquery


3 Comentários

kaique disse em
ótimo, obrigado.
Vinicius disse em
Muito bom, simples e facil!!! parabéns!
paulo disse em
Boa tarde tenho uma pagina que monta um link HREF ela demora para sair pois faz referencia a uma outra pagina que antes de aparecer carrega varios dados do oracle, tentei fazer como infoirmado mas nao cosegui, sera que poderia me ajudar? grato.


» Deixe um comentário


Preencha os dados abaixo para postar um comentário.
Seu Nome
Seu E-mail (Não Será exibido)
Seu Comentário
Publicidade