26/09/2011

jQuery Transitions | Como fazer transições de páginas

Olá, a algum tempo que eu não posto aqui, estou mais focado na tradução da documentação, mas para vocês não me esquecerem, vim dar um oi ;) .

Recentemente comecei um job onde o cliente solicitou que o site tivesse algumas animações, não fosse paradão. Pensei comigo mesmo, acho que o cara quer uma apresentação no PowerPoint =).

Em busca dessa solução, pensei em fazer transições entre as páginas. Eis que veio na minha cabeça um efeito muito simples mas de impacto, simplesmente esmaecer a página.

Vamos ao código então. Precisamos ter nosso html bonitinho.

A marcação

HTML – Página 1

<div id="container">
    <h1>Essa é a index </h1>
    Aqui vamos ter um texto qualquer onde temos um <a class="transition" href="http://jsfiddle.net/ruanltbg/Ns97H/3/embedded/result/">link</a>. Esse link vai fazer a página esmaecer
</div>

HTML – Página 2

<div id="container">
    <h1>Essa é a segunda página </h1>
    Ela vai aparecer e vai ter um <a class="transition" href="http://jsfiddle.net/ruanltbg/WvD7Q/1/embedded/result/">link</a> para a index.
</div>

Já temos o HTMl com os links para as páginas, decidi deixar os links com uma class transition para poder identificar quais os links irão ter o efeito (pois posso ter links internos que simplesmente não irão a lugar nenhum, como âncoras).

Efeitos

Para ficar com o efeito armênico, precisamos que quando a página for abrir ela apareça devagar, ou seja, vamos usar o método fadeIn() para fazer isso. E após, precisamos pegar todos os links, aplicar o efeito na página e então redirecionar para onde o site deveria ir.

JavaScript

Vale lembrar que tudo deve estar dentro do ready e o código é igual para ambas as páginas.

$("#container").fadeIn(2000);
$("a.transition").click(function(event){
    event.preventDefault();
    link = this.href;
    $("body").fadeOut(1000, function(){
        window.location = link;
    });
});

Simples assim, agora temos uma página que mais parece um PowerPoint =D.

Demo

*ignore o header do jsfiddle que aparece

, ,
04/07/2011

Diferença entre window.load e document.ready

Olá, o jQuery prove três métodos para trabalhar com o carregamento da página. São eles:

Hoje irei explicar qual a diferença entre o $(window).load() e o $(document).ready().

Essa diferença é bem simples. O mais conhecido $(document).ready() é utilizado para verificarmos se o DOM esta completamente carregado, caso ele esteja, podemos trabalhar tranquilamente com seus elementos, nesse caso, uma imagem não precisa estar completamente carregada, apenas precisamos ter o elemento da imagem no DOM.

Já o $(window).load() é utilizado quando precisamos que TODOS os elementos estejam carregados, ou seja, ele vai esperar todas as imagens, css, javascript e elementos externos estarem carregados para ser executado.

Qual utilizar?

Vai depender apenas da sua necessidade, no próximo post, eu irei dar um exemplo de uso do $(window).load().

Demo

Veja aqui um exemplo da diferença entre window.load e document.ready.(existe diferenças de comportamento entre navegadores, essa diferença é notada entre o comportamento do Firefox e do Chrome).

, , , ,
08/06/2011

jQueryBrasilCast 002 – jQuery vs Outras bibliotecas + noConflict()

002 - jQuery vs Outras bibliotecas + noConflict() [ 54.06 MB ] Play Now | Play in Popup | Download (1534)


Olá pessoal!

Está no ar o segundo podcast. Espero que gostem mais do que o primeiro e menos do que o próximo! :)

Comentem, curtam e falem de tudo o que vocês acharam.

Ao contrário do áudio do primeiro, este já está com um pouco mais de qualidade graças à todos os participantes! :)

Você pode adicionar o podcast ao seu iTunes clicando aqui.

É isso aí. Comentem bastante! :)

Links

Participantes:

Espero que gostem! :)

Cya! :D

, ,
06/06/2011

AJAX com jQuery – Método $.ajax()

Hoje falarei sobre a função $.ajax onde podemos requisitar informações via GET ou POST assíncronamente. Creio que o AJAX deva ser mundialmente conhecido, por isso não entrarei nos detalhes, apenas mostrarei as formas que podemos utilizá-lo.
(mais…)

,
02/06/2011

Manipulando Checkbox e Radio Button com jQuery

Muitas pessoas tem problemas em manipular checkbox e radio button. Irei mostrar como trabalhar com eles.

Os checkbox e os radio button são um pouco diferente dos outros elementos no html. Eles têm uma propriedade booleana chamada checked, mas diferente das outras propriedades ela pode ser declarada sem um valor (isso pode dar um erro na validação do seu html). Ex:
(mais…)

, , ,
20/05/2011

jQuery UI datagrid

Para inaugurar meu primeiro post aqui no jquerybrasil (.org), preparei alguns demos do plugin (jquery.ui.datagrid) que desenvolvi baseado no $.ui.widget. Lembrando que não é um plugin oficial do jQuery UI. Criei para sanar minhas necessidades dentro dos projetos que sou contratado. Lembrando que a equipe do jQuery UI criou o jQuery UI Grid Project com o objetivo de juntar todo conhecimento e boas práticas dos “plugins de grid” existentes dentro do UI.
(mais…)

, ,
15/05/2011

HTML 5 Notifications – Como deixar sua aplicação muito mais interativa (gmail notifications like)

Mais uma vez me deparei com situações do dia-dia e poucas soluções. Afim de implementar uma forma de alertar os usuários de um web chat interno no ambiente de trabalho, necessitava de algo que pudesse ser fácilmente identificado como uma nova mensagem vinda do chat. Então, de cara, pensei em implementar uma solução sonora para aquelas pessoas que não estariam no browser naquele momento, mas estavam com um head-phone ou algo do tipo. Solução pronta, mas segue uma outra questão: “E quem não está com som ligado?”

Partindo desta pergunta, me pus a pesquisar sobre alternativas viáveis. Foi então que em mais uma conversa muito produtiva com meu amigo @wilkerlucio, chegamos a conclusão que utilizando HTML 5 Notifications, teríamos uma abordagem ao usuário bem mais direta. De primeira nos deparamos com uma informação que esta funcionalidade não é nem um pouco cross-browser, o que me fez ficar só um pouco desmotivado diante da poderosa arma que eu tinha em mãos.

Embora seja bem restrita ao Webkit, li em algum lugar que o firefox estaria disposto a implementar num release futuro esta funcionalidade. Quem não está entendendo muito bem, pode se lembrar do Gmail, que agora te avisa quando alguém fala com você, mesmo que você não esteja vendo o e-mail naquela hora. Ah, também você pode encontrar mais sobre o assunto procurando sobre HTML 5 Desktop Notifications.

Sem mais delongas, vamos ao que interessa:
(mais…)

, , , , ,
12/05/2011

Lançado jQuery 1.6.1

Pois é, acabou de ser lançado o jQuery 1.6.1. No prazo previsto, como havíamos falado no lançamento do 1.6.1 RC. O objetivo desta versão é barrar os principais problemas que estavam acontecendo, principalmente em relação a migração do “novo” $.attr(), onde podemos ver mais detalhes no post sobre o lançamento do 1.6.1 RC.

Link do CDN jQuery:

Changelog:

Ainda iremos fazer alguns testes, mas de acordo com o post oficial do jQuery, as mudanças foram mais em relação ao $.attr() como mencionado no post do lançamento do jQuery 1.6.1.

Cya! :D

,
10/05/2011

Lançado o jQuery 1.6.1 RC1

Está chegando a primeira atualização do jQuery 1.6, com o lançamento do primeiro release candidate! O objetivo é barrar os principais bugs que estavam acontecendo, e este deve ser o código final para jQuery 1.6.1 (que deve acontecer nesta semana).

Link do CDN jQuery:

Changelog:
http://blog.jquery.com/2011/05/10/jquery-1-6-1-rc-1-released/

Pelo que consegui ver rapidamente, das grandes mudanças, estão presentes algumas regras do $.attr que voltaram a funcionar. Especificamente os atributos booleanos como checked, readonly, e disabled no 1.6.1 serão tratados da mesma forma que costumava ser tratada em versões anteriores à jQuery 1.6. Isto significa que o código de abaixo não precisa ser mudado no 1.6.1, como se esperava anteriormente:

$(“:checkbox”).attr(“checked”, true);
$(“option”).attr(“selected”, true);
$(“input”).attr(“readonly”, true);
$(“input”).attr(“disabled”, true);

if ( $(“:checkbox”).attr(“checked”) ) { /* ......... */ }

Lembrando, você pode ajudar a comunidade testando a versão em sua aplicação e reportar, se algo deixar de funcionar. Você pode cadastrar como um bug, sempre mencionando que você está testando jQuery 1.6.1 RC 1.

As novidades e exemplos aqui mencionados foram retirados do post oficial do jQuery.

Cya! :D

,
10/05/2011

Um pouco sobre $.map()

Quem já começou a testar as novas features do jQuery 1.6 levanta a mão… _o/

Venho apresentar algumas das minhas impressões do método $.map, que foi bem incrementada na nova versão. Para quem ainda não conhece, o método permite manipularmos arrays ou objetos de maneira bem prática. 

Quem já precisou manipular esse tipo de dados, sabe o trabalho que dá. Exemplificarei como a nossa vida ficou mais fácil se soubermos utilizar bem o $.map(). 

Em primeiro lugar, algo bem simples para que possamos entender bem o método: 

$.map( [0,1,2], function(n){
      return n + 10;
}); 

// Resultado:
// [10,11,12] 

A manipulação é completa, inclusive podemos também retirar algum valor da array, caso necessário. 

$.map( [0,10, 20, 30, 40, 50], function(n){
      if(n <= 30) {
            return n;
      }else{
            return null; // Não é necessário, apenas para facilitar a visualização lógica.
      }
});

// Resultado:
// [0, 10, 20, 30] 

Vamos para um exemplo prático. Estou querendo passar apenas os dados que não são vazios de um formulário.

O que precisávamos fazer, sem utilizar o jQuery.map():

var params = form.serializeArray()
      checkedParams = new Array(); 
for(var x = 0; x < params.length; x++) {
      var index = params[x];
      if(index) {
            checkedParams.push(index);
      }
} 

Agora ao exemplo bem mais elegante: 

var params = form.serializeArray(); 
params = jQuery.map(params, function(value, index){
      return (value) ? value : null;
}); 

Sim, mas qual a diferença entre o $.map() e o $.each() ? 

O each() serve apenas para varrer o objeto ou array, enquanto o map permite um retorno e manipulação do que foi varrido. 

$.map()

$.map([1,2,3,4,5], function(value, index){
      return false;
}); 

// Resultado:
// [false, false, false, false, false] 

$.each()

$.each([1,2,3,4,5], function(index, value){
      console.log(index);
      return false;
}); 

// Resultado:
// 1

// Ele irá imprimir apenas o primeiro valor e irá encerrar
// o laço por causa do return false. 

Espero que tenham entendido mais um pouco sobre o novo método. Caso ainda tenha alguma dúvida, pergunta aí embaixo :)

, , , ,
Página 1 de 3123