Skip to content
gh-pages
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
lib
 
 
 
 
 
 
 
 

MooCells

It helps you to develop javascript enhanced forms defining relationship between elements.

Quickly, it make possible to calcute element values like in spreadsheets.

Demo

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

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

Options

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

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.

About

A MooTools library to manage form with "dependent fields".

Resources

Packages

No packages published