Spinbox spinbox.js

Spinbox includes an enhanced numeric input based upon the native <input type="number">.

Usage

A spinbox allows for click interaction with a numeric input.

Currently there is a bug causing changed events to fire twice for some elements. The workaround is to disable this data-api, using $.off('fu.data-api')

Via JavaScript

Call the selectlist control via JavaScript:

$('#mySpinbox').spinbox();

Via data-attributes

To enable the spinbox control without writing JavaScript, add data-initialize="spinbox" to the .spinbox element that you wish to initialize. Such elements that exist when $.ready() executes will be initialized. Any spinbox markup that is programmatically created with data-initialize="spinbox" sometime after the initial page load will not immediately initialize. Rather, it will initialize when the mousedown event is fired on it.

Markup

Add class="spinbox" to a div within a class="fuelux" container.


<div class="spinbox" id="mySpinbox" data-initialize="spinbox">
  <input class="form-control input-mini spinbox-input" type="text">
  <div class="spinbox-buttons btn-group btn-group-vertical">
    <button class="btn btn-default spinbox-up btn-xs" type="button">
      <span class="glyphicon glyphicon-chevron-up"></span><span class="sr-only">Increase</span>
    </button>
    <button class="btn btn-default spinbox-down btn-xs" type="button">
      <span class="glyphicon glyphicon-chevron-down"></span><span class="sr-only">Decrease</span>
    </button>
  </div>
</div>

Methods

.spinbox('destroy')
Removes all functionality, jQuery data, and the markup from the DOM. Returns string of control markup. 
$('#mySpinbox').spinbox('destroy');
.spinbox('getIntValue')
Returns spinner value as a JS number (so, if spinner is set to "12,1px" it will return 12.1)
.spinbox('getValue')
Alias for .spinbox('value')
.spinbox('setValue')
Alias for .spinbox('value', number)
.spinbox('value')
Sets or returns the spinner value 
$('#mySpinbox').spinbox('value') 
$('#mySpinbox').spinbox('value', 11)

If value contains non-integers, the value returns as a string. Otherwise, the value returns as a number.

Options

Options that can be passed in via JavaScript once at initialization.

Name type default description
value number 1 Sets the initial spinbox value
min number 1 Sets the minimum spinbox value
max number 999 Sets the maximum spinbox value
step number 1 Sets the increment by which the value in the spinbox will change each time the spinbox buttons are pressed
limitToStep boolean false Limits the spinner value to increments of the step value. Eg. If step is 5, spinner values will be limited to increments of 5, (0, 5, 10, 15...)
hold boolean true If true, the spinbox will react to its buttons being pressed and held down
hold boolean true If true, the spinbox will react to its buttons being pressed and held down
speed string "medium" Assigns spinbox speed when buttons are held down. Options include "fast","medium","slow".
disabled boolean false Creates a disables spinbox.
units array [] Units that will be allowed to appear and be typed into the spinbox input along with the numeric value. For example, setting units to a value of ['px', 'en', 'xx'] would allow px, en, and xx units to appear within the spinbox input

Events

Event Type Description
changed.fu.spinbox This event fires when the value changes (either by selecting an item from the list or updating the input value directly). Arguments include event, value where value is the current value of the spinner. Returns the current value of the spinner.

All spinbox events are fired on the .spinbox classed element.


$('#mySpinbox').on('changed.fu.spinbox', function () {
  // do something
})

Example

Spinbox includes an enhanced numeric input based upon the native <input type="number">. Wrap the input and the increment/decrement buttons within .fuelux .spinbox

Sample Methods