Enfrentei este problema em um projeto recente que necessitava que o histórico funcionasse. Para facilitar um pouco minha vida criei um plugin(meu primeiro plugin) para JQuery que venho humildemente disponibilizar aqui.

Para utilizá-lo é muito simples, funciona como a função load já disponibilizada pela JQuery.

1
2
3
4
5
6
7
8
9
10
11

  <script src="jquery.js"></script>
  <script src="jquery.historyAjax.js"></script>
  <script>
    $(document).ready( function() {
        $('a').click(function(){
            $('#conteudo').historyLoad( $(this).attr('href') );
            return false;
        });
 
    });
</script>

Ela carrega uma URL passada por parâmetro dentro do elemento selecionado. E gera um evento de histórico possibilitando o uso do voltar e avançar.

Para ver um exemplo de utilização clique aqui

Para baixá-la clique aqui.

O plugin é bem simples, se alguém quiser modificá-lo(corrigir possíveis bugs) e acrescentar mais funcionalidades peço que me mande a nova versão para disponibilozar aqui.

É um formato de dados fácil de escrever e ler por seres humanos e é bastante fácil de ser interpretado por computadores, sendo possível converte-lo facilmente para a notação de objetos JavaScript, o que o torna um boa opção para AJAX, principalmente quando necessitamos processar de alguma forma os dados buscados via AJAX.

Vejamos um exemplo do formato JSON:

1
2
3
4
5
6

{
"nome": "Rodrigo",
"sobrenome": "Aramburu",
"idade":"25",
"site":"http://www.botecodigital.info"
}

O formato é bem simples, um objeto é formado de vários membros dentro de chaves. Um membro é formado de uma string que será o nome da variável e um valor que pode ser: string, numérico, lógico, um array ou um outro objeto.

Vejamos um exemplo um pouco mais complexo:

1
2
3
4
5
6
7
8

{
    "nome":"Loja Exemplo",
    "produtos":[
                {"nome":"Monitor LCD","preco":350},
                {"nome":"Gravador de DVD","preco":120},
                {"nome":"Pendrive","preco":60},
               ]
}

Neste objeto temos 2 membros: nome que é tem um valor string e produtos que é um array de outros objetos que possuem dois membros: nome e preco.

Podemos interpretar o formato JSON utilizando uma função da biblioteca JQuery – jQuery.parseJSON – ela recebe o documento JSON como parâmetro e devolve um objeto JavaScript com os valores.

Exemplo:

1
2
3
4
5
6
7

var dados = '{"nome": "Rodrigo","sobrenome": "Aramburu","idade":"25","site":"http://www.botecodigital.info"}';
var obj = jQuery.parseJSON(dados);
 
alert(obj.nome);
alert(obj.sobrenome);
alert(obj.idade);
alert(obj.site);

Bastante simples! Deve ser mostrado em janela de alert as palavras “Rodrigo”, “Aramburu”, “25″ e “http://www.botecodigital.info”. Como podemos notar isto torna muito fácil manipular uma série de valores contidos dentro de uma string ou arquivo arquivo.

Mais um exemplo para reforçar:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

var dados  = '{ ';
    dados += '"nome":"Loja Exemplo",';
    dados += ' "produtos":[';
    dados += '       {"nome":"Monitor LCD","preco":350},';
    dados += '       {"nome":"Gravador de DVD","preco":120},';
    dados += '       {"nome":"Pendrive","preco":60}';
    dados += '    ]';
    dados += '}';
var obj = jQuery.parseJSON(dados);
 
alert( obj.nome);
alert( obj.produtos[0].nome );
alert( obj.produtos[0].preco );
alert( obj.produtos[1].nome );
alert( obj.produtos[1].preco );

Agora vamos ver a real vantagem de utilizar JSON que é utilizá-lo para fazer AJAX e para isso a biblioteca JQuery nos fornece uma função chamada $.getJSON.

Exemplo:

1
2
3
4
5
6
7
8

        $(document).ready(function(){
              $.getJSON('dados.json', function(data) {
                   $('#nome').html( data.nome);
                   $('#sobrenome').html( data.sobrenome );
                   $('#idade').html( data.idade );
                   $('#site').html( data.site );
             });
    });

A função $.getJSON recebe como parâmetros um nome de arquivo com dados no formato JSON, após o arquivo ser carregado ele é convertido em um objeto e passado por parâmetro(data) para a função que é responsável por manipular os valores.

