Formatador de preço em jQuery
Por: Thursday 22 January 2009 às 10:22
O sumido Cuducos me escreveu mandando uma dica extremamente útil. Um formatador de preço em jQuery. Ele escreve: “Precisei de um script aparentemente simples em javascript e não achei nenhuma solução satisfatória por ai. Dai escrevi uma e a formatei como plugin do jQuery” e eu estou ajudando a divulgar.
Trata-se de uma função para formatar entradas de texto de "preço" (você digita 123456 e aparece R$ 1.234,56), por exemplo. Totalmente customizável (pode escolher o prefixo da moeda, o separador dos centavos e dos milhares) e fácil de usar junto com o jQuery:
1.) Chame o plugin no seu <head> com algo como:
<script type="text/javascript" src="js/jquery.price_format.1.0.js"</script>;2.) Faça a chamada simples e fácil no js, por exemplo:
$('#id_do_campo').priceFormat();Pronto agora tudo que for digitado no(s) campo(s) escolhido(s) vai ser formatado como moeda. O plugin descarta o que não é número enquanto você digita e formata, colocando o prefixo e os separadores que você escolher!
Você pode ver mais detalhes aqui. Dica do Cuducos.
Tags: JavaScript jQuery
SWF Object 2
Por: Saturday 18 October 2008 às 21:18
Para quem não se lembra do UFO ou do próprio SWF Object, trata-se do script mais porreta para embedar vídeos em Flash no mundo, sem detonar semântica, acessibilidade, etc. Leia a defesa do upgrade para a versão 2.0 escrita por um dos criadores do script.
O SWFObject funciona assim: se você precisa colocar um objeto em Flash no seu site você usa o script que permite inserir um conteúdo alternativo para os usuários que não possuem o plugin do Flash player instalado. Se você preferir, pode exibir uma solicitação para que o usuário escolha instalar o plugin ou nem isso, basta apenas exibir o link para a fonte do vídeo dentro do conteúdo alternativo.
Se o usuário não tem o javascript ativado, o conteúdo alternativo é exibido automaticamente. Se não há plugin flash player instalado no browser também! Detalhe, também funciona em sites que usam XHTML enviado como application/xhtml+xml e você pode usar o script de forma estática ou dinâmica.
O mais importante nisso tudo é a acessibilidade! Se você possui a transcrição do vídeo que você quer compartilhar, de quebra você pode ainda fazer o Google indexar o conteúdo alternativo referente ao vídeo. Faça um teste aqui no meu blog, desabilite o javascript e/ou o plugin do Flash player do seu browser e veja o que está escrito “debaixo” do vídeo que você está vendo (ou não) logo abaixo. O vídeo do Videolog trata-se do conterrâneo Manoel Lemos que falou um pouco sobre o BlogBlogs no Campus Party 2008. Você precisa assistir.
Ops! Está sem javascript ou sem o plugin do Flash player?
O Henrique promete, o Henrique cumpre : ). Achou que essa parada de SWF Object não funcionava né? Se você está lendo este trecho do artigo é porque você está com o javascript do seu browser desabilitado e/ou desabilitou ou não possui o plugin do Flash player. Se realmente não possui o plugin do Flash Player, sugiro que você o instale no seu navegador da internet para poder assistir ao vídeo. Ele é gratuito!
Se você é blogueiro ou simpatizante, recomendo que você assista o vídeo do Manoel Lemos falando sobre o BlogBlogs no Campus Party. Se você tem blog e ainda não conhece o BlogBlogs, precisa conhecer. O BlogBlogs é uma excelente ferramenta para promover a audiência do seu Blog. Com certeza Manoel Lemos e o restante da galera do BlogBlogs estará no Campus Party 2009. Nos vemos lá!
Tags: Flash JavaScript SWFObject swf
SWFObject e o fim do UFO
Por: Saturday 8 March 2008 às 18:8
Para quem não se lembra, o UFO era a biblioteca de javascript para embedar arquivos em Flash mais popular tempos atrás. Era, porque o UFO chegou ao fim, segundo o próprio criador do script, Bobby van der Sluis. Mas ninguém vai ficar órfão nessa história. O UFO só chegou ao fim por causa dos esforços conjuntos em cima do SWFObject, incluindo van der Sluis que também é criador do SWFObject.
Acredito que o SWFObjct, que já está se aproximando de sua versão 2.0, seja a biblioteca de javascript para embedar Flash mais estável e confiável que existe. Eles tem se preocupado muito com acessibilidade, não obstrutividade e markup semântica. Se você costuma embedar vídeos do You Tube, Videolog, etc, nos posts do seu blog, estude a possibilidade de fazer isso usando o SWFObject. Depois você me fala o que achou!
Tags: Flash JavaScript SWFObject
As 7 regras do javascript não obstrutivo
Por: Wednesday 9 January 2008 às 15:9
Esta eu não poderia deixar passar. O Dev.Opera publicou um artigo básico e fundamental ao mesmo tempo sobre 7 regrinhas básicas para criação de javascript não obstrutivo e que vão ajudar a garantir a acessibilidade do seu site. O artigo “The seven rules of unobtrusive JavaScript” do Chris Heillman é fundamental para quem está começando e serve de bom lembrete para quem já está caducando. Artigo em inglês!
Tags: Acessibilidade JavaScript
CRIR – Checkbox & Radio Input Replacement
Por: Wednesday 11 April 2007 às 11:11
O CRIR (Checkbox & Radio Input Replacement) é uma combinação de JavaScript com CSS que permite você personalizar a aparência dos elementos checkbox e radio button, trocando-os por imagens. Este script é muito útil quando você quer ter uma interface 100% personalizada. O mais importante do script é que ele é 100% não obstrusivo, ou seja, se desabilitar o javascript do seu browser você passa a ver os checkbox e radio buttons normalmente, com a aparência padrão que seu browsers está acostumado a renderizar.
Para implementar, basta linkar o script (isto é óbvio pra você, certo?) e a folha de estilos específica para ele e adicionar uma classe no elemento (ou checkbox ou radio button) que quer que o javascript substitua pelas imagens previamente preparadas por você. Vale lembrar que existe algumas declarações no CSS responsáveis pelo endereçamento das imagens que deve substituir os elementos nos status de selecionado e não selecionado. No site do criador do script ele dá as dicas com mais detalhes de como implementar. O script é gratuito e pode ser baixado aqui! Meu conselho é que leia o texto do autor antes de tentar fazer alguma mágica!
Tags: CSS Checkbox JavaScript Radio button
Estilizando abbr no Internet Explorer 6
Por: Friday 30 March 2007 às 11:30
O Internet Explorer 6 (ele novamente) e versões anteriores não reconhecem a tag <abbr>, muito utilizada principalmente como um design pattern em microformats. Ou seja, a maioria das pessoas que o utilizam não conseguem estilizar a tag no Internet Explorer 6. E não adianta dizer para usar a tag <acronym> no lugar de <abbr>, mesmo que o Internet Explorer dê suporte a tag <acronym>. Porque quem usa essas duas tags por livre e espontânea vontade tem um objetivo certo em mente (seja ele em microformats ou não), caso contrário não use nenhuma.
De qualquer maneira você poderá se deparar com contextos em que será necessário estilizar <abbr> para o Internet Explorer 6. Sendo assim existe uma solução em javascript que te ajuda a ter controle sobre o elemento. Veja o script a seguir:
function styleAbbr() {
var oldBodyText, newBodyText, reg
if (isIE) {
oldBodyText = document.body.innerHTML;
reg = /<ABBR([^>]*)>([^<]*)<\/ABBR>/g;
newBodyText = oldBodyText.replace(reg, '<ABBR $1><SPAN class=\"abbr\" $1>$2</SPAN></ABBR>');
document.body.innerHTML = newBodyText;
}
}
window.onload = function(){
styleAbbr()
};
isIE = (document.all) ? true:false;
O script (que poderia ser muito mais elegante) pega um elemento <abbr> e adiciona um <span> com a classe .abbr dentro dele. Ou seja, você não precisa colocar esse <span> no código só por causa do IE6. Na hora de criar suas regras de CSS, você pode estilizar normalmente para os browsers modernos e agrupar os estilos para a classe .abbr que será utilizada pelo IE6. Veja um exemplo:
#content abbr, #content .abbr {
font-size:10px;
color:#b30101;
}
Simples e fácil certo?.
Via Sova v siti.
Tags: CSS IE IE6 Internet Explorer JavaScript
swfir – SWF Image Replacement
Por: Wednesday 28 February 2007 às 16:28
Alguns caras que trabalham com o Zeldman desenvolveram esta nova técnica que alguns gringos estão falando por ai. Eles a chamaram de swfir (pronuncía-se "suiffer"), ou SWF Image Replacement. O blá blá blá disso ainda está se espalhando enquanto todos pensam se realmente vale a pena usar Flash para contornar algumas limitações naturais do CSS ao se trabalhar com imagens. Eu particularmente não sou fã de Flash e não sei se usaria esta técnica amplamente. De qualquer maneira swfir é uma técnica criativa e interessante.
Ela utiliza CSS, JavaScript e um arquivo swf para aplicar alguns efeitos visuais em qualquer imagen do seu site. O script te fornece alguns parâmetros padrões que te permite rotacionar uma imagen, aplicar bordas arredondadas, dar certa elasticidade etc, sejam em múltiplas imagens ou apenas em uma.
O script e todo o "kit" para aplicar isso é gratuito e pode ser baixado no hotsite que os caras criaram para o swfir. Vale lembrar também que o javascript não é obstrusivo (se desabilitar o javascript do seu browser a imagem fica sem os "efeitos" da técnica) e não é necessário colocar nenhum tag <object> ou qualquer outra coisa relacionada a embedar flash em uma página, tudo é feito pelo javascript.
O que mais me chamou a atenção foi o exemplo da imagem "elástica". Vá até a página de exemplo e aumente o tamanho da fonte pra ver. A imagem acompanha perfeitamente. Agora é só fazer suas próprias experiências…
Tags: CSS Flash JavaScript sfwir swf
