jQuery UI

Publicado em Publicado por gserrano

Fazem algumas semanas que resolvi utilizar um plugin jQuery (não lembro qual) que utilizava a jQuery UI, um framework com diversas classes prontas para trabalhar com jQUery, uma verdadeira mão na roda!

Como utilizei apenas o plugin pronto, fiz as alterações necessárias mas não havia realmente trabalhando com o framework. Em um projeto recente em que estou trabalhando, fui procurar uma nova forma de fazer uma navegação com accordion (já havia utilizado um plugin eficiente de jQuery anteriormente) e encontrei novamente com o jQuery UI.

Deixei a preguiça de lado e fui verificar como funcionava o jQuery UI, gostei bastante! Apesar de estar apenas iniciando os estudos pareceu bem fácil de utilizar. 

 

jQuery UI CSS Framework

Essa foi a única parte que até o momento eu realmente utilize, um completo framework CSS que permite personalização fácil e vem com muitas, MUITAS classes prontas.

No site do jQuery UI existe um gerador de tema, que permite configurar o seu framework de CSS de forma rápida:

Theme Generator (clique para ampliar)

O gerador de temas gera um framework CSS, que facilita no desenvolvimento com o restante dos utilitários.

Existem diversas classes prontas, para:

  • Bordas arredondadas
  • Overlay ("cobrir" parte da página para destacar determinado conteúdo)
  • Interação (hover, focus, etc.)
  • Exibição de erro
  • Highlight
  • Elemento desabilitado

E mais algumas, que ainda não explorei… 🙂

Falar de CSS me embrou de uma idéia interessante, que instiga algumas boas práticas no desenvlvimento das folhas de estilos: CSS orientado a objetos

 Ah, a parte de 

Interação

Além das facilidades na parte do CSS o framework facilita muito a criação de efeitos de interação.

  • Draggable
  • Droppable
  • Resizable
  • Selectable
  • Sortable

O melhor de tudo é a simplicidade com a qual funciona tudo, por exemplo para criar um elemento que possa ser arrastado, com apenas uma linha isto é feito:

$("#draggable").draggable();

Para os outros comandos a facilidade é a mesma. Isso associado aos diversos estilos dos temas pode acelerar muito o desenvolvimento de interfaces amigáveis!

 

Widgets

Mais facilidades com pouco código, existem algumas ferramentas prontas como:

 

  • Accordion
  • Datepicker
  • Dialog
  • Progressbar
  • Slider
  • Tabs

Testei o accordion, as personalizações possíveis são bacanas! Nos testes que fiz do accordion o funcionamento foi bom em IE (inclusive o 6 – exceto com listas de conteúdo), FF (perfeito) e Chrome (perfeito).

 

Animação

Os comando apra animação com o jQuery são bastante evoluídos e permitem fazer muita coisa, mas para efeitos padrão de interface o framework de user interface facilita com alguns efeitos prontos e bastante customizaveis:

  • Effect
  • Show
  • Hide
  • Toggle
  • Color animation
  • Add class
  • Remove class

 

 

Escrevi o post como uma introdução e estímulo aos usuários da biblioteca jQuery para estudar e utilizar a jQuery UI e facilitar ainda mais a vida!

Validação de CPF por javascript

Publicado em Publicado por gserrano

Depois de testar várias funções, encontrei uma – na verdade, encontraram e me encaminharam – que parece funcionar corretamente, pois o que mais acontecia era funcionar com uns, e com outros não, aí trocava a função e parava de funcionar com alguns mas com outros começava a rolar.

function ValidarCPF(Objcpf){
    var cpf = Objcpf.value;
    exp = /.|-/g
    cpf = cpf.toString().replace( exp, "" );
    var digitoDigitado = eval(cpf.charAt(9)+cpf.charAt(10));
    var soma1=0, soma2=0;
    var vlr =11;
    for(i=0;i<9;i++){
        soma1+=eval(cpf.charAt(i)*(vlr-1));
        soma2+=eval(cpf.charAt(i)*vlr);
        vlr–;
    }   
    soma1 = (((soma1*10)%11)==10 ? 0:((soma1*10)%11));
    soma2 = (((soma2+(2*soma1))*10)%11);
   
    if(cpf == "11111111111" || cpf == "22222222222" || cpf ==
"33333333333" || cpf == "44444444444" || cpf == "55555555555" || cpf ==
"66666666666" || cpf == "77777777777" || cpf == "88888888888" || cpf ==
"99999999999" || cpf == "00000000000" ){
        var digitoGerado = null;
    }else{
        var digitoGerado = (soma1*10) + soma2;
    }

    if(digitoGerado != digitoDigitado){
       return false;
    }
    return true;
}

