jump to navigation

Marcar enlaces externos con jQuery Febrero 19, 2009

Publicado por lineadecodigo en : jQuery , trackback

Cuando creamos una página web tendremos diferentes tipos de enlaces: sobre la misma página, sobre páginas externas, que se abran en el mismo marco, en un marco nuevo,...

Como ayuda visual podemos adjuntar una imagen que denote que el enlace es externo o que se abre en una nueva ventana. Por ejemplo:

Manual WebNew Window

Posiblemente, lo más fácil sea crear una clase CSS que nos permita demarcar con un estilo estos tipos de enlaces. Si bien, en ese caso estaremos dejando en manos del desarrollador el acto de marcar con el estilo CSS en enlace.

Por otro lado podemos marcar enlaces externos con jQuery de forma dinámica. Para ello lo primero que vamos a hacer es poner los enlaces en la página:

  1.  
  2. <h1>Marcar enlaces externos</h1>
  3.  
  4. <a href="http://www.google.com" title="Google" target="_blank">Google</a><br/>
  5. <a href="http://lineadecodigo.com" title="Linea de Código">Linea de Código</a><br/>
  6. <a href="http://www.manualweb.net" title="Manual Web" target="_blank">Manual Web</a><br/>
  7. <a href="http://www.w3api.com" title="W3Api" target="_blank">W3Api.com</a>
  8.  

Es importante que trataremos aquellos que tengan el atributo target con el valor "_blank". Ahora incluiremos el código jQuery que nos detecte estos tipos de enlaces para incorporarles el icono.

Como siempre, incluiremos la función ready() para saber que se ha cargado todo el documento y empezar a manipular la página.

  1. $(document).ready(function(){
  2.  // Código jQuery
  3. });

Lo importante del ejemplo es saber que selector tenemos que utilizar para acceder a los elementos anchor - A con un atributo target igual a "_blank". Para ello indicaremos el nombre del elemento (A) y pondremos el atributo y su valor dentro de un corchete. Quedándonos el siguiente selector:

  1. $("A[target=_blank]")

El método que nos permite insertar código HTML detrás de un elemento con jQuery es .after(). Este método recibe como parámetro el código HTML a insertar. En nuestro caso la carga de una imagen.

Por lo tanto nos quedaría el siguiente código jQuery:

  1. $("a[target=_blank]").after("<img src='new_window.gif' title='new window'/>");

Todo el código jQuery sería el siguiente...

  1. $(document).ready(function(){
  2.   $("a[target=_blank]").after("<img src='new_window.gif' title='new window'/>");
  3. });

... como se puede apreciar, poco código para un gran efecto.

Articulos Similares:

|- Visualizar el ejemplo
|- Descargar el código
|- Reportar error en el código
|- Foro sobre jQuery

Enviar entrada por email Enviar entrada por email | Imprimir Imprimir | 2248 visitas

1 Star2 Stars3 Stars4 Stars5 Stars (Todavia sin evaluar)
Loading ... Loading ...

Tags:, ,

Comentarios»

1. Mayra - Febrero 19, 2009

quiero un programa en java para calcular el area y perimetro
de diversas figuras geómetricas




Si tienes dudas sobre jQuery no dudes en visitar el Foro sobre jQuery.
Imagen CAPTCHA CAPTCHA Audio
Refrescar imagen