Criando alertas igual do Twitter usando jQuery

Este é o primeiro tutorial da minha vida inteira então provavelmente não será o melhor dentre os feitos por mim, por isso peço a vós, leitores, que perguntem, façam sugestões, elogiem ou corrijam-me para que os próximos sejam melhores.

Por | @spl_splinter Programação

Este é o primeiro tutorial da minha vida inteira então provavelmente não será o melhor dentre os feitos por mim, por isso peço a vós, leitores, que perguntem, façam sugestões, elogiem ou corrijam-me para que os próximos sejam melhores. ;)

Preview do resultado:



Este é um tutorial curto para fazer um sistema de alertas similar ao do Twitter usando jQuery. Eu acho esse tutorial bem simples e vou dividí-lo em algumas partes.


1. Entenda a idéia


A primeira coisa a fazer é entender como diabos eles colocaram aquele texto no topo, aparecendo de cima e depois sumindo de um jeito totalmente mágico. Bom, não tem nada de mágico. Eu imagino aquilo como uma div que está bem no topo, à frente do corpo da página e nada mais. Então temos que posicionar a div, estilizá-la, fazê-la aparecer e sumir e pronto.


2. Posicionar a div


Vou criar a div com o id alerta e vou colocar um texto dentro para ver como fica.
Aqui está seu lindo alerta!</div>


Abrindo este HTML, este alerta não está tão lindo assim, então temos que estilizar ele para que fique. O alerta do Twitter ocupa toda a largura da página, fica sobre o texto, tem um fundo semitransparente e é possível vê-lo mesmo se estou olhando o rodapé da página.
#alerta{
    width:100%;
    top:0px;
    left:0px;
    z-index: 999;
    background-color: white;
    position:fixed;
}



3. Estilizá-la


Para estilizar a transparência, espaçamento e etc. vou adicionar as seguintes propriedades:
position:fixed;
padding:15px 50px;
    
/*essas propriedades são opicionais*/
font-family: 'trebuchet ms';
font-size: 18px;

/*crossbrowser opacity*/
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
filter: alpha(opacity=90);
-moz-opacity:0.9;
-khtml-opacity: 0.9;
opacity: 0.9;

/*uma pequena sombra para que seja possível destacar o alrta do resto da página*/
-moz-box-shadow: 0px 2px 2px #888;
-webkit-box-shadow: 0px 2px 2px #888;
box-shadow: 0px 2px 2px #888;


Isso nos causa um pequeno problema: o texto também está ficando semitransparente e a idéia não é essa. Temos duas soluções:
a)criar uma div que preencha todo o fundo e essa sim seria transparente;
b)criar uma imagem com a transparência desejada e usar como background.

A segunda opção me parece mais fácil, então vou usar a opção b. Isso nos permite tirar do CSS a cor de fundo e as cinco linhas da transparência.


4. Fazer aparecer e sumir


O nome do tutorial é "Alertas do Twitter usando jQuery", então temos que usar jQuery. Supondo que você tenha forçado o usuário a ativar o javascript, adicione a propriedade "display: none;" ao alerta. E eis o javascript que resolve o item 4:
alerta = function(){
    //Como usaremos o objeto resultante de $("#alerta") várias vezes,
    //criamos uma variável $alerta para não ocuparmos processamento com a busca do objeto toda vez que formos usá-lo
    var $alerta = $("#alerta");
    $alerta.slideDown(500);

    window.setTimeout(function() {
        $alerta.slideUp(500);
    }, 10000);
}

Precisamos dar ao usuário possibilidade de fechar o alerta clicando nele.
$alerta.click(function(){
    $alerta.slideUp(500);
});


E informá-lo de que é possível clicar no alerta.
cursor:pointer;


5.Pronto


Para que isso fique usável pensemos na portabilidade desse código. O CSS e o javascript devem estar em arquivos separados e faremos o alerta receber uma string - para caso o programador queira avisar ao usuário outra coisa além de que ali está um lindo alerta. Também não temos certeza se o programador vai criar uma div com id alerta no documento HTML, então vamos tirá-la do HTML e iremos inserí-la com o javascript. Vamos fazer isso no início do código javascript.
$("body").append("
"+str+"</div>");

Por fim, sua função de alerta vai ficar assim:
alerta = function(str){
    $("body").append("
"+str+"</div>"); var $alerta = $("#alerta"); $alerta.slideDown(500); $alerta.click(function(){ $alerta.slideUp(500); }); window.setTimeout(function() { $alerta.slideUp(500); }, 10000); }


Para usar isso tudo é só adicionar o .css e o .js que você criou e chamar a função assim:
alerta("Aqui está seu alerta lindo e maravilhoso!");
E lá estará seu alerta lindo e maravilhoso. :)



Resultado:

Mais sobre: jquery twitter
Share Tweet
Recomendado
Comentários
Carregar comentários
Destaquesver tudo
  • ASSINE NOSSA NEWSLETTER

    As melhores publicações no
    seu e-mail

  • Preencha para confirmar