Mensagem carregando... usando CSS e Javascript
Postado por Carlitos | Tags cakephp , css , javascript | Postado em 13:54
3
Corri atrás de uma forma simples de mostrar uma mensagem de "Carregando..." quando o usuário clica em um link e aguarda o processamento das informações. Bom, depois de muito camelar pela internet colhi algumas informações e fiz um bem simples usando o atributo FIXED do CSS. Mãos a obra!!!
1º) Bom, primeiro adicionamos o script abaixo no head do layout default. No meu caso é o default.ctp.
//Mostra o carregador function __loadMostra(){ var objLoader = document.getElementById("carregador_pai"); objLoader.style.display = "block"; objLoader.style.visibility = "visible"; }
Este código "mostra" (atribui 'block' e 'visible' para ele) o elemento carregando.
2º) Adicione a DIV que contém a mensagem de carregando.
Observe que declarei que a DIV deve ficar escondida (display: none; visibility: hidden;).
Como eu uso o CakePHP eu adicionei uma imagem (aqui neste site tem várias imagens de Carregando para escolher):
echo image('carregando.gif', array('alt' => 'Carregando...', 'border' => 0));
3º)Adicione o seguinte CSS:
#carregador_pai{ width: 100%; height:100%; position: absolute; text-align: center; background-color:#414141; filter:alpha(opacity=90); opacity:0.9; overflow: auto; top: 0; left: 0; z-index:2; } #carregador_fundo{ font-size: 1px; left: 8px; width: 113px; position: relative; top: 50px; height: 7px; background-color: #ebebe4 } #carregador_posicao{ padding-top:20%; } #carregador{ border-right: #6a6a6a 1px solid; padding: 0px 10px 0px 16px; border-top: #6a6a6a 1px solid; display: block; font-size: 11px; z-index: 2; margin: 0px auto; border-left: #6a6a6a 1px solid; width: 250px; height:70px; color: #000000; border-bottom: #6a6a6a 1px solid; font-family: Tahoma, Helvetica, sans; background-color: #ffffff; text-align: left; } @media screen{ body>div#carregador_pai{ position: fixed; } }Esse CSS cria uma tela como na imagem abaixo.
Ah! Esse CSS não funciona no IE¨6 ou inferior. Mas quem liga né? ;) Desde já estou fazendo minha parte no movimento ATUALIZE SEU IE! E outra coisa, o único problema que os usuários do Internet Explorer 6 ou inferior terão é que não verão a tela de Carregando, mas o carregamento da página não é afetado.
4º) Guenta aí, tá quase acabando ;). Agora sempre que você tiver um link basta adicionar a função
onclick = "__loadMostra();";
Ou seja, ao clicar ele mostra a DIV do Carregando... e assim que a próxima página termina de ser carregada a DIV volta a ser ocultada. Dá para adicionar ele nos formulário também, excluindo o botão de submit e criando um INPUT type BUTTON e adicionando o __loadMostra() seguido do submit().
onclick = "__loadMostra(); submit();";
Com o CakePHP fica assim
// Cria o botão de Enviar que submete o formulário echo $form->button('Enviar', array('onclick' => '__loadMostra(); submit();')); // Cria a tag /FORM echo $form->end();
Simples não? Dúvidas? Eu gostei do resultado final. Se tiver algo errado comentem aí!
Ah! Na imagem parece que estou usando o IE8 né? Não... esse é o Firefox "camuflado" com o thema "ie8fox".
Abração!
Funcionou lindinho, show! Valeu!
como utilizo o objLoader?! está dando erro na minha página =/
Opa! Usa o http://malsup.com/jquery/block/#overview...