Spinbox 示例

Spinbox 是一个对原生的输入框进行数字输入增强的组件，模拟 HTML5 的新增元素 <input type="number">。

设置默认值及 3 位数字长度限制

需要使用 Spinbox 默认类名 .spinbox 包裹输入框和 .spinbox-up/.spinbox-down 递增/递减 按钮。可以使用 .digits-3 类使数字框显示为 3 个数字的宽度。

<div id="spinboxIllustration" class="spinbox digits-3" data-provide="spinbox">
  <input id="overviewSpinboxInput" type="text" value="3" class="form-control input-mini spinbox-input">
  <div class="spinbox-buttons btn-group btn-group-vertical">
    <button type="button" class="btn btn-default btn-xs spinbox-up">
      <span class="glyphicon glyphicon-chevron-up"></span>
      <span class="sr-only">Increase</span>
    </button>
    <button type="button" class="btn btn-default btn-xs spinbox-down">
      <span class="glyphicon glyphicon-chevron-down"></span>
      <span class="sr-only">Decrease</span>
    </button>
  </div>
</div>

长按时禁止自动滚动

<div id="mySpinboxWithHold" class="spinbox digits-3">
  <input type="text" value="3" class="form-control input-mini spinbox-input">
  <div class="spinbox-buttons btn-group btn-group-vertical">
    <button type="button" class="btn btn-default btn-xs spinbox-up">
      <span class="glyphicon glyphicon-chevron-up"></span>
      <span class="sr-only">Increase</span>
    </button>
    <button type="button" class="btn btn-default btn-xs spinbox-down">
      <span class="glyphicon glyphicon-chevron-down"></span>
      <span class="sr-only">Decrease</span>
    </button>
  </div>
</div>

<script type="text/javascript">
$('#mySpinboxWithHold').spinbox({
    hold: false
});  
</script>

设置单位

<div id="mySpinboxWithUnits" class="spinbox digits-3">
  <input type="text" value="3px" class="form-control input-mini spinbox-input">
  <div class="spinbox-buttons btn-group btn-group-vertical">
    <button type="button" class="btn btn-default btn-xs spinbox-up">
      <span class="glyphicon glyphicon-chevron-up"></span>
      <span class="sr-only">Increase</span>
    </button>
    <button type="button" class="btn btn-default btn-xs spinbox-down">
      <span class="glyphicon glyphicon-chevron-down"></span>
      <span class="sr-only">Decrease</span>
    </button>
  </div>
</div>
    
<script type="text/javascript">
$('#mySpinboxWithUnits').spinbox({
    units: ['px']
});
</script>

调用方法

<div id="mySpinboxWithDefault" class="spinbox digits-3" data-provide="spinbox">
  <input id="mySpinboxWithDefaultInput" type="text" value="3" class="form-control input-mini spinbox-input" disabled="disabled">
  <div class="spinbox-buttons btn-group btn-group-vertical">
    <button type="button" class="btn btn-default btn-xs spinbox-up">
      <span class="glyphicon glyphicon-chevron-up"></span>
      <span class="sr-only">Increase</span>
    </button>
    <button type="button" class="btn btn-default btn-xs spinbox-down">
      <span class="glyphicon glyphicon-chevron-down"></span>
      <span class="sr-only">Decrease</span>
    </button>
  </div>
</div>

<script type="text/javascript">
$('#btnSpinboxSetValue').click(function() {
    $('#mySpinboxWithDefault').spinbox('value', 4);
});
$('#btnSpinboxGetValue').click(function() {
    alert("value: " + $('#mySpinboxWithDefault').spinbox('value'));
});
$('#btnEnableSpinbox').click(function() {
    $('#mySpinboxWithDefault').spinbox('enable');
});
$('#btnDisableSpinbox').click(function() {
    $('#mySpinboxWithDefault').spinbox('disable');
});
$('#btnSpinboxDestroy').click(function() {
    $('#mySpinboxWithDefault').spinbox('destroy');
});
</script>

事件监听

<div id="mySpinboxWithEvents" class="spinbox digits-3" data-provide="spinbox">
  <input type="text" value="3" class="form-control input-mini spinbox-input">
  <div class="spinbox-buttons btn-group btn-group-vertical">
    <button type="button" class="btn btn-default btn-xs spinbox-up">
      <span class="glyphicon glyphicon-chevron-up"></span>
      <span class="sr-only">Increase</span>
    </button>
    <button type="button" class="btn btn-default btn-xs spinbox-down">
      <span class="glyphicon glyphicon-chevron-down"></span>
      <span class="sr-only">Decrease</span>
    </button>
  </div>
</div>
    
<script type="text/javascript">
$('#mySpinboxWithEvents').on('changed.bs.spinbox', function(event, value) {
    console.log('Current spinbox value: ' + value);
});
</script>