# PIGNOSE Tab

View project on Github Download zip

### Basic formula

### Advanced formula

#### You can drag and drop each of below items to formula area.

If you want to set a value on your custom drag and drop item, Set data-value attribute on your element.

PI Variable (INT 3) Custom operator (+)

#### Also you can get the javascript object data by calling getFormula();

getFormula
JSON Data
The json data will be appeared when you click getFormula button.

#### If you want to change loadable data, And you use setFormula() function in case, Use callback like follows.

    $formula.data('formula').getFormula(function(data) {
    	// data.data is formula parsed object data.
    	console.log(data.data);
     });

### Methods

#### First of all, You can call the function to use $element.data('formula').Function Name();

name | value | description
--- | --- | ---
syntaxCheck(callback) | function | This feature can check the formula syntax, And inform result (passed or not) to label in the formula box. First argument are callback for checking result.
destroyDrag | function | You can destroy drag selection in formula.
selectAll | function | You can select all unit in formula.
click(pos) | function | If you want click and make a cursor in formula, Use this feature. You need to send the correct coordinate like event.clientX
keydown(key, shift) | function | This method helps you to insert a character by event.keycode. If you give second argument as boolean, You can insert new character which be combined with Shift key.
insertChar(key) | function | It is more simple usage to insert a character.
empty() | function | Remove all unit in formula, It seems like jQuery empty().
setFormula(data) | function | You can load formula units by javascript object.
getFormula(callback) | function | You can get formula units as javascript object.
insert(e) | function | You can insert html tag directly on formula.

### bower

> If you use bower.

    bower install jquery-formula

### npm

> If you use npm.

    npm install jquery-formula

### sample

    <div class="formula"></div>

    $(function() {
    	$('.formula').formula();
    });

    .formula {
        min-height: 400px;
    }

    .formula-wrapper .formula {
        background-color: #f8f8f8;
        border: 1px solid #d8d8d8;
        text-align: left;
        box-shadow: 0 4px 12px rgba(0, 0, 0, .25);
    }