jQuery: Anular un enlace y cargarlo en un div

8 de abril de 2010 | Etiquetas: , | Categoría: Javascript

Muchas veces quiero cargar el contenido de un enlace dentro de un div, pero me gusta que los enlaces tengan el atributo href con la dirección real, para que en el caso de que el navegador no tenga javascript activado puedan visitar el enlace igualmente.

Para ello he creado una función ayudándome de la librería jQuery, tened en cuenta que para que os funcione tenéis que tener esta librería enlazada en vuestra web.

La función:

$("a.cargar").live('click', function(event){
     event.preventDefault();
     var url = $(this).attr("href");
     var div = "#"+$(this).attr("name");
     $(div).load(url);
     return false;
});

El html:

Contacto

La explicación:
Lo que hace la función es seleccionar todos los enlaces que tengan asociada la clase “cargar”. Cuando se hace click sobre uno de éstos se anula el enlace para que no nos lleve directamente a la página y pueda ejecutar la función tranquilamente. Luego, recoge la url a cargar del atributo href y el nombre del div en el que se cargará del atributo name del enlace. Por último, carga la dirección dentro de éste.

Espero que os sirva al menos como base, ya sabéis que podéis / debéis trastearla y adaptarla a vuestro proyecto.

Twittea esto Guardalo en Delicious Compartelo en Facebook

JQuery: Una de plugins para menús animados

10 de diciembre de 2009 | Etiquetas: , , | Categoría: Javascript

Hay veces que los menus realizados solo con html + css se nos quedan cortos, y si preferís (como yo) evitar tocar Flash os va a venir muy bien tener a mano estos plugins con los que realizar menus (horizontales, verticales, etc) de efectos muy resultones.

5 menus con efectos en jquery

1. Lavalamp (DemoDescarga)
2. MenuMatic (DemoDescarga)
3. Slick Animated Menu (DemoDescarga)
4. iPod Style Menu (DemoDescarga)
5. Fancy Navigation (DemoDescarga)

¿Cual os gusta más? Yo no sabría decidirme :P

Twittea esto Guardalo en Delicious Compartelo en Facebook

JQuery: Una de plugins para efectos de texto

24 de noviembre de 2009 | Etiquetas: , , | Categoría: Javascript

La semana pasado hablamos de las galerías de imágenes hechas con JQuery y hoy le toca el turno a los efectos de texto.

Porque se les puede añadir sombras, degradados, voltear, agrandar, achicar, animar.. todo ello sin necesidad de echar mano de Photoshop. Sólo nos hacen falta unos minutos de nuestro tiempo y cualquiera de los siguientes plugins:

jquery_text

1. Flipv (DemoDescarga)
2. FontEffect (DemoDescarga)
3. FontSizer (DemoDescarga)
4. Scrabble Text (DemoDescarga)
5. Moatext (DemoDescarga)

¿Me dejo alguno interesante sin nombrar?

Twittea esto Guardalo en Delicious Compartelo en Facebook

Pluralink: Muchos enlaces dentro de uno solo

13 de noviembre de 2009 | Etiquetas: , , | Categoría: Javascript

pluralink1

Vía WebResourcesDepot me entero de la existencia de Pluralink, una libreria Javascript encargada de convertir nuestros enlaces en contenedores de más enlaces.

¿No te ha quedado muy claro? Pues mira el ejemplo, tu escribes:

<a href=”http://pluralink.com/documentation/||http://pluralink.com/download/||http://pluralink.com/contact/” title=”Documentation||Download||Contact”>like</a>

Y cuando pases el ratón por encima del enlace “like” (el texto que hemos puesto) aparecerá el siguiente bloque, mostrándonos los 3 enlaces añadidos.

pluralink

Es muy fácil de implementar, simplemente añade el archivo.js que nos ofrecen para descargar y a la hora de poner varios enlaces sepáralos con doble barra “||”, eso sí el diseño del bloque ya corre de nuestra parte. Además han creado un plugin para WordPress por lo que resulta más fácil aún ponerlo en nuestro blog.

No os vayáis sin ver el ejemplo en funcionamiento :P

Twittea esto Guardalo en Delicious Compartelo en Facebook

4 pages