Customizable Number Input Spinner Plugin with jQuery Spinner js - Free Download Customizable Number Input Spinner Plugin with jQuery - Spinner.js

Free Download Customizable Number Input Spinner Plugin with jQuery – Spinner.js

Posted on

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.

Customizable Number Input Spinner Plugin with jQuery Spinner js - Free Download Customizable Number Input Spinner Plugin with jQuery - Spinner.js
File Size: 31.7 KB
Views Total: 9336
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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>
6   </div>
7 </div>

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.

1 $("#spinner")
2   .spinner('delay', 200) //delay in ms
3   .spinner('changed', function(e, newVal, oldVal){
4     //trigger lazed, depend on delay option.
5   })
6   .spinner('changing', function(e, newVal, oldVal){
7     //trigger immediately
8   });

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

  • v0.2.1: JS  update

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.

source : jquery.net