Como usar o confirm() no javascript

Publicado em Publicado por gserrano

Muitas vezes é necessário interagir com o visitante que está no seu site, e a forma mais trivial é usar o comando confirm() do javascript para isso.

Com ele você pode parar o fluxo que está acontecendo exibindo uma caixa de diálogo – na qual a mensagem exibida é passada como parâmetro para esse comando – na qual o usuário tem a opção de escolher entre Sim e Não (ou Ok e Cancelar, dependendo do browser). Quando o usuário faz a seleção, o comando retorna true ou false, o que possibilita que o fluxo seja alterado.

Um exemplo de uso:

if(confirm("Deseja realmente fazer isso?")) {
  //faz algo, como chamar uma função que apaga dados
} else {
  alert("Ok, você não quer mesmo fazer isso…");
}

Simples e prático!

Usando o comando eval()

Publicado em Publicado por gserrano

Javascript não é uma linguagem tipada. Disso já sabemos. Então, muitas vezes, as coisas não funcionam exatamente como esperamos.

Um caso que acontece muito pode ser simulado nesse exemplo que segue: um formulário com dois campos e uma rotina que executa a soma dos valores dos dois campos:

<!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 de soma</title>
<script type="application/javascript">
    window.onload = function() {
        document.getElementById("calcular").onclick = function() {
            var val1 = document.getElementById("campo1").value;
            var val2 = document.getElementById("campo2").value;
            alert(val1 + val2);
        }
    }
</script>
</head>
<body>
<h1>Soma – exemplo</h1>
<form action="#" method="post">
    <label for="campo1">campo 1:</label><input type="text" id="campo1" />
    <label for="campo1">campo 2:</label><input type="text" id="campo2" />
    <input type="button" id="calcular" value="calcular" />
</form>
</body>
</html>

Faça um teste preenchendo os inputs com valores numéricos, e clique no botão de calcular. Se você preencher com, por exemplo, 5 e 3, ao clicar no botão terá um alert() com o valor 53.
O que aconteceu? O interpretador do javascript entende que são strings (textos), e a soma que ele faz é, na verdade, uma concatenação das strings.

Como resolver isso?

Existe um comando nativo do javascript, eval(param), que recebe um parâmetro e o interpreta. Mude a linha que faz a soma para

alert(eval(val1) + eval(val2));

E você verá que a soma, que antes era uma concatenação, vai ser feita da forma esperada: somando realmente os valores.

Mas, fica o alerta: usar o comando eval() deve sempre ser muito bem analisado se vale a pena. Uma vez que ele interpreta qualquer comando que está em uma string, você acaba abrindo o seu código para ser executado por terceiros.

Num próximo post mostro como fazer essa soma de uma forma mais elegante!

Como imprimir aspas no Javascript

Publicado em Publicado por gserrano

Esta semana eu liberei novamente a Vitrine Fácil Buscapé, que permite a criação e gerenciamento de Vitrines personalizadas para o programa de afiliado Buscapé. Quando estava liberando a aplicação em beta tive problemas para implementar um sistema de rastreamento de clicks.

Muito bem, voltando ao assunto vou explicar o contexto do meu problema, eu tinha um link que era impresso em Javascript, e precisava adicionar o atributo onClick nele, que ficaria no resultado final assim:

onClick="funcao(´var1´,´var2´)"

Mas no Javascript, se eu fosse usar um document.write ou qualquer outro método de alguma biblioteca (jQuery, no meu caso) quando eu utilizasse a aspa simples automaticamente estaria fechando a string (não sei se string é o correto para o que eu quero definir, sorry) do Javascript, ou seja, estaria "cortando" a minha linha que seria exibida no código pela metade.

Uma pesquisa rápida em fóruns e encontrei a solução: você precisa utilizar uma barra invertida (lembrouexpressões regulares, utiliza a barra para transformar o próximo caracter em "normal"), então ficaria assim no Javascript:

document.write("onClick="funcao(´var1´,´var2´)" ")

Antes das duas aspas VERMELHAS você deve inserir uma barra invertida, não consegui exibir ela aqui pois o sistema de publicação "engole" as barras (depois irei verificar).

Utilizei o document.write apenas como exemplo da possibilidade de uso, no meu caso utilizei as barras invertidas em um $("#link123").html("onClick….") sem problema nenhum.

 

Uma dica simples que para quem trabalha com Javascript não deve ser novidade, mas lembro de ter tido problemas com isso em um passado distante, como tive o mesmo problema agora resolvi fazer o post para ajudar quem pode precisar (e evitar ter que googlear novamente este mesmo problema).

 

Dúvidas, dicas e críticas nos comentários 🙂