Calculation Plug-in 介绍
The Calculation plug-in is designed to give easy-to-use jQuery functions for
commonly used mathematical functions.
This plug-in will work on all types of HTML elements—which means you can use
it to calculate values in elements or in elements. You can even mix and match
between element types.
Numbers are parsed from the element using parseNumber() method—which uses a
regular expression (/\d+(,\d{3})*(\.\d{1,})?/g) to parse out the numeric
value. You can change the regular expression that’s used to determine what’s
consider a number by changing the default regular expression.
Syntax Examples
-
$("input[@name^='price']").parseNumber();
This would return an array of potential number for every match in the selector -
$("input[@name^='sum']").sum();
Returns the sum of all the input objects that start with a name attribute of
“sum”. This breaks the jQuery chain. -
$("input[@name^=';sum']").sum("keyup", "#totalSum");
Updates the “#totalSum” element with the sum of all the input objects that
start with the name attribute of “sum” anytime the keyup event occurs within
those fields. This does not break the jQuery chain. -
$("input[@name^='avg']").avg();
Returns the average of all the input objects that start with a name attribute
of “avg”. -
$("input[@name^='avg']").avg("keyup", "#totalAvg");
Updates the “#totalAvg” element with the average of all the input objects that
start with the name attribute of “avg” anytime the keyup event occurs within
those fields. This does not break the jQuery chain. -
$("input[@name^='min']").min();
Returns the minimum value of all the input objects that start with a name
attribute of “min”. -
$("input[@name^='max']").max();
Returns the minimum value of all the input objects that start with a name
attribute of “max”. -
`$(“[@id^=total_item]”).calc(
// the equation to use for the calculation
“qty * price”,
// define the variables used in the equation, these can be a jQuery object
{
qty: $(“input[@name^=qty_item_]”),
price: $(“[@id^=price_item_]”)
},
// define the formatting callback, the results of the calculation are passed
to this function
function (s){
// return the number as a dollar amount
return “$” + s.toFixed(2);
},
// define the finish callback, this runs after the calculation has been
complete
function ($this){
// sum the total of the $(“[@id^=total_item]”) selector
var sum = $this.sum();
$(“#grandTotal”).text(
// round the results to 2 digits
“$” + sum.toFixed(2)
);
}
);`
This example shows off the code used quantity * price = total example
shown above.
- $.Calculation.setDefaults({ // regular expression used to detect numbers, if you want to force the field to contain // numbers, you can add a ^ to the beginning or $ to the end of the regex to force the // the regex to match the entire string: /^-?\d+(,\d{3})*(\.\d{1,})?$/g reNumbers: /(-|-\$)?(\d+(,\d{3})*(\.\d{1,})?|\.\d{1,})/g // should the Field plug-in be used for getting values of :input elements? , useFieldPlugin: true/false // a callback function to run when an parsing error occurs , onParseError: null // a callback function to run once a parsing error has cleared , onParseClear: null });
Use the setDefaults() method to change the default parameters for the
Calculation Plug-in. If the Field Plug-
in is loaded, then it will be used
by default.