Sexy Forms

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

Sexyforms is a javascript library that improves the appearance of XHTML forms. It’s compatible with all of modern browsers, and also with Internet Explorer. It’s no-intrusive and it lets you create your own styles!

6, 7, 8

3.0, 3.5

3

9.64, 10

4

Demo

Form Elements – SelectBox with Ajax

Features

How to Install

You can install it as another 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>

Where… :
sexyforms-vista.css is the name of the style to use. You can choose among these styles:

• 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 is the name of the script. If you want to get speed, you can try using the simplified version: sexyforms.v1.3.mootools.min.js

Using SexyForms

In mootools:

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

Example: Search the form with the class ’sexyform’ and beautify all its elements:

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

Example: Beautify an single element:

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

Documentation

Public Functions:

• element.DoSexy()

  Converts a sad and boring element in a sexy one!

• element.reset()

  Converts a sexy element in a sad and boring one.

License

This script is published under license 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