如何将 FuelUX Spinner 附加到输入元素？答案

【问题标题】：How to attach FuelUX Spinner to input element?如何将 FuelUX Spinner 附加到输入元素？
【发布时间】：2013-09-18 20:57:58
【问题描述】：

我有一个直接取自 FuelUX 文档的 FuelUX 微调器：

<!DOCTYPE html lang="en">
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="http://fuelcdn.com/fuelux/2.3/css/fuelux.min.css" rel="stylesheet" />
    <link href="http://fuelcdn.com/fuelux/2.3/css/fuelux-responsive.min.css" rel="stylesheet" /> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
    <script src="http://fuelcdn.com/fuelux/2.3/loader.min.js" type="text/javascript"></script>
</head>
<body class="fuelux">
    <div id="MySpinner" class="spinner">
        <input type="text" class="input-mini spinner-input">
        <div class="spinner-buttons btn-group btn-group-vertical">
            <button type="button" class="btn spinner-up">
                <i class="icon-chevron-up"></i>
            </button>
            <button type="button" class="btn spinner-down">
                <i class="icon-chevron-down"></i>
            </button>
        </div>
    </div>
</body>
</html>

但是，当微调器以 chrome 呈现时，微调按钮会从输入元素中分离出来。旋转按钮可以正常增加和减少输入字段中的整数。除了加载 javascript 之外，我还需要做些什么来让旋转按钮附加到输入字段？

【问题讨论】：

标签： javascript twitter-bootstrap spinner fuelux

【解决方案1】：

也许您只是缺少 CSS？您可以在此处找到所需一切的详细信息：

https://github.com/ExactTarget/fuelux/wiki/Using-Fuel-UX

【讨论】：

感谢您的回复。我已经更新了代码以反映您的建议，并且微调器仍然有效。渲染已更改，但仍然不正确。我在 Mac OSX 10.8.4 版本 29.0.1547.65 上运行 Chrome。在我上面发布的当前版本中，微调器在输入元素内呈现，但超出了输入元素的边框。
这很奇怪。我在最小示例中看到了同样的情况（某些 CSS 样式未正确应用），但在 exacttarget.github.io/fuelux/#spinner 的页面上，它看起来应该如此。具有更好 CSS-fu 的人可能能够解释这一点，但您希望您会发现这在实际使用中不是问题（与最小测试相反）。
FWIW，我在 mac 上的 firefox 和 safari 中尝试了相同的示例。它们都呈现相同的 - 不正确。我想使用 FuelUX，但这对我们来说是一个很好的选择。我将回顾一下 github 上的用法，看看是否能发现会导致渲染问题的差异。我希望这些例子更简洁，以免这些事情发生。

【解决方案2】：

您需要将 class="spinbox" 添加到 class="fuelux" 容器内的 div 中。

<div class="col-lg-12 fuelux">
<div class="spinbox" data-initialize="spinbox" id="mySpinbox">
  <input type="text" class="form-control input-mini spinbox-input">
  <div class="spinbox-buttons btn-group btn-group-vertical">
    <button type="button" class="btn btn-default spinbox-up btn-xs">
      <span class="glyphicon glyphicon-chevron-up"></span><span class="sr-only">Increase</span>
    </button>
    <button type="button" class="btn btn-default spinbox-down btn-xs">
      <span class="glyphicon glyphicon-chevron-down"></span><span class="sr-only">Decrease</span>
    </button>
  </div>
</div>
</div>

【讨论】：