Mas hoje venho falar de uma possibilidade muito interessante que mais uma vez devo a  dica ao Ricardo Tomasi, que é a customização de expressões.
Uma rápida pesquisa no Google e voces encontraram varios posts espalhados pelo mundo falando a respeito.
Customizar uma expressão consiste em incorporar ao jQuery um método que ele não possui nativamente.

Mas porque diabos fazer isso?
Acreditem, pode ser bem útil.

No curso de jQuery que estou ministrando na Target Trust, ontem bolei um exercício simples para os alunos:

“Mude a cor de fundo de todas as TD’s com indice ímpar da tabela com id tabela2″

Sacaram a ideia?
Simples. O que eu queria, é que eles fizessem da maneira deles, usando um loop, verificando o mod do indice e assim aplicar o css no elemento, para então depois apresentar o seletor odd que faz exatamente isso, só que em uma linha.

$(“table td:odd”).css(“background-color”, “#bbbbff”);

Tudo tranquilo, mas um dos alunos muito antenado achou o seletor e resolveu o problema facilmente!
Então mudei a estratégia, e pedi para ele implementar um algoritmo que apenas aplicasse o estilo nas TD’s com indice que fosse número primo.
Novamente o aluno conseguiu.
Foi ai que lembrei da possibilidade de customização das expressões!
Fiz a proposta para o aluno: Se tu conseguir criar uma expressão customizada que retorne elementos baseando-se nos numeros primos terá um post no meu blog!
Então ai esta. Abaixo segue o código implementado pelo aluno Andre Pinto da turma de jQuery Maio/2010:

jQuery.extend( jQuery.expr[':'], {
	prime: function(a, index){
		function isPrime(num){
			var numHalf = num / 2, counter, divCheck;
				if (num === 2){
					return true;
				}
				if (num < 2 || numHalf === Math.floor(numHalf) ||
                                   num !== Math.floor(num)){
					return false;
				}else{
					for (counter = 3; counter <= Math.sqrt(num);
                                              counter += 2){
						divCheck = num / counter;
						if (divCheck === Math.floor(divCheck)) {
							return false;
						}
					}
				return true;
			       }
		}
           return isPrime(index);
     }
});

Para usar a expressão:

$('#tabela2 td:prime').css( { 'background-color' : 'red' } );

Parabéns ao André pela implementação.

Juntamente com o Felipe Nascimento, palestrei na Target Trust (empresa de TI especializada em treinamentos aqui em Porto Alegre)  nesta terça-feira(17/11/2009) sobre a biblioteca jQuery.
O objetivo da palestra foi introduzir o jQuery de maneira que os ouvintes pudessem compreender o poder da biblioteca e do Javascript em si.
Quem teve a oportunidade de acompanhar a palestra conheceu um pouco da história do jQuery, sua origem e também ver as inúmeras possibilidades e funcionalidades.

Abaixo então seguem os slides:

A palestra conta um pouco da história do Javascript, explicando o porque do prefixo JAVA no nome da linguagem entre outros detalhes.
A palestra foca muito no desenvolvimento de Javascript profissional, como sugere o nome.

Espero que todos aproveitem. E qualquer dúvida, comentem ai.

Para quem assistiu a palestra e para quem não assistiu também, segue abaixo o link dos códigos utilizados:

http://jaydson.org/code/palestras/js-levado-a-serio/source.rar

Nota: Percebam que é somente no IE que isso acontece. Abaixo segue a lista de Browsers que suportam o evento change no Formulário:

Outra Nota: No IE o evento change também não é disparado nos objetos window e document. Em todos da lista acima sim.
Para o Internet Explorer o único elemento que dispara o evento change corretamente  é o <input>.

Solução:
Como o projeto estava utilizando jQuery foi simples resolver mais um problema no IE. Segue o código abaixo:

$("form *").bind("change", function(){ /* Código aqui*/});

O código acima varre todos elementos do formulário e “atacha” o evento change para cada um deles.

Bom, é isso.
Trabalhando e aprendendo.

Vamos a um exemplo simples de uma requisição Ajax:

$.ajax({
type: "POST",
url: "teste.php",
success: function(retorno){
alert(retorno);
}
});

Neste exemplo fazemos uma requisição Ajax e no sucesso damos um alerta do conteúdo retornado.
Mas e se der algum tipo de erro?
Vai de aplicação para aplicação, mas dependendo do caso podemos querer capturar o erro e fazer algum tratamento, ou simplesmente mostrar o erro.
Vamos agora ver um exemplo capturando o erro:

$.ajax({
type: "POST",
url: "teste.php",
success: function(retorno){
alert(retorno);
},
error: function(XMLHttpRequest, textStatus, errorThrown){
alert("Erro!");
}
});

Agora capturamos o erro e damos um alerta de erro caso ocorra falha na requisição.
Agora para ficar pouco mais útil, vamos ver as propriedades e métodos do objeto XMLHttpRequest.
Basta fazer um “for in” no objeto que conseguimos pegar todas suas propriedades. Abaixo listo algumas:

dispatchEvent()
removeEventListener()
open()
setRequestHeader()
send()
readyState
status
channel
responseXML
responseText
statusText
abort()
getAllResponseHeaders()
getResponseHeader()

Caso queiram fazer o teste e varrer o objeto e ver suas propriedades:

for(i in XMLHttpRequest){
if(i!="channel")
document.write(i +" : " + XMLHttpRequest[i] +"<br>")
}

OBS:
Este filtro testando se a propriedade é “channel” é necessário, pois o browser gera uma exceção de permissão negada para ler essa propriedade.

Bom, com isso já da pra ter uma boa noção sobre como capturar erros Ajax, agora o que fazer com eles é com vocês.
Usei bastante esta técnica na manipulação de Ajax no projeto TheWebMind.org, e em alguns outros sistemas.
Estou preparando um plugin para o jQuery que auxiliará bastante.
Segue uma prévia do que já implementei abaixo:

error: function(XMLHttpRequest, textStatus, errorThrown){
$(XMLHttpRequest).AjaxDebug({
containerId : 'load',
nativeConsole : false
});
}

A idéia é fornecer um console que mostre estas informações, ou passar as informações para um determinado elemento.
Em breve posto aqui quando estiver pronto!

E claro, não vamos esquecer do Firebug que é um excelente debugador para Ajax também.

Exemplo:

Check1

Bom, agora imaginem que esta lista é um pouco maior. Fica extremamente desagradável ter que marcar ou desmarcar um a um.
Uma boa prática é colocar uma opção para o usuário marcar ou desmarcar todos.

Isso é uma tarefa bem fácil de se implementar em Javascript “puro”, mas o jQuery como sempre nos da aquela ajuda.

Solução:

// Atribuímos a variavel ipts todos os inputs encontrados dentro do elemento "#checkboxes"
var ipts = $("#checkboxes").find("input");

function checkAll()
{
// CheckBox que ao ser clicado marca ou desmarca todos elementos
var check = document.getElementById("checkboxCheckAll");

// Testamos o CheckBox para ver se devemos marcar ou desmarcar
check.checked ?
jQuery.each(ipts, function(){
// Se esta "checado" então marcamos todos elementos como checked=true
this.checked = true;
}) :
jQuery.each(ipts, function(){
// Se não esta "checado" então marcamos todos elementos como checked=false
this.checked = false;
});
}

Simples e rápido.

Testei com mais de 50 elementos e a rotina não ultrapassou 2 milisegundos.

Hoje vim falar sobre um dos métodos que acho bem interessante no Jquery, o serialize().
Como o próprio nome já diz, esse método serializa um conjunto de inputs de um formulário em uma string.
Essa string é padronizada e compatível com  a maioria das linguagens server-side.
Isso é muito útil por exemplo quando queremos enviar uma série de dados para o servidor com Ajax.

Como fazer?

Bom, começamos criando o formulário:

<form action="minha_pagina.php" id="meu_formulario">
<input type="text" name="input_1">
<input type="text" name="input_2">
<input type="text" name="input_3">
</form>

Note que criamos um formulário de maneira tradicional, porém omitimos o atributo method na tag <form>, pois esse será tratado mais adiante.

Bom, e agora como Serializar?

Com uma linha o Jquery permite que façamos isso, vamos ao exemplo:

var formdata = $("#meu_formulario").serialize();

Agora a variável formdata é uma string serializada mais ou menos como essa:

input_1=valor1&input_2=valor2&input_3=valor3

A string fica com esse formato de chave/valor concatenadas com “&”.
Agora que temos a string, basta passa-la para o servidor. Como fazer isso? De maneira bem simples com o método Ajax() do Jquery:

$.ajax({
type: "POST",
url: form.attr('action'),
data: formdata,
success: function(msg){
alert('Sucesso!');
}
});

Lembram que omitimos o atributo method do form?
Fizemos isso porque estamos fazendo um requisição Ajax usando o método Post, de qualquer maneira ele seria ignorado em nosso exemplo.

Vamos ao Ajax:
type – Especifica o método de como os dados serão enviados ao servidor. Em nosso exemplo estamos usando POST.
url -  Especifica para qual a página os dados serão submetidos. No nosso exemplo estou pegando o atributo action do formulario, o que fará com que os dados sejam submetidos para o arquivo minha_pagina.php.
data – Os dados que serão submetidos. A string serializada é passada aqui.
success – Função que será executada quando obtivermos sucesso. No exemplo, um alerta.

Pronto!

Criamos um formulário, serializamos todos os inputs em uma string, enviamos todos os dados para um página PHP via Ajax.
Simples não?

Por hoje é isso.

Qualquer dúvida postem ai.

O que vou abordar neste Post é um plugin muito bom desenvolvido pelo Brandon Aaron.
Pra quem não conhece, esse cara mora lá pelas bandas do Texas e é um dos principais membros do time de desenvolvedores do Jquery.

A idéia básica do plugin é criar um efeito de Gradient(vai de uma cor para outra) em um elemento HTML. Isso mesmo! Nada de Photoshop. \O/
O que precisamos:  obviamente o Jquery, e o plugin Gradient.

Mas dessa vez vou um pouco mais além…
O plugin nos permite especificar o código RGB inicial, o o código RGB final e ainda a direção do Gradient(vertical ou horizontal).
Vamos ver o código pra entender melhor:

$('#meu_elemento').gradient({
from:      'ffffff',
to:        '000000',
direction: 'vertical';
});

Neste exemplo o efeito Gradient será aplicado no elemento com o ID meu_elemento, começando de branco e indo até preto com direção vertical.
Simples !

Bom, mas como eu disse acima, vamos um pouco mais além.  Se precisamos passar valores RGB para o plugin, então quem sabe podemos usar um outro plugin bem conhecido e muito bom também, o Color Picker.
Preparei um script onde uso as funcionalidades dos  2 plugins. Vejam abaixo como ficou. E novamente vejam o poder do Javascript:

Veja aqui o exemplo: http://jaydson.org/code/jquery/plugins/gradient/index.html

Espero que tenham gostado e que seja útil para alguma Aplicação de vocês.
Qualquer dúvida comentem ai.
Abraço, e até a próxima.

Minha Avaliação: Nota 8.0
Compatibilidade: Firefox 2.0+, IE 6+, Safari 3.0+, Chrome 2.0+

Site oficial do Plugin: http://brandonaaron.net/code

Download

Vamos ver como fica o código:

<script type="text/javascript">
     $(document).ready(function () {
         $(".home").click(function () {
              $("#flipBox").flip({
                   direction: 'bt',
                  color: 'blue',
                  speed: 400,
                  content: ""
            });
       });
      $(".home").trigger("click");
});
</script>

Simples não?

No click do elemento com a classe “home”  invocamos o método flip() que aplica esse efeito no elemento com Id “flipBox”.
Obs: $(“.home”).trigger(“click”) só faz com que a animação aconteça no load da página.
Aqueles parâmetros são interessantes:

• direction: Especifica em que direção vai ser o giro. Os valores suportados são ‘tb’, ‘bt’, ‘lr’, ‘rl’
• color: Define que cor de fundo o elemento terá após o giro.
• speed: A velocidade da animação
• content: O conteúdo que esse elemento terá após o giro.

Fora essas opções, ainda existem funções que podemos executar em algum evento do giro, como por exemplo:

• onBefore:  Essa função é executada antes da animação começar.
• onAnimation: Essa função é executada na metade da animação.
• onEnd: Essa função é executada quando a animação termina.

Com esses eventos e opções podemos fazer muita coisa. A opção content por exemplo permite que seja passado um conteúdo que será exibido no elemento após a animação, então nada nos impede de carregar um conteúdo com Ajax e jogar dentro desse elemento. O céu é o limite.

Vejam o resultado:

Minha Avaliação: Nota 10.0
Compatibilidade: Firefox 2.0+, IE 6+, Safari 3.0+, Chrome 2.0+,Opera

Site oficial do Plugin: http://lab.smashup.it/flip/

Download

O exemplo que preparei é bem simples, mas mostra o poder deste plugin(um dos melhores que já usei).
O que vamos fazer é um script PHP que retorne os Posts aqui do Blog. Segue o código abaixo do arquivo search.php:

<?php
$items = array(
'Text Area Resizer - JQuery Plugin'=>'1',
'Text Limiter - Jquery Plugin'=>'2',
'Plugins Jquery'=>'3',
'theWebMind.org'=>'4',
'Hacks CSS'=>'5',
'Json'=>'6',
'PHP - Problema ao carregar a DLL php_pgsql.dll'=>'7',
'RichBlocks - Um Framework Para Implantar Interfaces RIA em Sistemas Web'=>'8',
'PHP Classes'=>'9',
'RIA - Aplicacoes Ricas para Internet'=>'10',
'Campanha Atualize o seu Navegador'=>'11',
'Internet Explorer 8'=>'12',
'Projeto PHP Counter'=>'13',
'Jquery'=>'14'
);

foreach ($items as $key=>$value){
echo "$key|$value\n";
}
?>

Note que neste código eu montei “na mão” um array de Posts. Mas nada me impediria de ter feito uma consulta no banco de dados e ter montado o array dinâmicamente. Isso serve para qualquer situação.
Bom, já temos os dados que precisamos para popular o campo de Autocomplete.
Basta criar um campo do tipo <input> com uma ID especifica. No meu ficou assim:

<body>
<p>
<label style="font-family:verdana;
font-weight:bold;
font-size:18px;">
Posts Jaydson.org:
</label>
<br>
<input style="width:300px;" type="text" id="posts" />
</p>
</body>

Agora que já temos o HTML, vamos implementar o Plugin.
O que deve ser feito é informar qual <input> será capaz de se autocompletar, desta forma:

<script type="text/javascript">
$().ready(function() {

$("#posts").autocomplete("search.php", {
width: 440,
scrollHeight: 220,
selectFirst: true
});
})
</script>

Desta maneira, o <input id=”posts”> receberá o conteúdo da página PHP que criamos anteriormente.

Nota: O Plugin ainda possui uma série de opções que podem ser especificadas além de width, scrollHeight e selectFirst .

Veja o resultado:

Minha Avaliação: Nota 10.0
Compatibilidade: Firefox 2.0+, IE 6+, Safari 3.0+, Chrome 2.0+

Site oficial do Plugin: http://docs.jquery.com/Plugins/Autocomplete

Download