jtsage / jquery-mobile-spinbox

A simple spinner for number inputs in jQueryMobile

jQuery-Mobile-Spinbox

Spinbox is a jQuery-mobile based number spinner. Full Documentation and Demos

The spinbox control is simple to use - just load the script after jQM, and set your data-type="spinbox". Initial input type can be whatever you want, nothing is changed - min/max are enforced with the buttons.

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script> 
<script type="text/javascript" src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>

<!-- Optional Mousewheel support: http://brandonaaron.net/code/mousewheel/docs -->
<script type="text/javascript" src="PATH/TO/YOUR/COPY/OF/jquery.mousewheel.min.js"></script>

<script type="text/javascript" src="http://dev.jtsage.com/cdn/spinbox/latest/jqm-spinbox.min.js"></script>

A typical input:

<div class="ui-field-contain">
    <label for="spin">Input spinner</label>
    <input type="text" data-role="spinbox" name="spin" id="spin" value="60" min="0" max="100" />
</div>

jquery-mobile-spinbox's Issues

drag out and release

Hi, if you are on a desktop machine with a mouse you can start a spin but if you then drag the mouse outside of the + or - button and release the mouse the spin continues.

How can I change min/max value dynamically?

I created spinbox as below.

var spinbox = "

"

$(target).append(spinbox);

Then change min/max/value in other function as below since I would like to change min/max value depends on user's selection.

$('#' + id).spinbox({"dmax": max});
$('#' + id).spinbox({"dmin": min});
$('#' + id).val(val);
$('#' + id).text("refresh");

But UI(+,-) button layout seems something wrong.
When use following function to change max/min value, UI's becomes normal.

$('#' + id).attr("min", min);
$('#' + id).attr("max", max);

However above min/max values are not read after function creation. So it does not work correctly.

As temporary solution, I've modified jqm-spinbox.js as below to read min/max value from attribution when user press spinbox and it works.

_offset: function( obj, direction ) {
var tmp,
w = this,
o = this.options;
if ( !w.disabled ) {
o.dmin = ( typeof w.d.input.attr('min') !== 'undefined' ) ? parseInt(w.d.input.attr('min'),10) : Number.MAX_VALUE * -1; <= Added
o.dmax = ( typeof w.d.input.attr('max') !== 'undefined' ) ? parseInt(w.d.input.attr('max'),10) : Number.MAX_VALUE; <= Added

How can I set min/max value correctly?

Thanks

Horizontal spinner breaks across lines

Hi,
The horizontal spinner on my android smartphone breaks the buttons and text into separate lines. Not occurring on a desktop browser if [more than] enough width is provided.
Added the following line:

$ diff jqm-spinbox.js.1 jqm-spinbox.js
43a44
>                 w.d.input.css({'display':'inline-block'});

"-" button increases amount

The "-" button is now increasing the number in the input field. The Spinbox Demo page is showing this as well.

feature request: step

First of all, thank you very much for this nice plugin.

I have some numeric fields that holds decimal numbers, so the current implementation (for integers) is not working for those fields. Is there any chance to add a "step" attribute to the spinbox so that the plus/minus buttons would increment/decrease the value by e.g. 0.1? I would be more than happy to see this feature.

Not working with newer versions of jquery (1.4.0)

http://jsfiddle.net/murtho/UR5Qc/

Up/Down buttons don't work with Chrome 54 & 55 on Win 10

I have tried your demo with Chrome 54 & 55 on Windows 10 and found the Up/Down buttons do not work.
It works with me Firefox 50 and Edge. I can also get it work with Chrome if I switch to the mobile device view in the developer console.

EDIT: Strange enough, only some users are affected. It seems to work on some Windows 10 systems. pimatic/pimatic#1030 (comment)

how to trigger the spinbox js after ajax?

Hi, this worked before ajax, how to trigger or update after ajax load?

plz advise.

thx.

Non-integer Step

When the step option is set to a non-integer value (ie. 0.5), it seems the step is rounded (ie. 0.5 = 1).

I recommend you move the following code outside of the "if" statement it is currently in:

w.places = w._decimalPlaces(o.step);

Horizontal Spinner is broken

The horizontal Spinner is broken, or at least looks broken.

Tested on:
Firefox 19.0.2 (Ubuntu 12.10)
Chromium 24.0.1312.56 (Ubuntu 12.10)
Android Browser (Android 4.2.2)