Veja o exemplo de uso de JSON

Esta funcionalidade pode também ser aplicada a um texto com vários tópicos ficando disponível os titulos e quando clicado mostra somente o texto do tópico. Este recurso é muito interessante quando temos um texto grande dividido em tópicos, pois não deixa a página muito longa.

Nesta implementação vamos utilizar uma lista de definições ( dl – dt- dd ) então segue abaixo o HTML do menu:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

<dl>
    <dt><a href="#">Menu 1</li></a></dt>
    <dd>
        <ul>
            <li><a href="#">Menu 1 - Item 1</a></li>
            <li><a href="#">Menu 1 - Item 2</a></li>
            <li><a href="#">Menu 1 - Item 3</a></li>
        </ul>
    </dd>
    <dt><a href="#">Menu 2</li></a></dt>
    <dd>
        <ul>
            <li><a href="#">Menu 2 - Item 1</a></li>
            <li><a href="#">Menu 2 - Item 2</a></li>
            <li><a href="#">Menu 2 - Item 3</a></li>
        </ul>
    </dd>
    <dt><a href="#">Menu 3</li></a></dt>
    <dd>
        <ul>
            <li><a href="#">Menu 3 - Item 1</a></li>
            <li><a href="#">Menu 3 - Item 2</a></li>
            <li><a href="#">Menu 3 - Item 3</a></li>
        </ul>
    </dd>
</dl>

Agora aplicamos um CSS:

