MooUi

Change checkboxes and radios

Usage

Works with these types of fields :

  • radio, checkbox and select

Parameters

imagePathpath to img folder, can be full address. ex: ‘http://floor.ch/img/
form_idThe id of the form.  By default ‘mainform’.
prefixClassPrefix for the class and the images. ex: with ‘nice_’ -> nice_radio & nice_checkbox
suffixClassClass for activ element. ex: with ‘_activ’ -> nice_radio_activ
errorClassClass to signal error.
numberOfStatesNumber of states for checkbox.  Will be changeable in future versions
transitionTimeTransition lenght for select
selectMaxLinesMax lines in a select list (if bigger, add a scroll)

Exemple

You can easilly skin different forms with different theme with something like this :

<script type="text/javascript">
window.addEvent('domready', function() {
var niceForm = new MooUi({
'form_id': 'first',
'prefixClass': 'nice_'
});
var niceForm2 = new MooUi({
'form_id': 'second',
'prefixClass': 'nice2_',
'transitionTime': '1000'
});
});
</script>

About

formcheck.js v.1.0 for mootools v1.1 05 / 2007

by Floor SA (http://www.floor.ch) MIT-style license

Created by Luca Pillonel and David Mignot

@include “/iframework-classes/_mootools_full/mootools.v1.11.js”

Summary
Change checkboxes and radios
Constructor
Internal method
Internal method
Internal method
Internal method
Internal method
Internal method
Internal method
Internal method
Internal method
Internal method
Internal method
Internal method
Internal method
Internal method
Internal method
Internal method
Internal method
Internal method
Internal method
Internal method (used for keyboard input)
Internal method (used for keyboard input)
Internal method (used for keyboard input)
Internal method.
Internal method
Internal method

Functions

initialize

initialize: function(options)

Constructor

_build

_build: function()

Internal method

Start all things

_preload

_preload: function()

Internal method

Get the size of the images

_handleResize

_handleResize: function(el)

Internal method

Fix for apple related ‘difference’...

_readForm

_readForm: function(form_id)

Internal method

Look for the form(s) then call the method _replaceElement

Parameters

form_idId of the form

replaceSelect

replaceSelect: function(el)

Internal method

Replace select with styled divs

Parameters

elHtml element

_setOptionsSelect

_setOptionsSelect: function(el)

Internal method

Parameters

elSelect object

_createNewSelect

_createNewSelect: function(el)

Internal method

Parameters

elSelect object

_createSelectDeco

_createSelectDeco: function(el)

Internal method

Parameters

elSelect object

_createNewList

_createNewList: function(el)

Internal method

Parameters

elSelect object

_positionSelectContainer

_positionSelectContainer: function(el)

Internal method

Parameters

elSelect object

_addEffect

_addEffect: function(el)

Internal method

Parameters

objectSelect object

_preventSubmit

_preventSubmit: function(el)

Internal method

Fix for apple related ‘difference’...

_toggleSlide

_toggleSlide: function(el,
hide,
opened)

Internal method

Parameters

elSelect object

_closeSelects

_closeSelects: function(el)

Internal method

Parameters

elSelect object

_manageScroll

_manageScroll: function(el)

Internal method

Parameters

elSelect object

_addScrollEvent

_addScrollEvent: function(el)

Internal method

Parameters

elSelect object

_scrollUp

_scrollUp: function(el)

Internal method

Parameters

elSelect object

_scrollDown

_scrollDown: function(el)

Internal method

Parameters

elSelect object

_hoverLine

_hoverLine: function(li,
ob)

Internal method

Parameters

liline to apply the hover class
obSelect object

_nextLine

_nextLine: function(ob)

Internal method (used for keyboard input)

Parameters

objectSelect object

_previousLine

_previousLine: function(ob)

Internal method (used for keyboard input)

Parameters

objectSelect object

_selectLine

_selectLine: function(ob,
n)

Internal method (used for keyboard input)

Parameters

objectSelect object

_selectHover

_selectHover: function(ob)

Internal method.  Make the hover line selected when ‘enter’ key is pressed

Parameters

objectSelect object

replaceElement

replaceElement: function(el)

Internal method

Replace radios and checkboxes with styled divs

Parameters

elHtml element

_changeStatus

_changeStatus: function(el,
original)

Internal method

Change the status of the input and change the image of the span

Parameters

elHtml input element
initialize: function(options)
Constructor
_build: function()
Internal method
_preload: function()
Internal method
_handleResize: function(el)
Internal method
_readForm: function(form_id)
Internal method
replaceSelect: function(el)
Internal method
_setOptionsSelect: function(el)
Internal method
_createNewSelect: function(el)
Internal method
_createSelectDeco: function(el)
Internal method
_createNewList: function(el)
Internal method
_positionSelectContainer: function(el)
Internal method
_addEffect: function(el)
Internal method
_preventSubmit: function(el)
Internal method
_toggleSlide: function(el,
hide,
opened)
Internal method
_closeSelects: function(el)
Internal method
_manageScroll: function(el)
Internal method
_addScrollEvent: function(el)
Internal method
_scrollUp: function(el)
Internal method
_scrollDown: function(el)
Internal method
_hoverLine: function(li,
ob)
Internal method
_nextLine: function(ob)
Internal method (used for keyboard input)
_previousLine: function(ob)
Internal method (used for keyboard input)
_selectLine: function(ob,
n)
Internal method (used for keyboard input)
_selectHover: function(ob)
Internal method.
replaceElement: function(el)
Internal method
_changeStatus: function(el,
original)
Internal method