Criando mensagem flutuante informativa com jQuery UI
Graças a jQuery UI, em poucas linhas, podemos criar animações incríveis para nosso site, já que ele vem pré-carregado com diversos efeitos, interações, widgets, etc.
Usando efeitos de.show, .hide e .delay (próprio do jQuery) criaremos uma discreta mensagem informativa que irá aparecer em canto inferiro do nosso blog, e que desaparecerá em um determinado período de tempo.
Para ver um exemplo desta mensagem, você pode pressionar os botões a seguir:
Espera a transição concluir antes de iniciar outra função:
A lista de efeitos em jQuery UI é mais extensa, e você pode modificar os parâmetros, tais como opções de fantasia, duração, etc.
Caso não consiga visualizar, veja:
Tutorial
Passo 1: Instalar jQuery UI no modelo:
Para poder executar corretamente as funciones instale jQuery UI antes de </head> o seguinte código:
Passo 2: A marcação do documento:
Após <body>, você precisará incluir o seguinte:
Passo 3: Adicionar CSS
Agora antes de ]]></b:skin> adicione o seguinte código/estilo:
Passo 4: Adicionar o script com a função no modelo:
Nesta etapa, vamos rever os conceitos básicos para executar uma função, lembre-se que com Javascript nativo, você precisa incluir tudo em um só evento, no nosso caso, a função vai começar no início do carregamento da página:
Atraso do script (.delay) >> Uso de .show >> Atraso do próximo efeito >> Uso de .hide
Se não entendeu, possivelmente vendo o script, possa ver mais claramente:
Cada efeito é diferente e tem diferentes opções, mas basicamente seria o mesmo. Se quiser ver uma lista de efeitos compatíveis pode analisar a documentação do jQuery UI, na seção de Effect.
Se gostou do efeito dos exemplos, pode ver o código fonte que é mostrado abaixo, se você quiser executar um automaticamente, não esqueça de substituir o evento que é exposto no início do passo 4:
Efeito Puff:
Marcação HTML:
Efeito Bounce:
Efeito Blind:
Efeito Explode:
Usando efeitos de.show, .hide e .delay (próprio do jQuery) criaremos uma discreta mensagem informativa que irá aparecer em canto inferiro do nosso blog, e que desaparecerá em um determinado período de tempo.
Para ver um exemplo desta mensagem, você pode pressionar os botões a seguir:
Espera a transição concluir antes de iniciar outra função:
A lista de efeitos em jQuery UI é mais extensa, e você pode modificar os parâmetros, tais como opções de fantasia, duração, etc.
Caso não consiga visualizar, veja:
Para poder executar corretamente as funciones instale jQuery UI antes de </head> o seguinte código:
<script src="http://code.jquery.com/ui/1.9.0/jquery-ui.js"></script>Ignore esta etapa se você já tem o arquivo vinculado no seu modelo.
Após <body>, você precisará incluir o seguinte:
<div id="nota-informativa">Certifique-se de incluir qualquer fragmento de texto que deseja exibir.
<!--Digite o texto da mensagem aqui -->
</div>
Agora antes de ]]></b:skin> adicione o seguinte código/estilo:
#nota-informativa {
padding:5px;
width:180px;
text-align:center;
background-color:#FFEE88;
position:fixed;
display:none;
left:200px;
bottom:80px;
box-shadow:0 0 5px #555;
}
Nesta etapa, vamos rever os conceitos básicos para executar uma função, lembre-se que com Javascript nativo, você precisa incluir tudo em um só evento, no nosso caso, a função vai começar no início do carregamento da página:
<script type="text/javascript">Nosso seletor é #nota-informativa, procederemos a escrever o nosso script, para isso utilizaremos 4 efeitos:
$(document).ready(function () {
// Nosso script carregará quando o documento for carregado a 100%
});
</script>
Atraso do script (.delay) >> Uso de .show >> Atraso do próximo efeito >> Uso de .hide
Se não entendeu, possivelmente vendo o script, possa ver mais claramente:
<script type="text/javascript">Os valores numéricos correspondem ao tempo, e no caso do bouncing em "distância" é a altura máxima do ressalto.
$(document).ready(function () {
$("#nota-informativa")
.delay(2500) // Tempo de atraso em milissegundos até que apareça o contenedor
.show( "bounce", { times:3, distance:100, direction:'down' }, 2000 ) // Uso de .show, especificamente com bounce e alguns parâmetros específicos dessa animação.
.delay(2000) // Tempo de duração do contenedor na página
.hide( "drop", { direction: "down" }, "slow" ); // Uso de .hide, com o efeito drop.
});
</script>
Cada efeito é diferente e tem diferentes opções, mas basicamente seria o mesmo. Se quiser ver uma lista de efeitos compatíveis pode analisar a documentação do jQuery UI, na seção de Effect.
Se gostou do efeito dos exemplos, pode ver o código fonte que é mostrado abaixo, se você quiser executar um automaticamente, não esqueça de substituir o evento que é exposto no início do passo 4:
Marcação HTML:
<div class="nota-informativa" id="puff">Script:
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut odio. Nam sed est. Nam a risus et est iaculis adipiscing. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer ut justo. In tincidunt viverra nisl. Donec dictum malesuada magna.
</div>
<script>
$( "#handler-puff" ).click(function() { // PUFF
$( "#puff" ).show( "puff", 1000 )
.delay(2000)
.hide( "puff", 1000 );
});
</script>
<div class="nota-informativa" id="bounce">Script:
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut odio. Nam sed est. Nam a risus et est iaculis adipiscing. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer ut justo. In tincidunt viverra nisl. Donec dictum malesuada magna.
</div>
<script>
$( "#handler-bounce" ).click(function() { // BOUNCE
$( "#bounce" ).show( "bounce", { times:3, distance:100, direction:'down' }, 2000 ).delay(2000).hide( "bounce", { times:1, distance:100, direction:'down' }, 1000 );
});
</script>
<div class="nota-informativa" id="blind">Script:
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut odio. Nam sed est. Nam a risus et est iaculis adipiscing. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer ut justo. In tincidunt viverra nisl. Donec dictum malesuada magna.
</div>
<script>
$( "#handler-blind" ).click(function() { // BLIND
$( "#blind" ).show( "blind", { direction:'down' }, 1000 )
.delay(2000)
.hide( "blind", { direction:'down' }, 1000 );
});
</script>
<div class="nota-informativa" id="explode">Script:
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut odio. Nam sed est. Nam a risus et est iaculis adipiscing. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer ut justo. In tincidunt viverra nisl. Donec dictum malesuada magna.
</div>
<script>CSS Universal de todos os exemplos:
$( "#handler-explode" ).click(function() { // EXPLODE
$( "#explode" ).show( "explode", 500 )
.delay(2000)
.hide( "explode", 500 );
});
</script>
.nota-informativa {Botões de execução:
padding:5px;
width:180px;
text-align:center;
background-color:#FFEE88;
position:fixed;
display:none;
left:200px;
bottom:80px;
box-shadow:0 0 5px #555;
}
<center>
<input class="button" id="handler-puff" type="button" value="Efecto Puff" /> <input class="button" id="handler-bounce" type="button" value="Efecto Bounce" /> <input class="button" id="handler-blind" type="button" value="Efecto Blind" /> <input class="button" id="handler-explode" type="button" value="Efecto Explode" /></center>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut odio. Nam sed est. Nam a risus et est iaculis adipiscing. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer ut justo. In tincidunt viverra nisl. Donec dictum malesuada magna.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut odio. Nam sed est. Nam a risus et est iaculis adipiscing. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer ut justo. In tincidunt viverra nisl. Donec dictum malesuada magna.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut odio. Nam sed est. Nam a risus et est iaculis adipiscing. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer ut justo. In tincidunt viverra nisl. Donec dictum malesuada magnaa.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut odio. Nam sed est. Nam a risus et est iaculis adipiscing. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer ut justo. In tincidunt viverra nisl. Donec dictum malesuada magna.
