Screencaster

jQuery - Estendendo o jQuery

De forma muito simples vou mostrar a vocês como fazer links externos abrirem em nova janela com jQuery, e também como estender a biblioteca para evitar repetições.

Primeiramente, para abrir links externos automaticamente em novas janelas, dispensando o atributo target, e de forma não-obstrutiva, uma boa maneira seria da seguinte forma:

$(function(){
    $("a[href^=http://]").click(function(){
        window.open($(this).attr("href"))
        return false
    })
})

Desta forma, todos os links cujo href inicie com http:// (”a[href^=http://]“) irão abrir o respectivo endereço em nova janela.

Agora vamos supor que queremos utilizar este comportamento em vários sites que mantemos e utilizamos jQuery. Não seria muito interessante digitar a função toda vez, afinal é uma repetição desnecessária. Para solucionar isso, podemos estender o jQuery, colocando essa função inclusive em outro arquivo, que podemos incluir nos sites em que quisermos:

1
2
3
4
5
6
7

$.fn.opensNewWindow = function()
{
	this.click(function(){
		window.open($(this).attr("href"))
		return false
	})
}

Agora sempre que quisermos fazer um link abrir em nova janela, basta utilizarmos nossa função:

1
2
3

$(function(){
	$("a[href^=http://]").opensNewWindow();
})

Nós temos aqui na interAtiva! diversos arquivos com “coleções” de extensões e códigos que usamos com frequência em vários projetos. Para dar mais um exemplo, uma página que usa jQuery para enviar todos os dados de um form via AJAX seria mais ou menos assim:

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
27
28
29
30
31
32
33
34
35

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
	"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8">
	<title>Estendendo o jQuery</title>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script>
	<script type="text/javascript">
		$(function(){
			$("#myform").submit(function(){
				$.post($(this).attr("action"), $(this).serialize(), tratarRetorno)
				return false
			})
 
			tratarRetorno = function(responseText)
			{
				alert(responseText)
			}
		})
	</script>
</head>
<body id="index">
 
	<form action="?" id="myform" method="post">
		<fieldset>
			Nome:
			<input type="text" name="nome" value="" id="nome"><br>
			Email:
			<input type="text" name="email" value="" id="email"><br>
			<button type="submit">Ok</button>
		</fieldset>
	</form>
 
</body>
</html>

E caso quiséssemos utilizar este mesmo comportamento em outros sites e evitar repetições, poderíamos apenas estender o jQuery:

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

tratarRetorno = function(responseText)
{
	alert(responseText)
}
 
$.fn.sendViaAJAX = function(callback)
{
	this.submit(function(){
		$.post($(this).attr("action"), $(this).serialize(), callback)
		return false
	})
}
 
$(function(){
	$("#myform").sendViaAJAX(tratarRetorno)
})

Como podem ver, jQuery é uma mão-na-roda na hora de seguir um dos meus favoritos princípios da programação: DON’T REPEAT YOURSELF / NÃO SE REPITA

Até mais!

Postado em: 17/11/2008 @ 12:11 por Guilherme Rambo. Você pode comentar ou enviar um trackback para este post.
2 comentários