Home

Welcome to the jQuery Calx wiki!

What is jQuery Calx

jQuery Calx is a jQuery plugin for creating simple calculation form or table. It's easy to implement and fully configurable.

Initializing

Initializing Calx is easy, just define id and data-formula, and initialize calx

<form id="calx">
    Price :<br />
    <input type="text" id="price" value="29.5" data-format="$ 0,0[.]00" /><br />
    Qty :<br />
    <input type="text" id="qty" value="4" /><br />
    Discount :<br />
    <input type="text" id="discount" value="15" data-format="0.00 %" /><br />
    Total :<br />
    <input type="text" id="total" data-formula="($price*$qty)*(1-$discount)" data-format="$ 0,0[.]00" /><br />
</form>

$(document).ready(function(){
   $('#calx').calx();
});

Configuration

Configuration can be thrown when initializing calx, default configuration is shown below

{
    autocalculate:true,
    language:{
	id : 'en',
	config: {
	    delimiters: {
		thousands: ',',
		decimal: '.'
	    },
	    abbreviations: {
		thousand: 'k',
		million: 'm',
		billion: 'b',
		trillion: 't'
	    },
	    ordinal: function (number) {
		var b = number % 10;
		return (~~ (number % 100 / 10) === 1) ? 'th' :
		    (b === 1) ? 'st' :
		    (b === 2) ? 'nd' :
		    (b === 3) ? 'rd' : 'th';
	    },
	    currency: {
		symbol: '$'
	    }
	}
    }
}

• autocalculate : default is true, form will be calculated when user change the form value, if false, user can trigger the calculation by call 'calculate'

$('#calx').calx('calculate')

• language : define language configuration, will be used against data-format value
  • id : define language id
  • config : define language config

Formatting

jQuery Calx uses Numeral.js version 1.4.9 by Adam Drapper in it's core, for format details please visit http://numeraljs.com/