zardo/bootstrap-spinedit

A spin edit control for Twitter Bootstrap.

Spin Edit for Twitter Bootstrap

, _(*1)

A spin edit control for Twitter Bootstrap., _(*2)

Tested with version 2.2.1., _(*3)

Demo

Click here for a live demo., _(*4)

Usage

This component relies on Twitter Bootstrap and jQuery., _(*5)

Basic usage:, _(*6)

<link rel="stylesheet" type="text/css" href="bootstrap.css" />
<link rel="stylesheet" type="text/css" href="bootstrap-spinedit.css" />

<input type="text" id="spinEdit" />

You can use the following additional options to modify the behaviour of the spin edit control:, _(*7)

• value: The initial value (default 0).
• minimum: The minimum allowed value (default 0).
• maximum: The maximum allowed value (default 100).
• step: The amount that control uses to increase or decrease its vaule (default 1).
• numberOfDecimals: The number of allowed decimals (default 0).

For example:, _(*8)

<link rel="stylesheet" type="text/css" href="bootstrap.css" />
<link rel="stylesheet" type="text/css" href="bootstrap-spinedit.css" />

<input type="text" id="spinEdit" />

Methods

setValue, _(*9)

Set the value of the spin edit., _(*10)

$('#spinEdit').spinedit('setValue', 100);

setMinimum, _(*11)

Set the minimum allowed value of the spin edit., _(*12)

$('#spinEdit').spinedit('setMinimum', -10000);

setMaximum, _(*13)

Set the maximum allowed value of the spin edit., _(*14)

$('#spinEdit').spinedit('setMaximum', 10000);

setStep, _(*15)

Set the step, by which the value of the spin edit is increased / decreased., _(*16)

$('#spinEdit').spinedit('setStep', 100);

increase, _(*17)

Increase the value of the spin edit with the value defined by its step property., _(*18)

$('#spinEdit').spinedit('increase');

decrease, _(*19)

Decrease the value of the spin edit with the value defined by its step property., _(*20)

$('#spinEdit').spinedit('decrease');

setNumberOfDecimals, _(*21)

Sets the number of allowed decimals., _(*22)

$('#spinEdit').spinedit('setNumberOfDecimals', 2);

Events

The spin edit supports one event, namely valueChanged. This event is triggered when its value changes., _(*23)

The event object has one additional property:, _(*24)

• value: The new value of the spin edit.

$('#spinEdit').on("valueChanged", function (e) {
    console.log(e.value);
});

License

This code is made available under the Apache License v2.0, the same as Twitter Bootstrap., _(*25)