Sexy Forms

Eduardo 24 Mayo 2009 122 comentarios En: Javascript, Programación Web

SexyForms es una librería javascript que se encarga de mejorar increíblemente la apariencia de los formularios XHTML. Es compatible con todos los navegadores modernos, y con Internet Explorer también. Es completamente no-intrusivo y permite crear tus propios estilos!

6, 7, 8

3.0, 3.5

3

9.64, 10

4

Demostración

Form Elements – SelectBox con Ajax

Características

Instalación

Se instala como cualquier script:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/mootools/1.2.2/mootools-yui-compressed.js"></script>

<link type="text/css" rel="stylesheet" href="sexyforms-vista.css" media="all"/>
<script type="text/javascript" src="sexyforms.v1.3.mootools.js"></script>

Donde… :
sexyforms-vista.css es el nombre del estilo a usar. Puedes elegir entre estos estilos:

• sexyforms-blue.css
• sexyforms-red.css
• sexyforms-green.css
• sexyforms-dark.css
• sexyforms-clean.css
• sexyforms-vista.css
• sexyforms-orange.css
• sexyforms-simple.css
• sexyforms-gamma.css

sexyforms.v1.3.mootools.js es el nombre del script. Si quieres ganar velocidad, puedes probar usando la versión comprimida: sexyforms.v1.3.mootools.min.js

Usando SexyForms

En mootools:

  $$("input", "select", "textarea").each(function(el) {
    el.DoSexy();
  });

Ejemplo: Buscar el formulario con clase ’sexyform’ y embellecer todos sus elementos:

<script type="text/javascript">
window.addEvent('domready', function() {
  $$(".sexyform input", ".sexyform select", ".sexyform textarea").each(function(el) {
    el.DoSexy();
  });
});
</script>

Ejemplo: Embellecer un elemento individual:

<input type="text" id="name" value="" />
<script type="text/javascript">
  $('name').DoSexy();
</script>

Documentación

Funciones públicas:

• element.DoSexy()

  Convierte un elemento triste y aburrido, en uno sexy!

• element.reset()

  Convierte un elemento sexy, en uno aburrido y triste.

Licencia

El script es publicado bajo la licencia MIT.

Download

Changelog

SexyForms 1.3.1 - Octubre 30, 2009
* BugFixed: La lista del elemento Select no aparecia en el top correcto.

SexyForms 1.3.0 - Octubre 03, 2009
* Mas compatibilidad con IE6
* Nuevo SelectBox con manejo de eventos
* Bugs de posición en selectbox arreglados
* SelectBox ahora recibe el foco
* SelectBox ahora muestra iconos en IE6 & IE7
* Bug de Textarea en Opera arreglado

SexyForms 1.2.0 - Septiembre 29, 2009
* Elemento Select eliminado. Ahora se usa el nativo para evitar errores.
* Agregado InputFile
* BugFixed: Se hace mejor uso de la herencia.
* BugFixed: El textarea es del mismo tamaño en todos los navegadores.

SexyForms 1.1.0 - Junio 20, 2009
* BugFixed: Float elements compatible
* Decenas de cambios menores.

SexyForms 1.0.0 - Abril 04, 2009
* Versión Inicial.
* Mootools 1.2.2