Category Archives: JQuery

jQuery – Plugin Limite Char

Posted on by
Reply

Desde de que comecei a utilizar jquery, venho encontrando e criando plugins que facilitam minha vida na hora de desenvolver aplicações web. Este plugin é um dos que criei e resolvi compartilhar. Outros virão, não publiquei ainda devido falta de tempo de documentá-los.

Com o jQuery Limite Char você limita facilmente o número de caracteres e ainda apresenta um contador de caracteres digitados:

Requerimentos

<script src="jquery-1.4.2.min.js" type="text/javascript"><!--mce:0--></script>
<script src="jquery.limite-char-1.0.js" type="text/javascript"><!--mce:1--></script>

Modo de utulização

$(document).ready(function(){
       $("#campo1").limit(20, "#contador1");
       $("#campo2").limit(500, "#contador2");
});

Formulário

<div id="conteudo">
 
    <label>Campo INPUT</label>
<input id="campo1" type="text" />
 
     <label>Campo TEXTAREA</label>
     <textarea id="campo2" cols="10" rows="5"></textarea></div>

Só isso!

Demonstração

Download do jQuery Limite Char (c/exemplo)

Validação CPF com Expressão Regular e jQuery

Posted on by
Reply

Abaixo segue uma função de validar CPF com poucas linhas, utilizando Expressão Regular e jQuery.

/* Valida CPF */
            function isCPF(value) {
                value = jQuery.trim(value);
                cpf = value.replace(/\.|-|\//gi,''); // elimina .(ponto), -(hifem) e /(barra)
                while(cpf.length < 11) cpf = "0"+ cpf;
                var expReg = /^0+$|^1+$|^2+$|^3+$|^4+$|^5+$|^6+$|^7+$|^8+$|^9+$/;
                var a = [];
                var b = new Number;
                var c = 11;
                for (i=0; i&lt;11; i++){
                    a[i] = cpf.charAt(i);
                    if (i < 9) b += (a[i] * --c);
                }
                if ((x = b % 11) < 2) { a[9] = 0 } else { a[9] = 11-x }
                b = 0;
                c = 11;
                for (y=0; y&lt;10; y++) b += (a[y] * c--);
                if ((x = b % 11) < 2) { a[10] = 0; } else { a[10] = 11-x; }
                if ((cpf.charAt(9) != a[9]) || (cpf.charAt(10) != a[10]) || cpf.match(expReg)) return false;
                return true;
            }

TinyTable JavaScript classificador de tabelas

Posted on by
Reply

TinyTable

Este script classificador e atualizador de tabela fácil de usar e cheia de recursos em apenas 2.5KB.
Os novos recursos incluem destaque de coluna, paginação (opcional), suporte para links, e data.
Para implementar é simples:

var sorter = new TINY.table.sorter('sorter');
sorter.head = 'head'; //header class name
sorter.asc = 'asc'; //ascending header class name
sorter.desc = 'desc'; //descending header class name
sorter.even = 'evenrow'; //even row class name
sorter.odd = 'oddrow'; //odd row class name
sorter.evensel = 'evenselected'; //selected column even class
sorter.oddsel = 'oddselected'; //selected column odd class
sorter.paginate = true (false); //toggle for pagination logic
sorter.pagesize = 15 (20); //toggle for pagination logic
sorter.currentid = 'currentpage'; //current page id
sorter.limitid = 'pagelimit'; //page limit id
sorter.init('table',1);

clique para veja um exemplo.

clique para baixar o código TinyTable


Instalando o plugin jqGrid (plugin jQuery)

Posted on by
3

Olá turma, o Gilson estava (estava pq com este post acho que resolvemos) com o seguinte problema:

Precisa ordenar dados em uma tabela, clicando no título da coluna,  usando somente javascript pois está trabalhando com ASP delegado que não oferece este tipo de recurso.

Nota: atualmente a maioria dos framework, em várias linguagens, oferece tal recurso.

Tah…. Sugiro, como solução o uso de um plugin do JQuery, o jqGrid (na imagem um exemplo dele ‘em ação’).

e neste post vamos aprender como instalar o jqGrid. é bem simples.

Primeiro passo:

Faça o download da última versão do jqGrid (atualmente a última versão estável é jQuery Grid Plugin 3.4.43.5.3).

Assim vc terá a seguinte estrutura de pastas:

  • js (pasta: onde terá todo o código javascript)
  • themes (pasta: onde estão os diferentes temas )
  • jquery.js (arquivo .js: JQuery versão 1.3.x)
  • jquery.jqGrid.js (arquivo .js: Plugin)

Depois de baixar. Descompacte a estrutura acima no seu web server (iis, para ASP; apache, para PHP e etc).

Segundo passo:

Vamos criar nosso exemplo: index.html

< !DOCTYPE html >
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.jqGrid.js"></script>
<script type="text/javascript" src="js/jqModal.js"></script>
<script type="text/javascript" src="js/jqDnR.js"></script>
<script type="text/javascript"></script>
</head>
<body> ...
</body>
</html>

E pronto!  fácimmm fácimm neh?

Bom agora vamos tentar entender o cógido para podermos modificá-lo:

Das linhas 15 a 20 são os ‘links’ dos .js e .css, não vou entrar em detalhes, pois penso que já entendam como funciona, caso tenham alguma dificuldade quanto a isso é só comentar este post que respondo.

Na linha 22 inicia a parte interessante:

jQuery(document).ready( function() { ... }

É sintáxe do jQuery, que significa: ao carregar o documento execute as instruções “<instruções>” .

Na linha abaixo:

jQuery('#list4').jqGrid({ ....

Inicializa o jqGrid, onde “#list4″ é o identificador da tabela:

 

Demais detalhes constam no código.
Na linha 42 é criado um vetor que alimentará nossa tabela.
Observe que o vetor é carregado os ‘name‘s definidos na linha colModel.

O restante está comentado no código.

Aproveitem… e comentem eventuais dúvidas.

Um abraço a todos.!

Plugin JQuery - jqGrig

Atualizado em 21 de setembro de 2010.