NumericBox


Features
  1. Formats: numeric, currency, percentage, exponent and no. of decimals.
  2. Events: step, stepup, stepdown.
  3. Keyboard up and down arrow keys support.
  4. Mouse wheel support.
  5. Custom up and down icons support.
  6. Customizable css themes.
  7. span and input element support.

NumericBox can be created declaratively with a span or input element along with or without options. When no options provided, numeric box is initialized with default options( No min, no max, format set to number).

  <span data-win-control="Bixaps.UI.NumericBox" data-win-options="{ options here }"/>

  or

  <span data-win-control="Bixaps.UI.NumericBox" data-win-options="{ options here }"/>


NumericBox options

  1. min: sets the minimum value to start with
  2. max: sets the maximum value.
  3. step: step value to change
  4. format: C for Currency, P for percentage, E for exponent
  5. value: Initial value to set.
  6. decimalPlaces: Number of decimal places. Either min, max or step value should be in decimals to apply decimal places.
  7. icons: An Json object with properties up and down

Events

  1. step: fired whenever step value is changed (up or down).
  2. stepDown: fired whenever step value is changed down.
  3. stepUp: fired whenever step value is changed up.

Css classes

  1. .win-numericbox: NumericBox element
  2. .win-numericbox-input: input element inside Numericbox
  3. .win-numericbox-up: up button
  4. .win-numericbox-down: down button

Examples

Numeric box without any options
  <span id="Span1" data-win-control="Bixaps.UI.NumericBox"></span>


Numeric box with options min 5, max 25 and format currency
 <input data-win-control="Bixaps.UI.NumericBox" data-win-options="{
	min: 5,
	max:25,
	format:'C'
}" />


Numeric box with options step: 0.01, value:23.01
 <span id="numeric3" data-win-control="Bixaps.UI.NumericBox" data-win-options="{ step:0.01,value:23.01}"></span>


Numeric box with options min:5, max:25, format:Exponent
  <input data-win-control="Bixaps.UI.NumericBox" data-win-options="{
	min: 5,
	max:25,
	format:'E'
}" />


Numeric box with options min:5, max:25, format:Percentage
  <input data-win-control="Bixaps.UI.NumericBox" data-win-options="{
	min: 5,
	max:25,
	format:'P'
}" />


Numeric box with options min:5, max:25, decimal places:1
   <input data-win-control="Bixaps.UI.NumericBox" data-win-options="{
	
	min:5.00,
                            max:10.05,
	step:0.10
	
}" />

Last edited Aug 4, 2013 at 8:11 AM by rajbandi, version 2

Comments

No comments yet.