Por Fabrício Julian Carini Montenegro | @spl_splinter em 20/06/2011 00:00 em Programação Pular para comentários
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. ;)
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.
3. Estilizá-la
Para estilizar a transparência, espaçamento e etc. vou adicionar as seguintes propriedades:
/*essas propriedades são opicionais*/
/*crossbrowser opacity*/
/*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);
$alerta.slideUp(500);
Precisamos dar ao usuário possibilidade de fechar o alerta clicando nele.
$alerta.click(function(){
E informá-lo de que é possível clicar no alerta.
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.