Entradas etiquetadas ‘ jquery ’

Ejemplo de jQuery ( ahora jugando con los efectos )

Jueves, Mayo 17, 2007

Llevo unos días jugando con jQuery. Ya he dicho en algún post anterior lo mucho que me ha sorprendido la facilidad de uso y la potencia de esta librería. Por ahora solo he podido jugar un poco con los selectores y los efectos, aún no he tenido oportunidad de usar las herramientas de las que dispone, tanto para facilitar el uso de AJAX como para muchas otras cosas. De todas formas aquí va un ejemplo, un poco tonto, eso sí… de lo que se puede hacer con jQuery de forma muy sencilla.

Ejemplo de jQuery

Publicado en programacion, web | Etiquetas: , ,  | Comments Off

jQuery: AJAX hecho fácil

Lunes, Mayo 14, 2007

En un post anterior ya hablé de jQuery, lo usé para que los enlaces de OBG incluyan un icono a la izquierda que indique cuando salen del blog.

  1. jQuery.noConflict();
  2. jQuery(document).ready(function(){
  3.                 jQuery("a").not("[@href*='otrobloggeek.com']").css("background", "transparent url(/blog/wp-includes/images/link-externo.png) no-repeat");
  4.                 jQuery("a").not("[@href*='otrobloggeek.com']").css("padding", "0 0 2px 18px");
  5. });

Este es el código en cuestión. Es una pequeña demostración de la potencia que nos brinda esta librería. Uno de los puntos fuertes de jQuery son los selectores, que nos permiten recorrer el árbol DOM del documento XML en cuestión; en nuestro ejemplo es HTML. jQuery nos permite mezclar selectores CSS con XPATH, con lo que podemos seleccionar cualquier elemento de la página de forma sencilla. Además, la documentación es bastante completa.

Yo he tenido algún quebradero de cabeza al intentar usarla por que uno de los plugins de OBG usa Prototype, otra librería similar a jQuery y ambas usan el mismo atajo para los selectores: $. Por suerte la documentación de JQuery explica qué hacer en estos casos.

Por cierto, el código de ejemplo, traducido a lenguaje natural sería algo así como: “Selecciona todos los enlaces cuyo destino no contenga ‘otrobloggeek.com’ y ‘ponlos guapos’”.

Publicado en programacion, web | Etiquetas: , ,  | 3 comentarios »

Algunos cambios

Domingo, Mayo 13, 2007

He introducido algunos cambios light en el estilo del blog y ya de paso le he echado un ojito a jQuery; una librería Javascript que nos hace la vida más fácil.

  • Un blockquote algo más “bonito” ( al menos para mi gusto ). Aquí os dejo el archivo .xcf de Gimp por si os gusta :D . Para incluirlo en la página hay que añadir algo parecido a esto en el estilo de la web:
  1. blockquote {
  2.     background: transparent url(_img/quote.jpg) no-repeat;
  3.     font-size: 1.1em;
  4.     font-style: italic;
  5.     padding: 10px 0 20px 50px;
  6.     width: 420px;
  7.     margin: 0 auto 1em;
  8. }

con lo que conseguimos que se vea más o menos así

esto es una cita de ejemplo para ver como se ve el estilo nuevo de OBG. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi et ante. Donec ullamcorper dolor non metus. Curabitur eget sem. Suspendisse pede. Aenean non dolor. Donec mattis fermentum est. Duis purus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aenean rutrum pretium risus. Etiam adipiscing congue nulla.

  • Un icono a la izquierda de los enlaces externos, como este . Aquí es donde entra en juegojQuery. Usando este script se añade el icono que queramos a la izquierda de los enlaces:
  1. jQuery.noConflict();
  2. jQuery(document).ready(function(){
  3.                 jQuery("a").not("[@href*='otrobloggeek.com']").css("background", "transparent url(/blog/wp-includes/images/link-externo.png) no-repeat");
  4.                 jQuery("a").not("[@href*='otrobloggeek.com']").css("padding", "0 0 2px 18px");
  5. });

Para usarlo hay que añadir antes jQuery a nuestra web. En la web de jQuery tenéis ejemplos de como hacerlo.

Por supuesto podeéis usar el código como queráis y donde queráis. :)

Edito: El icono para los enlaces externos lo he sacado de la galería de iconos Tango que tienen una licencia Creative Commons 2.5 Attribution-ShareAlike

Edito 2: En este post explico qué hace el código Javascript que pone guapos los enlaces.

Edito 3: La medicación de la alergia me deja un poco atolondrado (sí, eso es posible) por eso acabo de subir el archivo Gimp con la imagen que aparece a la izquierda de las citas.

Publicado en auto bombo, programacion, web | Etiquetas: ,  | Comments Off