jQuery Plugin For Incrementing And Decrementing A Number Input - userincr

File Size: 9.13 KB
Views Total: 7946
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
jQuery Plugin For Incrementing And Decrementing A Number Input - userincr

userincr is a lightweight jQuery input spinner plugin which allows you to increment and decrement an input field using external controls.

Todo:

  • step: user-controllable step function.
  • op: 'add' or 'mul', type of increment
  • spinbuttons: "<<,>>" if present, generate spin buttons
  • spin on keyboard and mouse wheel

How to use it:

1. Include jQuery javascript library and the jQuery userincr plugin in the Html document.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" ></script>
<script src="userincr.js"></script>

2.Create an input field that will be converted into a spinbox with up/down buttons.

<input type="text" class="demo" value="100">

3. Initialize the plugin on the input field you just created and pass the min/max options through .data facility.

$(function(){
  $("input.demo").userincr().data({
  'min':0,
  'max':1000
  });
});

4. Custom the spin buttons using buttonlabels option.

$("input.demo").userincr({
buttonlabels:{'dec':'▼','inc':'▲'},
});

Change log:

2014-09-20

  • improvement

2014-07-16

  • Allows to pass max/min options via data-* attributes.

This awesome jQuery plugin is developed by nsg21. For more Advanced Usages, please check the demo page or visit the official website.