A Number-Spinner based-on jQuery, Support Keyboard operations and continuous changing.
<!-- // ref javascript file -->
<script src="dist/js/jquery.spinner.js"></script>
<!-- // spinner plugin DOM -->
<div data-trigger="spinner">
<button type="button" data-spin="up">+</button>
<input type="text" value="1" data-ruler="quantity">
<button type="button" data-spin="down">-</button>
</div>Download the production version or the development version.
In your web page:
<script src="jquery.js"></script>
<script src="dist/js/jquery.spinner.js"></script>
<script>
$("#spinner")
.spinner('delay', 200) //delay in ms
.spinner('changed', function(e, newVal, oldVal) {
// trigger lazed, depend on delay option.
})
.spinner('changing', function(e, newVal, oldVal) {
// trigger immediately
});
</script>
<div data-trigger="spinner" id="spinner">
<button type="button" data-spin="up">+</button>
<input type="text" value="1" data-ruler="quantity">
<button type="button" data-spin="down">-</button>
</div>delay to fire changed event in millisecond, default is 500.
changed event handler, the changed event is a lazy-mode event, default is null.
changing event handler, the changing event will be fired immediately, default is null.
the minimum value, default is null.
the maximum value, default is null.
the changing-value of per-step, if passed as a function, the function will be called within the spinner object scope.
the precision of value
currency: { min: 0.00, max: null, step: 0.01, precision: 2 },
quantity: { min: 1, max: 999, step: 1, precision:0 },
percent: { min: 1, max: 100, step: 1, precision:0 },
month: { min: 1, max: 12, step: 1, precision:0 },
day: { min: 1, max: 31, step: 1, precision:0 },
hour: { min: 0, max: 23, step: 1, precision:0 },
minute: { min: 1, max: 59, step: 1, precision:0 },
second: { min: 1, max: 59, step: 1, precision:0 }Usage:
<input type="text" value="1" data-rule="quantity"><link href="dist/css/bootstrap-spinner.css" rel="stylesheet">
<div class="input-group spinner" data-trigger="spinner">
<input type="text" class="form-control text-center" value="1" data-rule="quantity">
<span class="input-group-addon">
<a href="javascript:;" class="spin-up" data-spin="up"><i class="fa fa-caret-up"></i></a>
<a href="javascript:;" class="spin-down" data-spin="down"><i class="fa fa-caret-down"></i></a>
</span>
</div><div data-trigger="spinner">
<input type="text" value="0" title="this field isn't a spinning.">
<input type="text" value="1" data-spin="spinner" data-rule="quantity" data-max="10">
</div>Use hidden field
<div data-trigger="spinner" id="spinner">
<span id="spinner-value"></span>
<input type="hidden" value="1" data-spin="spinner" data-rule="quantity" data-max="10">
<a href="javascript:;" data-spin="down">-</a>
<a href="javascript:;" data-spin="up">+</a>
</div>
<script>
$("#spinner").spinner('changing', function(e, newVal, oldVal) {
$('#spinner-value').html(newVal);
});
</script>// To skip 0
$("#spinner").spinner({
step: function(dir) {
// 'this' references to the spinner object
if ((this.oldValue === 1 && dir === 'down') || (this.oldValue === -1 && dir === 'up')) {
return 2;
}
return 1;
}
});
// or use API syntax
$("#spinner").spinner('step', function(dir) {
// your logic here
});Copyright Vasilii A., 2015–2018 Copyright xixilive, 2013–2015
Licensed under the MIT License.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent