07/11/2011

Lançado jQuery 1.7

Pois é, já estamos na versão 1.7 e você ai com a 1.3 ou 1.4 né? =)
Lançada no dia 3/11/11 a versão 1.7 já esta disponível para download, claro que em sua versão Full e Min.

Novidades

As novidades ficam por conta dos novos eventos $(elements).on( events [, selector] [, data] , handler ); e $(elements).off( [ events ] [, selector] [, handler] );. Delegação de eventos de forma mais rápida. Melhor suporte a HTML 5, entre muitas outras. Vale a pena dar uma olhada no changelog.

jQuery UK Conference

Também anunciaram a primeira conferencia na Europa. Será em Oxford e terá vários participantes de nome como Paul Irish e Addy Osmani.
Pra quem puder ir (quem me dera hehe).

17/10/2011

Lançado o jQuery 1.7 Beta 2

Olá galera.
No dia 13/10 foi lançado o Beta 2 da versão 1.7 do jQuery que incorpora alguns bugfix e ganha um aumento de estabilidade.

Você já pode baixar da CDN.
http://code.jquery.com/jquery-1.7b2.js

Todas as mudanças podem ser vistas no Change Log do blog oficial.

E isso ai, só baixar, subir para seus projetos e sair testando, não preciso repetir que qualquer bug encontrado será bem visto no bugtraker =D.

29/09/2011

Lançado o jQuery 1.7 Beta 1

Olá pessoas,

Se você não estava sabendo, a jQuery Conference 2011 irá acontecer em Boston no final desta semana. Assim como marcado antes, foi lançado hoje a versão 1.7 beta 1 do jQuery com alguns novos recursos, além da correção de vários bugs, como mencionaram no post oficial, que chega a mais de 50.

Você pode baixar a versão no CDN do jQuery:
http://code.jquery.com/jquery-1.7b1.js

Mais uma vez o team pede a colaboração para reportar qualquer bug que aconteça, tanto nas novas implementações como o não-funcionamento de algo antigo. Iremos explorar os novos recursos para adquirir mais prática nas novas implementações.

Vamos às mudanças…

Novas APIs de eventos: $.on() e $.off

Ao longo do tempo, o jQuery evoluiu três maneiras para anexar eventos aos elementos do DOM. São eles: bind(), live() e delegate(). Analisando o código das três APIs, consegue-se descobrir coisas engraçadas. Por exemplo, $(document).unbind('click') irá remover todos os eventos de click (live('click'), bind('click'), entre outros), uma vez que esses eventos estão ligados ao documento.

Para resolver algumas destas inconsistências, foi introduzido um novo par de métodos simples que pode fazer o papel de todos os três métodos utilizados anteriormente.

$(elems).on(events, selector, data, fn);
$(elems).off(events, selector, fn);

Se um seletor é fornecido, é um evento de delegate. Caso contrário, ele é diretamente vinculado. Todos os recursos das APIs antigas estão lá, por exemplo, pode ser utilizado vários eventos separados por espaço em uma única string.

Melhorias nos efeitos/animações

Antes da versão 1.7, se você paralisasse uma animação antes de completá-la, era criada uma situação onde o elemento que estava animando não poderia retornar ao tamanho original. As dimensões originais são armazenadas, antes que comece a animação, para que possa ser utilizada posteriormente. Isto elimina alguns problemas que existiam antes com accordion, por exemplo.

Melhor suporte ao HTML5

Se você já faz uso das novas tags HTML, poderá testar a nova versão que está preparada para criar e clonar elementos nestas tags.

And more…

Para a lista completa de novidades, veja o post oficial, alternativamente Anddy Osmani comenta novidades mais avançadas sobre a versão.

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

, ,
16/09/2011

Ajax não obstrutivo com preventDefault

Olá pessoal,

Antes de tudo, peço desculpas pelo tempo em que passei um pouco afastado. Projetos pessoais, trabalho, mudanças, enfim, vamos dar início e perder menos tempo com xurumelas =P

Todos nós já sabemos que 99,9% dos browsers possuem suporte ao bom e velho Javascript. Mas o que custa trabalharmos um pouco melhor e ter um código bem feito e dando suporte a todos? Até porque o mundo mobile cresce cada vez mais e, infelizmente, ainda existem alguns aparelhos que não dão todo o suporte.

Outro motivo que precisamos nos preocupar é que se tiver algum erro de execução no seu Javascript, por um simples erro de sintaxe, o seu código pode não ser todo interpretado e, por exemplo, estourar um JSON sem CSS na tela do usuário não é nada agradável.

E como evitar esse tipo de coisa?

Imagine que você tem um form que vai ser enviado assíncronamente. Como poderíamos fazer da melhor forma?

Existe um método que não é tão conhecido chamado preventDefault(). Ele vai nos ajudar bastante nos nossos exemplos. Ele previne a execução padrão do evento. No caso de um formulário, ele não vai submetê-lo, nem levar o usuário para a action do form. Se fosse um link, ele não levaria o usuário para a página do link, e assim sucessivamente.
Vamos pôr a mão na massa!

<form action="/users/" method="post" id="newUser">
	<input type="text" name="title" />
	<input type="submit" value="Enviar" />
</form>
$('form#newUser').submit(function(event){
	event.preventDefault(); //Este é o cara!
	var actionUrl = $(this).attr('action'),
		params = $(this).serializeArray();
	$.post(
		actionUrl, 
		params, 
		function(){
			alert('Formulário enviado com sucesso!');
		}
	);
 });
 

Algumas boas práticas podem ser vistas nesse código.

  • A url que é enviada via ajax é igual a do html;
  • Os parâmetros são carregados pelo serialize(), ou seja, se incluir novos parâmetros no form, estes também serão enviados na requisição ajax;
  • Se o JavaScript estiver desabilitado, o envio será feito da mesma forma. O ideal é ter um tratamento no back-end para fazer retornos agradáveis ao usuário.

Para completar, tente desabilitar o javascript do browser e fazer um teste no seu formulário. :)

preventDefault() vs return false

Alguns desenvolvedores preferem utilizar o return false; no corpo do método. Pode ser utilizado também. A diferença é que o return false executa o preventDefault() e o stopPropagation(), não permitindo que nenhum outro manipulador seja notificado do evento.

16/09/2011

Formulário dinâmico com jQuery

Bom galera , é o primeiro post aqui :P e venho trazer a vocês uma forma de otimizar as páginas de cadastro com um formulário dinâmico através do jQuery.

Qual a ideia ?

A princípio a ideia é inserir o formulário de acordo com a demanda, não sobrecarregando a página com elementos que possivelmente não iram ser usados e identificar cada campo com o atributo name diferente para recuperá-los mais tarde. Bom, acho que consegui me expressar … então vamos botar a mão na massa!

HTML

Primeiramente precisamos de nosso formulário

    <form method="get" action="processa.php">
    <table>
        <thead>
            <tr>
                <th>Item</th>
                <th>Quantidade</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><input type="text" name="item1" size="60" /></td>
                <td><input type="text" name="quantidade1" size="10" /></td>
            </tr>
        </tbody>
    </table>
    <!--Irá armazenar a quantidade de linhas-->
    <input type="hidden" value="1" name="quantidade_itens" /> 
    </form>

Agora precisamos de dois elementos que posteriormente irão disparar o envio do formulário e a inserção de novos inputs.

    <a href="#" id="enviar">Enviar lista de compras</a>
    <a href="#" id="mais">Add Item</a>

jQuery

Para enviar o formulário, iremos associar o seu método .submit() ao evento .click() de um dos elementos que criamos para este fim. Aqui utilizaremos o link com id enviar.

// JavaScript Document
$('#enviar').click(function(){
	$('form').submit();
});

E Agora o X da questão!

Dentro do evento .click() do link com id mais vamos:

  1. Armazenar numa variável a quantidade de linhas de nossa tabela.
  2. Inserir o código html da linha que contém os inputs com a propriedade name concatenada com o número da linha a ser inserida que armazenamos na variável next.
  3. E por fim atualizar o valor do elemento :hidden que usamos para armazenar a quantidade de linhas.
	$('#mais').click(function(){
		
		//recuperando o próximo numero da linha
		var next = $('#lista tbody').children('tr').length + 1;
		
		//inserindo formulário
		$('#lista tbody').append('<tr>' + 
        	'<td><input type="text" name="item' + next + '" /></td>' + 
            '<td><input type="text" name="quantidade' + next + '" /></td>' +
        '</tr>');
		
		//armazenando a quantidade de linhas ou registros no elemento hidden
		$(':hidden').val(next);
		
		return false;
	});

Mas pra que serve saber a quantidade de linhas de registros neste formulário ?

É simples, como criamos o formulário dinâmico, devemos informar à página que irá receber os dados qual a quantidade de registros que ela irá receber.

Pronto, o script já está funcionando. Mas para um melhor entendimento mostraremos como a página irá receber estes dados.

PHP

A pagina deverá conter uma variável para recuperar a quantidade de itens, (lembra aquela que comentamos ?) e um loop que terá como limite nossa variável.

Dentro dele basta recuperar os valores concatenando a propriedade name do campo com o número da repetição.

