jQuery Mobile：数字输入和内联加/减按钮答案

【问题标题】：jQuery Mobile: number input and plus/minus buttons inlinejQuery Mobile：数字输入和内联加/减按钮
【发布时间】：2013-03-23 15:11:37
【问题描述】：

是否有可能在左侧使用减号按钮，在右侧使用加号按钮输入数字？或者也可能 -- ++ 以更大的步骤改变价值。

我知道我不是第一个提出这个问题的人，但是： This 解决方案在第一轮显示不正确，并且来自 Github 的 jQuery-Mobile-Stepper-Widget（由于我是新手，无法发布另一个链接）不适用于当前版本的 jQuery Mobile。

结果应该类似于这个问题的截图：Has anyone implemented jQuery Mobile Add (+/-) Button Number Incrementers? 分别是 jQuery Mobile 中的水平分组按钮

有任何想法或新的 sn-ps，可以使用当前版本的 jQuery mobile 吗？

【问题讨论】：

你有没有尝试过？
看起来 CSS 在 spinbox 上搞砸了 - 按钮仍然有效，只是它们放错了位置。正在努力。
CSS 更新。 Fwiw，spinbox 是一个更大（甚至还没有完成）项目的一部分，该项目旨在成为编写 jQM 插件的指南——它并不是真的那么成熟，但我确实更新了足够多的内容，让它看起来也不错。
谢谢！但是在 Firefox (Desktop) 上，按钮与输入的对齐不是像素完美的。我不得不添加一个 padding-top 和 padding-bottom: padding-top:7.5px; padding-bottom:9.5px 或 0.45em 和 0.6em 我在 jqm-spinbox.js w.d.input.css({'width':'40px','padding-top':'0.45em', 'padding-bottom':'0.6em'}); 的第 42 行添加了这个在 Android 模拟器上，加号和减号按钮根本不显示。为什么会这样？
Here 是几个 +/- 数字微调器。

标签： jquery-mobile

【解决方案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

【讨论】：

【解决方案2】：

在 jQM 中，输入类型编号可以发挥您想要的最大作用

<input type="number" name="number" value="0"/>

如果您需要更花哨的样式，则必须遵循 Omar 的代码

【讨论】：

对我来说 type="number" 看起来与 type="text" 完全相同（Firefox 19、IE 10、使用 PhoneGap 的 Android）。所以要么我对 jQM 做错了，要么这比 jQM 更像是浏览器的事情。 html5 input types

【解决方案3】：

<i onclick="qty('plus');" class="fa fa-plus c_pointer"></i>
<input type="text" id="prdqty" name="qty" value="1" placeholder="1">
<i onclick="qty('minus');" class="fa fa-minus c_pointer"></i>
function qty(val){
pqty = $('#prdqty').val();
if (val == "plus") {
  var newVal = parseFloat(pqty) + 1;
} else {
if (pqty > 1) {
  var newVal = parseFloat(pqty) - 1;
} else {
  newVal = 1;
}
}
$('#prdqty').val(newVal);
}

【讨论】：