Screencaster Mostrando conhecimento

jQuery - Estendendo o jQuery

Postado por Guilherme Rambo com as tags , , , ,

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!

Você pode acompanhar os comentários deste post pelo feed rss.

3 pessoas comentaram

  1. Jader Rubini says:
    17/11/2008 at 12:51

    Eu costumo usar $('a[rel=external]‘).click(function(){ $(this).attr(’target’, ‘_blank’) })

    Reply
  2. Mateus says:
    09/12/2008 at 10:06

    Post muito bacana ja mea judou qui em um projeto ! , só que agora preciso fazer o seguite, todo link externo do site precisa abrir um POP UP , neste popup é umaviso que a pessao esta deiz=xando aquele ambiente, e qdo a pessoa clicar em OK ela vai pra pagina externa e automaticamente fecha o POPUP aberto.

    Se puder me dar um dia eu abradeço bastante,
    Sou novato em Jquery sempre me confundo qdo tenho que fazer funções.

    Abraços

    Reply
  3. Luciano says:
    23/05/2009 at 21:48

    Cara uma ótima materia ja trabalho a algum tempo com HTML JAVAScript e CSS. Me parece que o Jquery venho para fechar um elo que estava faltando

    Reply

Agora é a sua vez: