Mensagem flutuante informativa com jQuery UI

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:
<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.

Passo 2: A marcação do documento:

Após <body>, você precisará incluir o seguinte:
<div id="nota-informativa">
<!--Digite o texto da mensagem aqui -->
</div>
Certifique-se de incluir qualquer fragmento de texto que deseja exibir.

Passo 3: Adicionar CSS

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;
}

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:
<script type="text/javascript">
$(document).ready(function () {
// Nosso script carregará quando o documento for carregado a 100%
});
</script>
Nosso seletor é #nota-informativa, procederemos a escrever o nosso script, para isso utilizaremos 4 efeitos:

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">
$(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>
Os valores numéricos correspondem ao tempo, e no caso do bouncing em "distância" é a altura máxima do ressalto.

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:
<div class="nota-informativa" id="puff">
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:
<script>
$( "#handler-puff" ).click(function() { // PUFF
$( "#puff" ).show( "puff", 1000 )
.delay(2000)
.hide( "puff", 1000 );
});

</script>

Efeito Bounce:
<div class="nota-informativa" id="bounce">
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:
<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>

Efeito Blind:
<div class="nota-informativa" id="blind">
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:
<script>
$( "#handler-blind" ).click(function() { // BLIND
$( "#blind" ).show( "blind", { direction:'down' }, 1000 )
.delay(2000)
.hide( "blind", { direction:'down' }, 1000 );
});

</script>

Efeito Explode:
<div class="nota-informativa" id="explode">
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:
<script>
$( "#handler-explode" ).click(function() { // EXPLODE
$( "#explode" ).show( "explode", 500 )
.delay(2000)
.hide( "explode", 500 );
});
</script>
CSS Universal de todos os exemplos:
.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;
}
Botões de execução:
<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.






Nome

Básicos,3,Blogger,43,Botões,2,buscadores,3,Comentários,5,Css3,9,Design,3,Dominio,3,Downloads,2,Efeito,13,Facebook,3,Feed,1,Festividades,1,GooglePlus,6,Hacks,7,HTML,8,Imagens,8,Menu,3,Recursos,3,Seo,8,Truque,24,Twitter,2,Widget - Gadget,16,
ltr
item
Bloggermin: Mensagem flutuante informativa com jQuery UI
Mensagem flutuante informativa com jQuery UI
Criando mensagem flutuante informativa com jQuery UI
http://4.bp.blogspot.com/-PJqhPtste44/ULP5nOzWlrI/AAAAAAAAAtM/FzRq75t11t4/s530/mensagem%2Bflutuante.png
http://4.bp.blogspot.com/-PJqhPtste44/ULP5nOzWlrI/AAAAAAAAAtM/FzRq75t11t4/s72-c/mensagem%2Bflutuante.png
Bloggermin
https://www.bloggermin.cashmore.com.br/2013/01/mensagem-flutuante-informativa-com-jquery-ui.html
https://www.bloggermin.cashmore.com.br/
https://www.bloggermin.cashmore.com.br/
https://www.bloggermin.cashmore.com.br/2013/01/mensagem-flutuante-informativa-com-jquery-ui.html
true
3085171147808187471
UTF-8
Carregado Todas os Posts. Não foi encontrado nenhum post. VER TUDO Leia mais Responder Cancelar resposta Excluir Por Home PÁGINAS POSTAGENS Ver tudo RECOMENDADO PARA VOCÊ ETIQUETA ARQUIVO PESQUISAR TODAS AS PUBLICAÇÕES Não foi encontrado qualquer correspondência postal com o seu pedido Voltar a Home Domingo Segunda-feira Terça-feira Quarta-feira Quinta-feira Sexta-feira Sábado Dom Seg Ter Qua Qui Sex Sáb Janeiro Fevereiro Março Abril Maio Junho Julho Agosto Setembro Outubro Novembro Dezembro Jan Fev Mar Abr Maio Jun Jul Ago Set Out Nov Dez agora mesmo 1 minuto atrás $$1$$ minutes ago 1 hora atrás $$1$$ hours ago Ontem $$1$$ days ago $$1$$ weeks ago mais de 5 semanas atrás Seguidores Seguir O CONTEÚDO É PREMIUM Por favor, compartilhe para desbloquear Copiar Todo o Código Selecionar Todo o Código Todos os códigos foram copiados para a área de transferência Não é possível copiar os códigos / textos, por favor pressione [CTRL] + [C] (ou CMD + C com Mac) para copiar