Agregando conhecimento…
Neste post irei mostrar como se utiliza este plugin do JQuery. O efeito final é bem interessante:
Neste post vou mostrar como deixar o background de um elemento animado, utilizando JQuery e o plugin jquery.bgpos.js
Para quem tem problemas em deixar uma imagem PNG com fundo transparente, existe o plugin do JQuery pra facilitar a vida dos designers e programadores que se preocupam com esta questão, abaixo está um exemplo de seu uso:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Exemplo transparencia</title> <!-- Aqui é incluido a biblioteca JQuery e o plugin que faz a mágica --> <script type="text/javascript" src="http://www.shiguenori.com/jquery/jquery.js"></script> <script type="text/javascript" src="http://www.shiguenori.com/jquery/jquery.pngFix.js"></script> <!-- Esta instrução faz com que todas as imagens .png tenham fundo transparente --> <!-- Lembrando obviamente de que a imagem deve ser salva com transparência --> <script type="text/javascript"> $(document).ready(function(){ $(document).pngFix(); }); </script> </head> <body bgcolor="#009966"> <img src="http://www.shiguenori.com/material/pngFix/pngtest.png" width="173" height="173" /> <div style="width:173px; height:173px; background-image:url(http://www.shiguenori.com/material/pngFix/pngtest.png);">No background também funciona</div> </body> </html> |
Links:
Material em inglês do conteúdo
Download do plugin pngFix
JQuery é um framework para javascript que facilita e deixa mais produtivo a manipulação dessa linguagem cross-browser.
Aqui vou mostrar um efeito básico e mais abaixo o código:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<script src="http://www.shiguenori.com/jquery/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
// Quando o documento estiver pronto
$(document).ready(function(){
// quando o elemento com a id meuBotao for clicado
$('#meuBotao').click(function(){
// função para mostrar ou esconder a div (função nativa do JQuery)
$('#divEscondida').toggle();
});
});
</script>
<button id="meuBotao">Botão</button>
<div id="divEscondida" style="display:none;">Conteúdo da DIV</div>
<div style="display:none;">
Exemplo em JQUERY
</div> |
Qualquer dúvida que tiverem com jquery, enviem-me um comentário que ficarei feliz em ajudar a resolver a dúvida.
Muita gente tem dúvidas de como usar algumas funções e seus parâmetros em javascript. Nesse intuito mostro algumas formas de se utilizar a função replace() e match()
Contiunuando as funções de data/hora, abaixo segue uma função para validar data informando opcionalmente uma máscara:
Continuar lendo »
Abaixo seguem algumas funções para validação de data e/ou hora em PHP, façam bom uso:
Continuar lendo »
Página para publicar e armazenar conteúdo relacionado a Desenvolvimento Web:
PHP, MySQL, Javascript, JQuery, CSS e as novas tecnologias do momento.
Façam comentários, perguntas e sugestões que ficarei satisfeito por recebê-los.
Shiguenori Junior