«

»

dez 01

Plugin jQuery para criação de máscara de moedas


Web 2.0 está aí, exigindo cada vez mais interatividade dos sites com os usuários.

Como conseguir isso?

Um dos modos, é utilizando javascript, o que pode não ser tão fácil assim.

Por isso, existem bibliotecas gratuitas com MooTools, Dojo, Script.aculo.us e Prototype, que simplificam o desenvolvimento de aplicações web.

Entre elas, está jQuery, com vasta documentação e constante atualização.

Mas… Por que utilizar jQuery?

Porque ela pode reduzir o tempo de criação, por exemplo, de efeitos visuais em uma página html.

Como o próprio slogan diz: ” Escreva menos, faça mais” (Write less, do more).

É possível criar animações com pouquíssimas linhas de código javascript, ao invés de utilizar flash ou outros recursos.

Quer um exemplo? Que tal brincar um pouco com o efeito drag ‘n drop (arrastar e soltar) nessa página?

http://jqueryui.com/demos/droppable/#photo-manager

Outro fator importante é a grande compatibilidade entre navegadores.

Você não precisa se preocupar com a criação de funções específicas para cada um; a biblioteca já compatibiliza o código para você.

É possível utilizar requisições ajax de maneira muito fácil.

Gostou? Quer uma dica?

O jQuery tornou-se popular pelos inúmeros plugins disponíveis na internet. Esses plugins permitem criar novas funções com base nessa biblioteca.

A dica de hoje é o plugin para criação de máscara para moeda em campos html, ou seja, esse campo exibirá as casas decimais na digitação, por exemplo, do preço de um produto.

Recomendo o plugin MaskMoney.

Qual a diferença dos demais?

Ele permite a edição do campo sem a necessidade de apagar o valor completamente.

Muitas das máscaras disponíveis apresentam um bug quanto a isso.

É possível também customizar a máscara, para exibição de mais de duas casas após a vírgula com apenas uma linha de código.

Simples, não?

Mas cuidado na criação de código jQuery. Lembrem-se sempre de que o código é executado no navegador do cliente, então, se o código não for muito grande, pode travar o programa.

Fica a dica sobre alta performace com essa biblioteca:

http://geeklove.com.br/2009/11/09/escrevendo-jquery-de-alta-performace/

Sobre o autor

Elaine

Sou estudante de Engenharia da Computação e desenvolvedora Web.
Adoro a tecnologia e como ela se renova ao mesmo tempo que se contradiz.
Amo o que eu faço e faço o que eu amo.
#EuProgr<3

2 comentários

1 menção

  1. Alex

    Boa noite, to com um probleminha aqui =)

    vou explicar, trabalho com PHP e CSS, recentemente comecei a me aprofundar mais em jQuery, mas sempre pegando codigos prontos e tals, oque eu quero fazer é o seguinte, em uma certa pagina de um site de um cliente tem uma lista de noticias, essa lista eu faço ela em um while com o php, quando o usuario clica no link da lista abre um popup em jquery, que na verdade não é bem um popup destes comuns, é um estilizado em css, o problema é que junto com o meu while eu tenho que por o meu script js para ele se repertir e trocar o seu ID, caso eu não faço isso ira funcionar apenas o 1º link, e como jQuery veio para vc escrever menos e produzir mais eu estou a rocura de um geito de não presisar repedir esses script, vou por aqui o codigo da pagina

    aqui começa minha repetição

    jQuery(document).ready(function(){
    jQuery(‘.abrePopUp_4’).click(function(){ //REPARA QUE AQUI EU TENHO QUE ALTERAR SEMPRE CONFORME O LINK .abrePopUp_4
    jQuery(‘.popUpAtletaDados_4’).show();
    });

    jQuery(‘.popUpAtletaDadosBtnFechar_4’).click(function() {
    jQuery(‘.popUpAtletaDados_4’).hide();
    })
    });

    Maecenas consequat dignissim laoreet. Maecenas sed ante nec tortor molestie commodo a at leo. Ut ac laoreet libero. Proin mollis, libero id scelerisque placerat, odio nunc aliquet lectus, ac fringilla augue nulla non sapien. Suspendisse lacus velit, fringilla nec imperdiet dignissim, sodales vitae leo. Etiam facilisis interdum nisl vel pellentesque. Nunc non felis non magna elementum iaculis. Ut ultrices condimentum erat id eleifend. Pellentesque consectetur lobortis nulla, non convallis justo malesuada vel. Morbi sit amet metus turpis, at interdum lacus. Duis in pellentesque risus. In tincidunt interdum quam eu rhoncus

    Maecenas consequat dignissim laoreet. Maecenas sed ante nec tortor molestie comm

    veja mais +

    jQuery(document).ready(function(){
    jQuery(‘.abrePopUp_3’).click(function(){
    jQuery(‘.popUpAtletaDados_3’).show();
    });

    jQuery(‘.popUpAtletaDadosBtnFechar_3’).click(function() {
    jQuery(‘.popUpAtletaDados_3’).hide();
    })
    });

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer rutrum molestie lacus, convallis gravida diam dignissim cursus. Quisque consequat pellentesque adipiscing. Vivamus et odio sem, ut cursus ipsum. Integer lacinia sapien a sem imperdiet a fermentum risus condimentum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec eleifend ante vel velit feugiat in porta velit porttitor. Quisque sodales urna ac turpis porttitor nec accumsan sem commodo. Proin fringilla vestibulum mattis.

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer rutrum molestie

    veja mais +

    jQuery(document).ready(function(){
    jQuery(‘.abrePopUp_1’).click(function(){
    jQuery(‘.popUpAtletaDados_1’).show();
    });

    jQuery(‘.popUpAtletaDadosBtnFechar_1’).click(function() {
    jQuery(‘.popUpAtletaDados_1’).hide();
    })
    });

    Phasellus volutpat tincidunt mauris in molestie. Ut ac orci enim. Nullam quis metus a nunc tempor euismod. Ut sed velit nulla. Phasellus eget tempus dui. Donec auctor interdum diam ut consectetur. Cras vitae tristique eros. Ut tristique suscipit fringilla. Aenean vel ligula in justo vulputate sodales eget sit amet turpis. Etiam sed mi felis, a scelerisque sapien.

    Phasellus volutpat tincidunt mauris in molestie. Ut ac orci enim. Nullam quis me

    veja mais +

    entao, eu estava olhando por ae e vi que um geito do jQuery selecionar o proximo elemento do que foi clicado, mas não concigo fazer isso, desculpa qualquer coisa, se você quiser dar uma olhada na pagina, é esta aqui http://krcsport.com.br/php/destaques.php só não repara em algumas imagens, pois deu um certo erro na hora que fui extrair elas do ilustrator, to esperando o designer me passar elas… vlw e um grande abraço!

  1. Usando jQuery UI para construção de modal dialog window » DigitalDev | DigitalDev

    […] Não digo que esta seja a melhor biblioteca para criação de interfaces gráficas com javascript nem a mais rápida, pois a avaliação desses quesitos depende de diversos fatores, como das características do navegador e da capacidade de processamento do lado do cliente web. Mas sua utilização tem permitido criar maior dinamismo e usabilidade em interfaces web com php de uma forma muito rápida, tanto em relação a sua implementação quanto ao tempo para entender seu funcionamento. Não domino todos seus recursos, mas abaixo posto uma brincadeira com a função dialog dessa biblioteca, idéia que surgiu no comentário do meu post anterior. […]

Deixe uma dúvida, resposta ou sugestão