jquery-mobile - jQuery 手机 : number input and plus/minus buttons inline

Question

有没有可能用左边的减号按钮和右边的加号按钮输入数字？或者也可能 --++ 以更大的步幅改变值(value)。

我知道我不是第一个问这个问题的人，但是: This解决方案在第一轮没有正确显示，来自 Github 的 jQuery-Mobile-Stepper-Widget(无法发布另一个链接，因为我是新手)不适用于当前版本的 jQuery Mobile。

结果应类似于此问题中的屏幕截图:Has anyone implemented jQuery Mobile Add (+/-) Button Number Incrementers? jQuery Mobile 中的水平分组按钮

任何想法或新的片段，与当前版本的 jQuery 移动一起工作？

Answer 1

这是一个提示，剩下的就是纯粹的 CSS 工作和额外的 JS 代码来控制值，例如最大值、最小值……等

HTML

 <div data-role="controlgroup" data-type="horizontal" data-mini="true">
   <button id="plus" data-inline="true">+</button>
   <input type="text" id="number" value="0" disabled="disabled" />
   <button id="minus" data-inline="true">-</button>
 </div>

代码

$('#plus').unbind('click').bind('click', function () {
    var value = $('#number').val();
    value++;
    $('#number').val(value);
});

$('#minus').unbind('click').bind('click', function () {
    var value = $('#number').val();
    value--;
    $('#number').val(value);
});

JSFiddle