Mooniform 1.0

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



Details

Author
Stefano Ceschi Berrini
Current version
1.0
GitHub
stecb/Mooniform
Downloads
1635
Category
Forms
Tags
Report
GitHub Issues

Releases


Dependencies

  • _self_/_current_: core/1.4: '*'

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:

<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:

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

Theming:

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


Class Mooniform

Syntax

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

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


Discuss

A note on comments here: These comments are moderated. No comments will show up until they are approved. Comments that are not productive (i.e. inflammatory, rude, etc) will not be approved.

Found a bug in this plugin? Please report it this repository's Github Issues.

blog comments powered by Disqus