Como crear bordes redondeados en Drupal utilizando jquery

Importante, este código ha sido programado y probado con Drupal 5.x, "creo" pero no estoy seguro que para Drupal 6.x es igual, ahora vamos con la magia de jquery.

Hoy día nos gusta que las cosas sean bonitas en el ámbito de la web, no es agradable tener todo cuadriculado y cerrado en cajas feas, por eso uno de los elementos que están de moda son esos pequeños detalles de belleza como bordes redondeados, suprimiendo de esta manera las "esquinas cuadradas y rígidas", de esta forma conseguimos cierta "fluidez" en el aspecto final de nuestro producto.

Pero como siempre es el cliente quien tiene la última palabra para esto.

Ahora nuestro truco, vamos a utilizar el pluggin de jquery llamado jquery roundcorners canvas". Este pluggin nos permite definir los bordes que le vamos ha aplicar a los divs de html.

Para utilizar este módulo lo primero que hacemos es descargarlo, y descomprimirlo, de todos los archivos que tenemos necesitamos los siguientes:

  • jquery.corner.js
  • excanvas.js

Estos archivos los tenemos que añadir al directorio de nuestro tema, en mi caso trabajando con el tema basic primero he creado una directorio llamado jquery, y los he guardado, me ha quedado de la siguiente manera las rutas de ambos:
/sites/all/themes/basic/jquery/jquery.corner.js
/sites/all/themes/basic/jquery/excanvas.js

Una vez tenemos ambos archivos copiados en el directorio tenemos que ir al archivo template.php e indicarle que adjuntemos los archivos a drupal, para ello utilizaremos la función drupal_add_js().

Nos quedaría el código de la siguiente manera:

<?php
drupal_add_js
('/sites/all/themes/basic/jquery/jquery.corner.js');
drupal_add_js('/sites/all/themes/basic/jquery/excanvas.js');
?>

Una vez hecho esto todavía la magia de jquery no ha empezado a hacer efecto, para ello tenemos que decirle a jquery que divs tienen que disfrutar de la magia de jquery. Para hacer esto creamos un archivo nuevo, en nuestro caso divredondos.js, en el cual metemos el código que define que div de nuestro thema son redondeados.

<script  type="text/javascript">

$(document).ready(function() {
$("#sidebar-right-inner").corner("10px");
}
)
</script>

El primer elemento nos permite definir el "id" de html que se ve afectado por jquery para crear los bordes redondos, el sengundo elemento "corner()" nos permite definir la forma y posición del efecto redondo.
Para más información de este fantástico plugging de jquery recomiendo leer su documentación oficial (en ingles).

Una vez creado nuestro archivo *.js tenemos que añadirlo también a template.php para que Drupal sea capaz de conocer su contenido, al igual que antes utilizamos drupal_add_js().

El resultado final de lo que añadimos en le template.php con los archivos anteriores añadidos y el archivo nuevo es:

<?php
// añadimos estos archivos de jquery para conseguir el efecto de esquinas redondas en los divs//
drupal_add_js('/sites/all/themes/basic/jquery/jquery.corner.js');
drupal_add_js('/sites/all/themes/basic/jquery/excanvas.js');
drupal_add_js('/sites/all/themes/basic/jquery/divredondos.js');
?>

Trackback URL for this post:

http://www.documentados.com/trackback/208

Comentarios

Muy interesante oskar!, me

Muy interesante oskar!, me lo añado porque seguramente lo utilizaré.

¿Has llegado a probar este módulo? http://drupal.org/project/jq_eyecandy
Creo que añade varios efectos jquery, entre ellos rounded corners

Gracias Pedro, Lo cierto es

Gracias Pedro,

Lo cierto es que a veces te olvidas de mirar si estas cosas ya se hacen con Drupal o no, de todas formas se me ha olvidado comentar que es necesario tener jquery 1.2 o superior, por lo tanto hay que tener instalado jquery_update.

Un saludo

Oskar

Ya hice todo como indicás.

Ya hice todo como indicás. Pero no se cual es el ultimo paso. Los bordes redondos no se ven. tengo q escirbir algo en el estilo?
gracias

Enviar un comentario nuevo

El contenido de este campo se mantiene como privado y no se muestra públicamente.
To prevent automated spam submissions leave this field empty.
By submitting this form, you accept the Mollom privacy policy.