Uno de los portales que se están desarrollando en la Fundación tenía una barrita de menú con botones redondeados. Los amantes del Flash dijeron rápidamente que ellos lo hacían fácilmente en Flash que no me preocupara; todo quedó así … hasta hoy. Hoy lo estuvieron pensando y se dieron cuenta que era muy difícil y dispendioso crear las imágenes y tratar de cambiar de color el botoncito según esté seleccionado o no. Por suerte yo ya estoy superando esta gripa y amanecí con ganas de un poco de carpintería.
Lo primero que hice fue buscar la librería de JavaScript Nifty Corners que ya había visto con anterioridad para tal fin, sin embargo en la búsqueda también encontré una segunda y dejé que la revisión de los ejemplos determinara cual iba a utilizar. Resulta que Curvy Corners si permite darle un borde al botón redondeado … o al menos si lo muestra en un ejemplo, así que la escogí.
Creo algunos DIV de clase miBoton con IDs boton1, boton2, boton3, … Ahí es donde entra a jugar Curvy Corners.
Se incluye la librería de Javascript.
<script type="text/JavaScript" src="rounded_corners_lite.inc.js"></script>
En la función onLoad de la página se especifican las propiedades de la redondez y se asocia esta con los elementos de la clase miBoton.
settings =
{
tl: { radius: 10 },
tr: { radius: 10 },
bl: { radius: 10 },
br: { radius: 10 },
antiAlias: true,
autoPad: true,
validTags: ["div"]
}
var myBoxObject = new curvyCorners(settings, "miBoton");
myBoxObject.applyCornersToAll();
Por mi parte creo la función cargarBotones() que establece la referencia global a los botones incluyendo el objeto HTML y enlace a donde se deberá dirigir el navegador cuando le hagan click.
Igualmente implementé la función colorearBotones() que le pone el fondo verde a los botones no seleccionados y naranja a los seleccionados.
La solución fue muy sencilla. Lo bueno es que hasta ahora cumple con lo que necesitaba el cliente y se desarrolló bastante rápido la solución. Lo malo fue que, como cosa rara, cuando verifiqué que funcionara con IE7 … todo se derrumbó.
Inicialmente sólo aparecía la cajita de los botones, vacía y cuadrada. Nada funcionaba. Lo probé en mi equipo que tiene instalado el JavaScript Debugger de Microsoft y se quejaba de una linea de la librería de CurvyCorners … ni idea porqué. Verifiqué el ejemplo y este funcionaba sin problemas así que comparé mi código con el del ejemplo … nada extraño. Hice una copia y empecé a convertir mi código en el código de ejemplo hasta que lo hice funcionar … no había nada raro … solamente el color de los botones. Había puesto que fueran green normalmente y orange si los habían seleccionado; pues parece que IE no entiende inglés, sólo hex.
Cambié la especificación de los colores y todo empezó a fallar extrañamente, a ratos, sin sentido. Quité los llamados de colorearBotones() y algunos botones se coloreaban y otros no. Obra de satanás. Comenté el código de la función y coloreamiento se detuvo.
Tuvo que pasar otro rato para que me diera cuenta que ese útil navegador no estaba refrescando bien la página cada vez que yo le daba F5 y me estaba mostrando versiones antiguas. Conclusión con IE es mejor darle siempre CTRL-F5 para que refresque completamente.
Se puede consultar el código fuente del ejemplo haciendo click en el siguiente enlace: test_curvycorners
VN:F [1.8.5_1061]
