This time I will share jQuery Plugin and tutorial about Customizable Number Input Spinner Plugin with jQuery – Spinner.js, hope it will help you in programming stack.
Spinner.js is a jQuery plugin that turns a normal text input into a highly customizable number spinner with up/down arrows for easier numeral data input (currency, quantity, daytime, etc).
Features:
- Arrow-up for increment
- Arrow-down for decrement
- Press Arrows or Left-mouse cause continuous changing
- Compatible with Bootstrap framework
Basic usage:
1. Include jQuery library and the jQuery spinner.js plugin on the webpage.
1 |
< script src = "/path/to/cdn/jquery.min.js" ></ script > |
2 |
< script src = "dist/jquery.spinner.min.js" ></ script > |
2. Create a normal text input field and specify the data rule (see below) using the data-rule
attribute.
1 |
< div class = "spinner" data-trigger = "spinner" id = "spinner" > |
2 |
< input type = "text" value = "1" data-rule = "quantity" > |
3 |
< div class = "spinner-controls" > |
4 |
< a href = "javascript:;" data-spin = "up" >+</ a > |
5 |
< a href = "javascript:;" data-spin = "down" >-</ a > |
3. Initialize the plugin with default options.
1 |
$("#spinner").spinner(); |
4. All possible rules with default values.
1 |
defaults: { min: null , max: null , step: 1, precision: 0 }, |
2 |
currency: { min: 0.00, max: null , step: 0.01, precision: 2 }, |
3 |
quantity: { min: 1, max: 999, step: 1, precision: 0 }, |
4 |
percent: { min: 1, max: 100, step: 1, precision: 0 }, |
5 |
month: { min: 1, max: 12, step: 1, precision: 0 }, |
6 |
day: { min: 1, max: 31, step: 1, precision: 0 }, |
7 |
hour: { min: 0, max: 23, step: 1, precision: 0 }, |
8 |
minute: { min: 1, max: 59, step: 1, precision: 0 }, |
9 |
second: { min: 1, max: 59, step: 1, precision: 0 } |
5. API.
3 |
.spinner( 'changed' , function (e, newVal, oldVal){ |
6 |
.spinner( 'changing' , function (e, newVal, oldVal){ |
6. More Html5 data
attributes.
data-min
: the minimum value, default is null.
data-max
: the maximum value, default is null.
data-step
: the changing-value of per-step, if passed as a function, the function will be called within the spinner object scope.
data-precision
: the precision of value
Changelog:
2019-09-09
- Moved spinningTimer to Spinning scope instead of global (shared) scope
2018-09-08
2015-03-18
- v0.2.0: Add noConflict function
This awesome jQuery plugin is developed by vsn4ik. For more Advanced Usages, please check the demo page or visit the official website.