Download (zip)

Small plugin for building formulas with your own static values like product and shipping pricing. You can add multiple select options with integer values to build a formula on.

Installation: Bower

bower install jquery-formulae

Add depencies

Javascript

	<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"><script>
	<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"><script>
	<script src="/path/to/formulae/dist/jquery.formulae.js"><script>

Stylesheets

	<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
	<link rel="stylesheet" type="text/css" href="src/jquery.formulae.css"  media='all'/>

Setup Formulae

	<div id="formulae"></div>

Add formulae with this code:

	$("#formulae").jqueryFormulae();

Options:

Add a select input form:

	$("#formula").jqueryFormulae({
	    inputs: {
	        "shipping": {
                    'label':'Shipping',
                    'name':'shipping',
                    'class': 'shipping',
                    'type':'select',
                    'values': {
                        1 : {'label':'Shipping 1 (€ 10,-)', 'value': 10},
                        2 : {'label':'Shipping 2 (€ 20,-)', 'value': 20},
                        3 : {'label':'Shipping 3 (€ 30,-)', 'value': 30},
                        4 : {'label':'Shipping 4 (€ 40,-)', 'value': 40}
                    }
                },
                "products": {
                    'label': 'Products',
                    'name':'products',
                    'class': 'products',
                    'type': 'select',
                    'values': {
                        1: {'label': 'T-shirt', 'value': 20.5},
                        2: {'label': 'Sweater', 'value': 49.9},
                        3: {'label': 'Pants', 'value': 80},
                        4: {'label': 'Jewelry', 'value': 289}
                    }
                }
	    }
	});

Defaults

    wrapper: "<ul class=\"jqueryFormulae\"></ul>",
    items: "li",
    newMsg: "<span class=\"glyphicon glyphicon-plus\">",
    removeicon: "glyphicon glyphicon-remove-circle",
    popoverPlacement: "auto bottom",
    keyname: "math",
    inputs: {},
    defaultinputs: {
        "number": {
            "name": "custom",
            "type": "number",
            "class": "custom"
        }
    },
    math: [
        {"label": "<span class=\"glyphicon glyphicon-plus\"></span>", "value": "+"},
        {"label": "<span class=\"glyphicon glyphicon-minus\"></span>", "value": "-"},
        {"label": "<span class=\"glyphicon glyphicon-remove\"></span>", "value": "*"}
    ]