mooSmartForms: Dando un toque de estilo a tus formularios
¿Por qué otra librería que hace lo mismo?
Hace poco tuve que terminar de darle forma a un proyecto con Joomla! una de las cosas que más trabajo cuesta es darle estilo a un formulario usando CSS. Probé un par de soluciones como FancyForm y CRIR pero ninguna se adaptaba al código generado por Joomla, así que no me quedó más remedio que escribir mi propio script que hiciera lo propio.
Como funciona.
mooSmartForms está inspirado en otras librerías como CRIR y FancyForm, por lo tanto usa el mismo mecanismo. Mediante Javascript oculta los controles del formulario y añade un estilo para el control desactivado y otro para el control activado a la etiqueta asociada al control.
La librería permite aplicar una clase CSS a los elementos. Hace uso de mootools, de ahí el “moo” del nombre. Para que nuestro código sea “estilizable” tiene que tener las siguientes características.
- Cada checkbox o radio input necesita tener un elemento label asociado a su id.
Listo 
no hay más requisitos. A continuación un ejemplo de como sería ese código “estilizable”.
-
-
<label for="check">Checkbox</label">
-
<input type="checkbox" id="check" />
-
<label for="radio1">Radio1</label>
-
<input type="radio" id="radio1" name="sample" />
-
<label for="radio2">Radio2</label>
-
<input type="radio" id="radio2" name="sample" />
-
Para que el script haga su trabajo hay que insertarlo en la página y además necesitamos mootools.
-
-
<script type="text/javascript" src="mootools.js"></script>
-
<script type="text/javascript" src="moosmartforms.js"></script>
-
<link href="moosmartforms.css" rel="stylesheet" type="text/css" media="screen" />
-
Un pequeño ejemplo del aspecto que podemos conseguir con la librería. Ejemplo de mooSmartForms
Aquí tenéis mooSmartForms para descargarlo y usarlo como queráis. Tiene una licencia MIT, así que podéis hacerle todas las “perrerías” que os apetezca. Si queréis personalizar el estilo solo tenéis que editar el fichero mooSmartForms.css
Soporte.
He probado mooSmartForms con los siguiente navegadores:
- Internet Explorer 6 y 7
- Firefox 2
- Konqueror
- Safari 3 ( gracias a Álvaro por el testeo )
- Opera
Si conseguís que funcione en otro navegador agradecería que me lo hicierais saber :D. Aunque también se agradece un aviso con cualquier error que encontréis o con problemas que se me hayan pasado.
Para futuras versiones.
- Estilos para el resto de elementos de los formularios.
- Posibilidad para discriminar los elementos que queremos “estilizar”.
- Capacidad para añadir efectos a las transicciones entre los estados de los elementos.
- Posibilidad de elegir el nombre que queremos darle a las clases CSS de los elementos.
Para terminar.
Si encontráis algún error o algún problema podéis dejar un comentario en el post. Sin necesitáis añadir código al post, por favor, utilizad esta web.
Créditos.
Las imágenes que se usan para el estilo de ejemplo pertenecen al tema de iconos silk icons que tiene licencia Creative Commons.
Post a Comment