1
2
3
4
5
6

     dl { width: 300px; }
     dl,dd { margin: 0; }
     dt { background: #CCC; font-size: 18px; padding: 5px; margin: 2px; }
     dt a { color: #000; }
     dd a { color: #000; }
     ul { list-style: none; padding: 5px; }

Agora vamos a mágica com a biblioteca JQuery(Não se esqueça de importar a biblioteca!):

1
2
3
4
5
6
7
8

 $(document).ready(function(){
     $("dd").hide();
     $("dt a").click(function(){
        $("dd:visible").slideUp("slow");
        $(this).parent().next().slideDown("slow");
        return false;
     });
});

Na linha 1 escondemos todos os elementos dd(as definições ou seja os sub-links) as ficando somente os dl (os titulos das categorias/tópicos) a mostra.

Na linha 3 definimos o evento onclick do link do elemento dt titulo para que faça a animação slideUP()(linha 4) no elemento dd que está visível ocultando os sub-links.

Na linha 5 através do método parent() seleciona o elemento pai do link clicado(o elemento dt) e através do método next() seleciona o próximo elemento a partir do elemento dt que contém o link clicado, que é o elementodd e chama o método slideDown(“slow”); que mostra os sub-links.

Veja o exemplo

Espero que seja util, até a próxima!

Para começarmos termos que ter os estados e as cidades armazenadas no banco de dados que podem ser obtidas a partir do site. Para ficar mais claro colocarei as DDL abaixo.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

CREATE TABLE tb_estados(
  id int(2) UNSIGNED ZEROFILL NOT NULL AUTO_INCREMENT,
  uf varchar(10) NOT NULL DEFAULT '',
  nome varchar(20) NOT NULL DEFAULT '',
  PRIMARY KEY  (`id`)
);
 
CREATE TABLE tb_cidades (
  id int(4) UNSIGNED ZEROFILL NOT NULL AUTO_INCREMENT,
  estado int(2) UNSIGNED ZEROFILL NOT NULL DEFAULT '00',
  uf varchar(4) NOT NULL DEFAULT '',
  nome varchar(50) NOT NULL DEFAULT '',
  UNIQUE KEY id (id),
  KEY id_2 (`id`)
);

Agora que já temos as tabelas em nosso banco MySQL criamos uma página com os dois ComboBox com o dos estados já preenchido, para isto realizamos uma consulta ao banco de dados MySQL para preenche-lo.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<select name="estados" id="estados">
    <?php
        mysql_connect('localhost','root','********');
        mysql_selectdb('combobox');
 
       $result = mysql_query("select * from tb_estados");
 
       while($row = mysql_fetch_array($result) ){
            echo "<option value='".$row['id']."'>".$row['nome']."</option>";
 
       }
 
    ?>
</select>
 
<select name="cidades" id="cidades">
    <option value="0">Escolha um estado</option>
</select>

Na linha 3 conectamos no banco através da função mysql_connect() passando o host que esta o banco de dados, o usuário e a senha de acesso ao banco. NA linha 4 selecionamos o banco de dados que queremos utilizar com a função mysql_selectdb().

Na linha 6 utilizamos a função mysql_query() para realizar uma consulta ao banco de dados para trazer todos os estados.

Na linha 8 utilizamos a função mysql_fetch_array() para acessar uma linha da nossa consulta e armazená-la na variável $row. A função mysql_fetch_array() retorna a linha da consulta em formato de array, sendo que cada índice do array é o nome da coluna em que o valor está.

Na linha 9 montamos as opções do nosso select.

Bom agora com nossa página pronta podemos inserir o código javascript(AJAX) para executar a consulta quando selecionarmos o estado. O código utiliza a biblioteca JQuery então não esqueça de carregá-la antes de inserir o código.

1
2
3
4
5

        $(document).ready(function(){
            $('#estados').change(function(){
                $('#cidades').load('cidades.php?estado='+$('#estados').val() );
            });
        });

Na linha 2 selecionamos o elemento com o id estados(o primeiro select), e adicionamos o evento onChange que é acionado quando ele muda de valor. Quando este evento for acionado(linha 3) ele vai selecionar o select com o id cidades fazer uma consulta AJAX a página cidade.php passando por parâmetro GET o id do estado que foi selecionado no select de estados. O retorno desta consulta será inserido dentro do select prenechendo as opções de cidades.

Bom agora que já temos um código javascript que faz uma requisição a uma página devemos criar esta página

Lembrando que o retorno desta página vai preencher nosso select, então ela deve retornar tags option certo!

1
2
3
4
5
6
7
8
9

<?php
$idestado = $_GET['estado'];
mysql_connect('localhost','root','******');
mysql_selectdb('combobox');
$result = mysql_query("SELECT * FROM tb_cidades WHERE estado = ".$idestado);
while($row = mysql_fetch_array($result) ){
    echo "<option value='".$row['id']."'>".$row['nome']."</option>";
}
?>

O código é bem parecido com o anterior onde preenchemos o select estados, só que desta fez utilizaremos uma consulta com um cláusula WHERE onde selecionamos somente as cidade que tiverem o estado igual ao que foi passado por parâmetro GET e que recebemos na linha 2.

O download do exemplo pode ser feito aqui

Bom este exemplo é bem simples, é possível fazer muito mais coisas com JQuery e AJAX basta ter criatividade.

Até a próxima!

Bom para começar baixe o PrettyPhoto 2.4.3 e descomacte em uma pasta. Ele é divido em 3 pastas css, js e images, para usalo você vai precisar das 3.

Crie um novo documento HTML e inclua na tag header a bilbioteca JQuery, o plugin que esta na pasta js, a folha de estilo que esta na pasta css:

1
2
3

<script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.js"></script>
<script src="js/jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="css/prettyPhoto.css" type="text/css" charset="utf-8" />

Agora para criarmos a nossa galeria vamos precisar das fotos e das suas miniaturas, para nosso exemplo vamos armazena-la em uma pasta chamada img.

Para cada imagem vamos criar um link para imagem grande que quando clicado vai abri-la em nossoo lightbox.

1
2
3

<a href="img/foto1-g.jpg" rel="prettyPhoto">
   <img src="img/foto1-p.jpg" alt="Foto do Espaço 1" />
</a>

O atributo rel=”prettyPhoto” é utilizado para selecionar os links que devem fazer parte de nossa galeria e para isso deve ser aplicado o plugin PrettyPhoto que será responsavel por abrir a imagem que esta no atributo href de nosso link no lightbox.

Para aplicar o plugin nos links acrescentamos na tag header o seguinte código:

1
2
3
4
5

<script type="text/javascript" charset="utf-8">
    $(document).ready(function(){
	    $("a[rel^='prettyPhoto']").prettyPhoto();
	});
</script>

Exemplo de galeria feita com PrettyPhoto.

Bem simples não?

Existem muitos Plugins para JQuery com as mais variadas funções, então não tente reinventar a roda todo dia, apenas procure uma que sirva no seu caminhão.

Aquele Abraço.

Para começar vamos esclarecer que AJAX não é uma tecnologia e sim uma metodologia que utiliza tecnologias não tão novas assim como XML e Javascript para fazer requisições assíncronas ao servidor e com as informações retornadas modificar a página já carregada utilizando DOM para modificar-la sem recarregar todo conteúdo novamente. E com isso economizar no tráfego de internet e melhorar a experiência do usuário.

Primeiramente vejamos como uma página simples é carregada.

1 . O usuário digita um URL no campo endereço aperta enter e o navegador envia uma requisição normalmente do tipo GET para o servidor que retorna para o navegador o conteúdo que é exibido.

2. O usuário clica em um link da página então o navegador faz outra requisição ao servidor que envia todo o conteúdo da nova página novamente.

Se pensarmos um pouco, muito conteúdo é repetido é baixado quando navegamos entre as página de um mesmo site, como topo, menus, rodapés etc.

Com base nisso, porque não carregar somente o conteúdo que mudou a cada requisição, sem mexer no resto do conteúdo da página? Isto é a base do AJAX.

Quando começou a ser utilizado a o retorno do servidor era feito em XML (por isso o X da sigla) mas com o passar do tempo passou a se chamar AJAX toda requisição assíncrona ao servidor Web.

Bom para entendermos como fazer uma requisição assíncrona precisamos conhecer 2 tipos de requisição que o protocolo HTTP aceita:

GET: É o método mais comum: solicita algum recurso como um arquivo ou um script (qualquer dado que estiver identificado pelo URI) por meio do protocolo HTTP. O método GET é reconhecido por todos os servidores.

POST: Envia dados para serem processados (por exemplo, dados de um formulário HTML) para o recurso especificado. Os dados são incluídos no corpo do comando.

Bom vamos agora ver um pequeno exemplo de como fazer requisições assíncronas e carregar o conteúdo dentro de um div utilizando a JQuery.

HTML Principal

<div id="carregando">Carregando</div>
 
<h1>Cabeçalho</h1>
 
<a href="conteudo1.php">Conteudo 1</a>
<a href="conteudo2.php">Conteudo 2</a>
<a href="conteudo3.php">Conteudo 3</a>
<a href="conteudo4.php">Conteudo 4</a>
 
<div id="conteudo"></div>

Como vimos não é nada diferente do que conhecemos, também temos os arquivos com o conteúdo que irá dentro do div #conteudo:

conteudo1.php

<h1> Conteudo 1</h1>
<p>Donec scelerisque aliquet nunc id mattis. Aliquam auctor bibendum massa at dapibus. Suspendisse ante metus, ornare vitae venenatis vitae, posuere sit amet risus. Nam lacus orci, placerat ut tincidunt nec, tincidunt mollis nisl? Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse id arcu sed urna tincidunt semper. Mauris eu mauris nec est euismod dapibus. Suspendisse imperdiet est id purus placerat consectetur. Curabitur interdum ipsum vitae lacus tincidunt nec elementum nunc consectetur. Etiam dapibus felis non nisl tempor lobortis. Mauris commodo varius ligula eget posuere. Suspendisse ligula arcu, tincidunt dictum varius in, bibendum in purus. Maecenas faucibus, lorem vel fermentum vehicula, dui magna dignissim mauris, viverra egestas magna eros eu lorem. Donec facilisis felis suscipit dui blandit eget commodo erat feugiat. Proin eget diam risus.</p>

conteudo2.php

<h2> Conteudo 2</h2>
<p>Nullam non metus risus, in congue velit. Mauris vitae est massa! Nunc suscipit iaculis varius. Suspendisse eros neque, consectetur ut tincidunt sed, placerat eget ipsum? Phasellus eget mauris libero. Donec elit nunc, varius nec auctor vitae, dapibus non turpis. Donec cursus malesuada quam, id accumsan ante imperdiet ac. Donec purus lorem, fringilla fermentum tempus a, porta quis velit. Morbi quis arcu magna, in ultrices neque? Nullam molestie ultricies nibh placerat varius?</p>

conteudo3.php

<h3> Conteudo 3</h3>
<p>Vestibulum eget tellus eros. Mauris et ante id diam malesuada dignissim. Nam vel sem pulvinar velit tincidunt sodales id et ipsum. Cras magna turpis; egestas non dignissim id; malesuada vel velit! Vivamus libero lorem; congue ut auctor sed; rhoncus mattis magna. Sed eget purus ac ante feugiat laoreet! Aliquam erat volutpat. Duis eu nisi ac metus interdum lobortis eget vitae enim. Nunc adipiscing accumsan magna, at rutrum tortor condimentum ac. Sed lobortis adipiscing erat, faucibus blandit odio mollis in. Integer ipsum justo, varius ac malesuada in, laoreet vitae lacus. Donec varius mauris nec dui tristique aliquet. Donec eros arcu, tristique eget fringilla sit amet, feugiat vel leo. Ut elit justo, elementum ut convallis in, consequat in eros. Proin a leo sed dolor aliquam ultrices.</p>

conteudo4.php

<h4> Conteudo 4</h4>
<p>Cras porta, tellus eu elementum pulvinar, tellus nulla tempus neque, ac posuere sem sem varius quam? Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse lobortis feugiat ante interdum facilisis. Proin ante velit, congue vel lobortis a, commodo id risus. Ut sapien turpis, convallis condimentum suscipit in, imperdiet ut ante. Nullam molestie cursus leo, quis luctus risus bibendum quis? Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse lacus nulla; tincidunt consequat rhoncus sed, suscipit sit amet tellus. Fusce faucibus, justo quis mollis volutpat, ligula est sodales dui; eu dictum ante urna vitae ipsum. Vivamus elementum leo et dui viverra blandit. Nunc ac blandit tellus. Sed dui nibh, porttitor nec sagittis quis, commodo tincidunt libero.</p>

Bom com os arquivos HTML prontos vamos ao que interessa, o código Javascript que é responsável pelas requisições assíncronas pelo método GET:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

  $(document).ready(function(){
      $("a").each(function() {
           var href = $(this).attr('href');
           $(this).attr('href','javascript:void(0)');
           $(this).click(function(){
                $('#conteudo').html("");
       	    	$("#carregando").show('slow');
                 $.get( href , function(data){
                        $('#conteudo').html(data);
                        $("#carregando").hide('slow');
                 });
                return null;
        });
     });
  });

Na linha 2 utilizamos o método each que para cada elemento encontrado pelo seletor, no caso “a”(links), ele vai executar a função definida que captura a URL do atributo href do link e armazena em uma variável (linha 3), seta o atributo href para não apontar mais para nenhum link(linha 4), adiciona o evento click (linha 5), dentro do evento click limpamos o div #conteudo (linha 6), mostramos a mensagem de carregando (linha 7) e utilizamos o método $.get(url,function(data){}) que realmente faz a mágica( linha 8).

O método $.get(url,function(data){}) faz a requisição assíncrona com o servidor e passa para a função passada por parâmetro o retorno do servidor na variável data.

Após receber o retorno do servidor jogamos este retorno dentro da div #conteudo(linha 9) e escondemos a mensagem de carregando (linha 10).

Para ver o exemplo funcionando clique aqui

Veremos agora como criar um formulário utilizando AJAX pelo método POST:

HTML

<div id="carregando">Carregando</div>
<div id="mensagem"></div>
 
<form action="processapost.php" method="post">
 
    <label for="nome">Nome:</label>
    <input type="text" name="nome" />
 
    <label for="email">E-mail</label>
    <input type="text" name="email" />
 
    <input type="submit" value="Enviar" />
</form>

Script que processa a requisição POST (processapost.php)

1
2
3
4

        Dados enviados:<br /><br />
       <?php echo "Nome: ".$_POST['nome']; ?>
       <br />
       <?php echo "E-mail: ".$_POST['email']; ?>

E o código Javascript:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

  $(document).ready(function(){
        var action = $('form').attr('action');
        $('form').attr('action','javascript:void(0);');
        $('form').submit(function(){
       	    	$("#carregando").show('slow');
 
 
                 $.post(action ,jQuery("form").serialize(),  function(data){
                        $('#mensagem').html(data);
                        $('#mensagem').show();
                        $("#carregando").hide('slow');
                 });
                return null;
        });
 
	});

Na linha 2 capturamos a URL que irá processar e retornar os valores do nosso formulário e depois (linha 3) configuramos para que o formulário não envie a requisição como faria normalmente, e configuramos o evento submit (linha 4) que é ativado quando o formulário é enviado.

Quando isto acontecer ele irá mostrar a mensagem de carregando (linha 5) e utilizamos o método $.post(url ,dados, function(data)){} que faz uma requisição via POST para url, enviando um array dados e após executa a função recebendo por parâmetro data com o retorno do servidor. Na linha 9 inserimos o retorno da requisição na div #mensagem, deixamos visível esta div e por fim escondemos a mensagem de carregando(linha 11).

Os dados enviados são passados na forma de array no fomato:

 { var1: "valor1", var2: "valor2" }

ou na forma de string:

 var1=valor&var2=valor

Como vimos no exemplo utilizamos jQuery(“form”).serialize(), que converte um conjunto de inputs em uma string no segundo formato.

Para ver o exemplo funcionando clique aqui

Este foi o tão aguardado artigo sobre AJAX com JQuery, os exemplos são bastante simples mas com um pouco de criatividade dá para fazer coisas bem legais.

Até mais “Vida longa e prospera!”

show() e hide()

Para começar vamos simplesmente esconder e mostrar um elemento da página para isso utilizamos o método hide() para esconder e o método show() para mostrá-lo.

1
2
3
4
5
6
7
8
9

    $('#conteudo').hide();
 
    $('.elemento').click(function(){
        $('#conteudo').show('slow');
    });
 
    $('.elemento2').click(function(){
        $('#conteudo').hide('fast');
    });

demo

A maior parte dos métodos de animação da JQuery aceitam um parâmetro que define sua velocidade de animação em milissegundos. Existem também dois valores default que também podem ser usados: slow que equivale a 600 milissegundos e o fast que equivale a 400 milissegundos.

Se nenhum parâmetro for especificado para os métodos show() e hide() ele executarão sem nenhuma animação simplesmente aparecendo/desaparecendo.

toogle() e slideToggle()

Um efeito bastante utilizado é o de clicar em um elemento para mostrar outro e clicar novamente no mesmo link para esconde-lo sendo que para isso ele desliza na tela. Estes efeitos são implementados pela JQuery pelos métodos toggle e slideToggle().

Se você precisar apenas deslizar o elemento para cima ou para baixo e não permitir que ele volte a posição original você também pode utilizar os métodos slideUp() e slideDown().

1
2
3
4
5
6
7

    $('a.l1').click(function(){
        $('#conteudo').toggle('slow');
    });
 
    $('a.l2').click(function(){
        $('#conteudo').slideToggle('slow');
    });

demo

fadeIn() e fadeOut()

Outros efeitos interessantes são os fadeIn() e o fadeOut() que faz o efeito de esmaecer, ou seja, o elemento vai ficando transparente até sumir, ou o contrário.

1
2
3
4
5
6
7

    $('a.fadein').click(function(){
        $('#conteudo').fadeIn(1000);
    });
 
    $('a.fadeout').click(function(){
        $('#conteudo').fadeOut(1000);
    });

demo

Animate

O método animate permite uma grande flexibilidade de animação, já consegui até fazer uma abertura de site ao estilo flash utilizando-o.

O animate() permite modificar várias propriedades do elemento alvo como largura, altura, opacidade, posição, margem, etc.

O verdadeiro poder deste método é que ele permite ser chamado várias vezes em sequência permitindo animações bastante complexas.

Para chamar o método animate() uilizamos dois parâmetros com as propriedades que serão modificadas e a velocidade desta animação. Segue abaixo uma pequena lista de parâmetros que o método animate() aceita.

• width: Largura do elemento
• height: Altura do elemento
• opacity: Transparencia do elemento
• marginLeft: Margem esquerda
• marginTop: Margem superior
• marginRight: Margem direita
• marginBottom: Margem inferior
• top: Posição em relação ao topo(somente funciona se a propriedade positon do CSS estiver em absolute)
• left: Posição em relação a esquerda(somente funciona se a propriedade positon do CSS estiver em absolute)
• fontSize: Tamanho da fonte
• borderWidth: Tamanho da Borda

1
2
3
4
5

         $('a').click(function(){
            $('#conteudo').animate({width: "400",opacity : 0.2}, 1200)
            .animate({height: "400",opacity : 1},1200)
            .animate({opacity : 0.2});
        });

demo

Bom foi isso, espero que tenham gostado, desculpem pelo atraso do post, falta de energia no final de semana(da companhia de eletricidade e minha ).

Fiquem atentos no próximo post vamos brincar um pouco com ajax com JQuery.

T++.c

Visando solucionar este problema surgiu uma biblioteca que facilita bastante a vida de quem trabalha com javascript a JQuery. Uma biblioteca que permite manipular e selecionar elementos do DOM de forma muito fácil.

Você pode baixá-la pelo seguinte endereço jquery.js ou também pode utilizá-la pelo google pelo seguinte link “http://jqueryjs.googlecode.com/files/jquery-1.3.2.js” e deve ser inserida na tag head (<script src=”jquery.js”></script>).

Vamos aos exemplos:

1
2
3
4
5
6
7
8
9

<div id="content">
<ul>
	<li><a href="#">Teste1</a></li>
	<li><a href="#">Teste2</a></li>
	<li><a href="#">Teste3</a></li>
	<li><a href="#">Teste4</a></li>
	<li><a href="#">Teste5</a></li>
</ul>
</div>

Bom vamos começar por um clássico quando clicarmos no link exibiremos a mensagem Hellos World:

1
2
3
4
5

$(document).ready(function() {
    $('a').click(function(){
        alert("Hello World");
    });
});

Antes de explicarmos o código vale chamar atenção para função $() ela recebe por parâmetro um seletor que identificará um elemento HTML e é através desta função chamaremos outras funções da biblioteca jQuery utilizando o operador “.” .

No nosso exemplo a primeira coisa que fazemos é selecionarmos o document ou seja o documento HTML em si e utilizarmos a função ready que executa a função passada para ela por parâmetro quando o DOM estiver pronto, ou seja, a página estiver carregada. Este é um recurso essencial já que sem ele as funções podem serem executadas sem que seus alvos(seletores) tenham sido carregados.

Na linha 2 selecionamos o elemento “a” ou seja os links da página e chamamos a função click e passamos por parâmetro uma função que exibe um alert(“Hello World”). A função click é, resumidamente, uma alias para o atributo onclick do elemento, então agora em qualquer link que clicarmos na página será exibida a mensagem “Hello World”.

Esta é uma das maiores facilidades que a JQuery proporciona, permitir que utilizemos seletores CSS para selecionarmos os elementos do DOM. Podemos desta forma selecionar os elementos com muita facilidade como por exemplo:

1
2
3
4

    $('h3')
    $('.botao')
    $('#conteudo')
    $('.content li a')

Na linha 1 selecionamos todos os elementos h3 da página, na 2 todos os elementos da classe botao na linha 3 selecionamos o elemento que tiver o id conteudo, na linha 4 selecionamos todos os elementos que a que estiverem dentro de um elemento li que estiverem dentro de um elemento que pertença a classe content.

Um outro seletor muito importante é o $(this) com ele é possível acessar a referência do elemento que chamou o método como vemos no exemplo asseguir.

1
2
3

$('#bloco a').click(function(){
    alert( $(this).attr('title'))
} );

Métodos mais comuns da JQuery

Vamos fazer agora uma pequena introdução à alguns métodos do JQuery:

1

    $('#bloco').html();

Retorna o HTML que estiver dentro do elemento.

1

    $('#bloco').html("Texto aqui");

Insere o texto passado por parâmentro dentro do elemento. Elimimando o conteúdo antigo.

1

    $('#bloco').append("Texto aqui");

Adiciona o texto enviado por parâmetro no final do conteúdo do elemento selecionado.

1

    $('#bloco a').attr('title','Boteco Digital');

Define o valor para uma propriedade do elemento selecionado.

1

    $('#bloco a').attr('title');

Retorna o valor de uma propriedade do elemento selecionado.

1

    $('#bloco input').val();

Retorna o valor de campo do formulário.

1

    $('#bloco').addClass("vermelho");

Adiciona a classe passada por parâmetro ao elemento selecionado.

1
2
3
4
5

    $('#bloco').hover(function() {
		$(this).addClass("verde");
	}, function() {
		$(this).removeClass("verde");
	});

Simula o :hover, quando o mouse estiver sobre o elemento selecionado executa a linha 2, quando o mouse saber de cima do elemento selecionado executa a linha 4.

1

    $('#bloco').css('background','#CCC');

Define propriedade CSS para um elemento selecionado.

1

    $('#bloco').css('background-color');

Retorna o valor da propriedade CSS.

1
2
3

$('#bloco select').change(function(){
    alert( $(this).val())
} );

Executa a função passada por parâmetro quando o elemento selecionado for alterado

Mais funções podem ser encontradas aqui.

Pessoal comentem o que acharam, se está claro. No próximo artigo irei ensinar como fazer um pouco de animação com JQuery.

T++.c