mooForms

mooForms is a JavaScript class to create custom checkbox & radio buttons for forms. It replaces the checkboxes and radio buttons in a form with custom images using CSS background position.

mooForms is a port of the script found at Ryan Fait's website and uses the mootools framework.

In older browsers it degrades flawlessly so if someone has JavaScript turned off or are using Internet Explorer 5.1 or below, then the Javascript isn't fired and normal checkboxes and radio buttons show.

I have now updated mooForms to v1.3.

This version will only work in mootools v1.2.

Changes

• version 1.0
  • 1st release
• version 1.1
  • added labelPosition
  • put label on left or right
• version 1.2
  • updated to work with mootools 1.2
  • fixed ie drag 'n' drop so image clears
• version 1.3
  • added support for disabled form elements

Requirements:

• to use mooForms v1.1 and below you will need mootools 1.1 - the lasetest version can be got here.
• to use mooForms v1.2 you will need mootools v1.2 which can be got here
• the ability to apply the code to your XHTML page. (I will help by giving you an example here).
• has been tested on and works in:
  • Internet Explorer 7, 6 & 5.5 
  • Firefox 2
  • Opera 9
  • Safari 2
  • Konqueror

Download:

The lasetest version of mooforms is v1.3 and you can download form here.
You can still download v1.1 form the same link
The download files include:

• images
• JavaScript files
• demo

Images:

There are two images used. Since the script uses the CSS property background-position to switch the images, there is no need to preload anything. To create your own images, you have to space out the different states so that only one will be visible at a time. There are no CSS properties to set, this is all taken care of in the script.

Demo:

You can see a demo here

Example Usage:

To use mooForms is simple. Once you have downloaded mooForms you have to make reference links in the head section of your page like:

 Then under this you add this code changing the 'id_of_container' referance to your form id and add any options within the curly braces.

 The XHTML form might look like:

 you can use <span>, <p> or <label> tags for the label all will be restyled to display inline.

You can have the label either to the right or left of it's input element as of version 1.1 otherwise if you are using version 1.0 then the label position is on the right of the input element.

And that's it at it's simplest. Now for the options

Options:

In this class we have options that we have to set, if you don't want the default options that is.

The default options are:

What does this mean?

-imageDir: String, the directory where the images are kept. Can be relative or absolute path. N.B. the trailing forward slash.
-checkboxImage: Object, name of the checkbox image, it's width and height .
-radioImage: Object, name of the radio button image, it's width and height.
-spacer: String, name of the spacer image. this is a transparent gif image of 1x1 pixels.
-inputs: Array, ethier 'checkbox' or 'radio', to choose to turn on images on checkboxes or radio buttons. Defaults to both.
-labelPosition: String, whether the label is on left or right of radio button or checkbox. Defaults to left.

here is an example using all options:

If you miss any or all the options out then the default options are used

Now enjoy.