It helps you to develop javascript enhanced forms defining relationship between elements.
Quickly, it make possible to calcute element values like in spreadsheets.
http://nkjoep.github.com/MooCells/
Import the Mootool library and the MooCell library in the middle of your head tag
<head>
<script type="text/javascript" src="mootools.js" />
<script type="text/javascript" src="MooCells.js" />
</head>99.999% of times you surely need a good domready
window.addEvent("domready", function(){
//second step here
});Create an instance of MooCells in the function passed to the domready event
window.addEvent("domready", function(){
new MooCells({
cells: {
cellA: {
el: document.id("idForCellA"),
},
cellB: {
el: document.id("idForCellB"),
status: "disabled",
value: function(cells) {
return cells.cellA * 5
}
}
},
onComputing: function(status) {
console.log("calculating cells values - ", status);
},
onCellChange: function(cell) {
console.log(cell, "has changed");
}
});
});- cells: an object {} containing the cells set (see below).
- format: an object {} contaning information about how to format types. Now allowed value is:
format: {
decimals: <number>
}- onComputing (status): fired when calculating values. Argument status can be "start"|"end"
- onCellChange (cellName, cellValue , ScopedCells): fired when a cell changes its value. Arguments: cellName the key of the cell defined in cells set, cellValue the new value applied, ScopedCells the cell set object.
For each cell you have to define a structure like this:
cellkey : { // (String)
el: , // (Element - mandatory)
status: , // (String - optional)
format: , // (String - optional)
decimals: , // (Number - optional)
dependsOn: , //(Array[String] - optional)
value: //(Function(cells) - optional),
onUpdate: // Function(value) - optional
}- cellKey : (String) an unique name used to reference this cell in MooCell
- el: (Element - mandatory) the html element this cell is referring to
- status: (String - optional) This will be applied this value to the el. Can be 'readonly' or 'disabled'.
- format: (String - optional) Describe the type of data this cell is containing. Can be 'string', 'boolean', 'number'. 'number' is default.
- decimals: (Number - optional) If format is 'number' you can use this to decide how many decimals the value of this cell has.
- dependsOn: (Array[String] - optional) The keys of the other cells this cell depends on.
- value: (Function(cells)) - optional) This function will be used to calculate the value of the cell. One argument will be passed, an object with the cells.
- onUpdate: (Function(value) - optional) This function will be executed when the cell changes. The argument passed is the current value.