<?php

	$quantidade_itens = $_GET['quantidade_itens'];
	
	for ( $x = 1; $x <= $quantidade_itens ; $x++ ){
		
		$item = $_GET["item$x"];
		$quantidade = $_GET["quantidade$x"];
		
		//aqui seu código com o uso dos valores capturados
		
	} 
?>	

Veja a

Demo

O que fizemos basicamente ?

Inserimos através do método .append() os inputs com o atributo name concatenado com a quantidade de linhas mais 1, que atribuímos à variável quantidade. Sendo assim somente o final da propriedade name irá mudar , facilitando a recepção dos dados por outra página. Implementando então uma inserção dinâmica onde todos os valores poderão ser capturados.

Obs:. É bom lembra que essa é “uma” das formas de se fazer … cada um pode implementar da maneira que quiser mas o conceito , como já mencionei, é sempre o mesmo.

Atenção para a dica:

Aqui não foi associado nenhum evento aos inputs, mas se necessário, é preciso utilizar o método .live() para que este evento se estenda a todos os inputs.

Um abraço e até o próximo post!

13/09/2011

Tradução da documentação

Olá galera, há um tempo o Luiz Tiago havia postado que começaríamos o processo de tradução da documentação do jQuery.
No entanto, percebemos que a procura para ajudar a traduzir não foi alta. Gostaria de ressaltar que este trabalho é um trabalho não remunerado, mas que será de grande ajuda para todos, principalmente para os iniciantes. E posso assim dizer que, não há remuneração melhor do que o agradecimento de outra pessoa por algo que você fez e foi útil.

Alguns dados

  • 288 páginas de documentação
  • +- 30% concluído
  • Nenhuma revisão
  • +- 10 pessoas já colaboraram
  • Faltam 217 páginas a serem traduzidas

Pense, se 288 pessoas pegarem uma página em 1 dia tudo estaria traduzido, ou agora 217.

Como colaborar?

Simples, no post do Tiago tem uma breve explicação de como proceder e mais detalhes no github do projeto.

Meu MUITO OBRIGADO para todos que já ajudaram e para os que ainda irão.

13/09/2011

Lançado jQuery 1.6.4

Olá, na noite de ontem (12/09) foi lançada a nova versão do jQuery, a 1.6.4.

Foram corrigidos alguns bugs da versão 1.6.3. Como sempre disponibilizado em duas versões para download.

Links do CDN do jQuery

05/09/2011

Lançado jQuery 1.6.3

Olá galera, o jQuery 1.6.3 foi lançado no dia 01 de Setembro (desculpe a demora =’). Ele veio acompanhado de muitas correções de bugs.

Como sempre, o jQuery team pede para que reportem os bugs caso alguém encontre algo que não esta funcionando.

Destaques

Como destaques temos:

  • Correção a um ataque XSS
  • Sem animações “worm holes
  • Melhorias com o tratamento da propriedade data do HTML5

Links do CDN do jQuery

A lista completa de mudanças pode ser vista no changelog.

Cya. +D

08/08/2011

ajaxSetup | Configuração padrão para Ajax

Após o nosso podcast sobre Ajax, surgiram algumas dúvidas de como fazer um arquivo de configuração para o Ajax.
Explico, não necessariamente seria um arquivo de configuração e sim códigos de configuração, os mesmos não precisariam estar em um arquivo separado, eu mesmo, quando utilizo, coloco no arquivo de jQuery (não sou de utilizar CDN, por mais que eu recomende o uso).

Configurações padrões para o Ajax

O jQuery nos provê de várias propriedades para configuração do Ajax, essas podem se repetir por várias requisições diferentes. Devido a essa repetição podemos utilizar a função jQuery.ajaxSetup() para que a mesma configuração seja usada por todas as requisições.

Então vamos criar uma configuração para que todas as requisições sejam para apenas uma url.

//pode ser $.ajaxSetup
jQuery.ajaxSetup({
  url: 'uma_url_qualquer.php'
});

Quando usarmos $.get(), $.post(), entre outros, não precisamos mais passar a URL pois já temos na nossa configuração. Usamos dessa forma então:

$.ajax({
  data: {'nome': 'Ruan'}
});
$.get({
  data: {'nome-do-meio': 'Carlos'}
});
$.post({
  data: {'sobrenome': 'Kovalczyk'}
});
//sei que Kovalczyk pode soar como um palavrão para muitos =)

Agora vamos setar configurações diferentes

jQuery.ajaxSetup({
   global: false,
   type: "POST",
   cache: false,
   //ate mesmo callbacks
   error: function(error) {
      alert(error);
   }
});

Te vejo na próxima

,
Página 3 de 712345...Última »