How to use

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" />

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");
            }
        });
    });

Demo

http://nkjoep.github.com/MooCells/

Options

• cells: an object {} containing the cells set (see below).

• format: an object {} contaning information about how to format types. Now allowed value is:

  javascript

  format: {
      decimals: <number>
  }
  

Events

• 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.

How To Setup Cells

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.

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.