En fin, lo que estaba intentando hacer es algo como un efecto de click. Me explico. Lo que quería que ocurriera, es que cuando el usuario hiciera click en un enlace, se produjera como una especie de linea de expansión. Pongo un ejemplo. Has visto el tipico anuncio de la Wii, donde al principio aparecen como tres o cuatro círculos concéntricos que se dispersan hasta desaparecer? Pues algo así, pero para cuando el usuario hiciera click con el ratón en una web.

Al final de trastear un rato, hacer unos cuantos experimentos con imágenes, y seguir trasteando con animaciones sencillas, creo que he llegado a una primera aproximación que mas o menos se parece a lo que yo quería.

• Ver el efecto en vivo y en directo (demo)
• Descargar el plugin de jSimulateClick

Básicamente, el ejemplo tiene 2 fragmentos interesantes (tampoco hay más en el html):

El primer fragmento es el que asocia el evento de click a todos los elementos que tienen la clase ‘clickable-round’. Cuando hagas click dentro de un elemento de esa clase, aparecerá un círculo que se irá difuminando.

$('.clickable-round').click (function (event) {
 $(event.currentTarget).jSimulateClick (event.pageX - 1, event.pageY - 1, 'round');          
});

El segundo fragmento, asocia el evento de click a los elementos de la clase ‘clickable-square’. Cuando hagas click en cualquiera de estos elementos, el efecto será similar al anterior, pero en vez de mostrar un círculo, mostará un rectángulo que va, desde donde hayas hecho click, hasta cubrir el área del elemento en cuestión:

$('.clickable-square').click (function (event) {
  $(event.currentTarget).jSimulateClick (event.pageX - 1, event.pageY - 1);          
});

Si quieres trastear el plugin, los parámetros con los que se puede trastear son el color del borde, el tamaño inicial del borde, la duración de la animación, …

Este javascript se puede usar para aplicaciones personales, comerciales y para lo que se quiera.

Finalmente, agradecería cualquier comentario para mejorar el efecto.

Por lo general, redondear esquinas no es difícil, el problema es que en definitiva lo que se hace no deja de ser un “hack”, no es lo mismo poder redondear una esquina usando 1 único div, especificando una serie de atributos (como se puede hacer con CSS3), que usando 3 divs, o incluso poner una tabla y usar imágenes de fondo.

En este sentido, la pena, como siempre, es que la mayor parte del mercado sigue estando dominada por Internet Explorer, por lo que en la práctica no es correcto redondear las esquinas como expuse en el artículo anterior.

Una vez dicho esto, y sabiendo que esta es la situación actual, para que las esquinas redondeadas puedan ser visualizadas por todas las personas, sin importar su raza, religión, navegador o sistema operativo, creo que habrá que seguir haciendo uso intensivo de javascript. Por suerte, desde hace ya unos años hay librerías que nos facilitan el tema de una forma brutal:

• Nifty Corners, y su predecesor, Nifty Corners Cube: fue la primera solución y muy aclamada en su momento
• jQuery corner plugin, creado por Dave Methvin: aquí podeis ver una demo con todas las opciones, y que luego fue actualizada por Mike Alsup que incluyó bastantes más tipos de esquinas (merece la pena echarle un vistazo a la demo).
• JRC es otro plugin para jQuery: en este enlace podeis ver una demo
• MochiKit ya viene con soporte nativo para rounded corners, como se puede ver en este ejemplo (aunque no es tan extenso como el plugin de jQuery).
• OpenRico también tiene soporte para esquinas redondeadas

Finalmente, si alquien quiere que sus esquinas estén redondedas, y no tiene intención de usar javascript, bien porque busca algo más sofisticado, bien porque no le gusta usar javascript, que le eche un vistazo a este artículo sobre 25 técnicas CSS para realizar esquilas redondeadas.

Actualización: en la práctica me he encontrado con ShadedBorders que me ha gustado bastante bastante más.

El objetivo que pretende conseguir su autor es asociar un identificador único a un determinado elemento de la página web, de tal forma que no se creen elementos duplicados.

Aunque lo ha complicado un poco (usando la fecha en milisegundos, y luego un número aleatorio), aquí va mi versión del asunto (porque reconozco que a veces esto es útil):

(function($){
 var _next_uid = 0; 
 $.fn.uid = function(prefix) {  
   return this.each(function() {
     this.id = (prefix || 'uid') + (_next_uid++);
     return $;
   });  
 };  
})(jQuery);

De esta forma, se pueden crear o asociar identificadores únicos a cuantos objetos se quiera. He aquí un pequeño ejemplo:

  // crear un elemento nuevo con un identificador único
  $("<div>contenido del div</div>").uid ('prefijo').appendTo ('body');
 
  // crear un elemento nuevo con un identificador único
  $("<div>contenido del div</div>").uid ().appendTo ('body');
 
  // asignar un identificador a todos los elementos 
  $(".className").uid ();

Reconozco que para hacerlo bien bien, habría que mirar si el identificador que se va a crear existe, y si existe incrementar el contador, pero bueno, esta es la versión “bien hecha” programada y testeada en 3 minutos.