Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Branch: master
Fetching contributors…

Cannot retrieve contributors at this time

92 lines (61 sloc) 2.463 kB

Mooniform

Mooniform is the porting of the famous jquery plugin uniform (by pixelmatrix) to mootools.

Screenshot

How to use

To use it you will simply need to follow the easy instructions below

Basic Example

First of all you need to include the following html tags:

#HTML
<script src="./Source/mooniform.js" type="text/javascript"></script>

<link href="./Source/css/mooniform.default.css" rel="stylesheet">

Then you can simply use it in this way, for example:

#JS
new Mooniform($$('input[type="checkbox"]'));

Theming:

Theming is done with CSS files and images (see inside /images/ folder).

Class: Mooniform

Syntax

#JS
var mooniform_instance = new Mooniform([elements, options]);

Arguments

  1. elements: (elements, array) The element(s) to attach the mooniform to
  2. options: (object, optional) The options object

Options:

All the options of the Mooniform (most of all are about css classes):

  • selectClass: 'mooniform-selector',
  • radioClass: 'mooniform-radio',
  • checkboxClass: 'mooniform-checker',
  • fileClass: 'mooniform-uploader',
  • filenameClass: 'mooniform-filename',
  • fileBtnClass: 'mooniform-action',
  • fileDefaultText: 'No file selected',
  • fileBtnText: 'Choose File',
  • checkedClass: 'mooniform-checked',
  • focusClass: 'mooniform-focus',
  • disabledClass: 'mooniform-disabled',
  • buttonClass: 'mooniform-button',
  • activeClass: 'mooniform-active',
  • hoverClass: 'mooniform-hover',
  • useID: true,
  • idPrefix: 'mooniform',
  • resetSelector: false,
  • autoHide: true

Public methods:

  • update: To update elements after you changed their status by JS (i.e. reset a form)
  • lookup: To style new Elements (i.e. loaded with an ajax call)

Examples

#JS
var elementsToStyle = $$('select, input[type="checkbox"], input[type="radio"], input[type="file"]'),
    mooniformInstance = new Mooniform(elementsToStyle);

//style new elements (loaded by ajax i.e.)
  mooniformInstance.lookup(elementsToStyle);

//if you want to reset a form
  myForm.reset();
  mooniformInstance.update();

License

Jump to Line
Something went wrong with that request. Please try again.