HTML
CSS
JavaScript
HTML
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
<title>输入微调器组件jquery.bootstrap-touchspin - 光年(Light Year Admin)后台管理系统模板</title>
<link rel="icon" href="favicon.ico" type="image/ico">
<meta name="keywords" content="LightYear,光年,后台模板,后台管理系统,光年HTML模板">
<meta name="description" content="LightYear是一个基于Bootstrap v3.3.7的后台管理系统的HTML模板。">
<meta name="author" content="yinqi">
<link href="http://lyear.itshubao.com/iframe/css/bootstrap.min.css" rel="stylesheet">
<link href="http://example.itshubao.com/demo/css/materialdesignicons.min.css" rel="stylesheet">
<link href="http://libs.itshubao.com/bootstrap-touchspin/jquery.bootstrap-touchspin.css" rel="stylesheet">
<link href="http://lyear.itshubao.com/iframe/css/style.min.css" rel="stylesheet">
<style>

</style>
</head>
  
<body>
<div class="container-fluid">
  
  <div class="row">
    <div class="col-md-12">
      <div class="card">
        <div class="card-header"><h4>输入微调器组件 jquery.bootstrap-touchspin</h4></div>
        <div class="card-body">
          
          <div class="row">
            <div class="col-md-6">
              <div class="form-group">
                <label for="example-attr">使用data-属性配置示例</label>
                <input type="text" id="example-attr" name="example-attr" class="form-control" value="55"   
                data-bts-min="0"
                data-bts-max="100"
                data-bts-init-val=""
                data-bts-step="1"
                data-bts-decimal="0"
                data-bts-step-interval="100"
                data-bts-force-step-divisibility="round"
                data-bts-step-interval-delay="500"
                data-bts-prefix=""
                data-bts-postfix=""
                data-bts-prefix-extra-class=""
                data-bts-postfix-extra-class=""
                data-bts-booster="true"
                data-bts-boostat="10"
                data-bts-max-boosted-step="false"
                data-bts-mousewheel="true"
                data-bts-button-down-class="btn btn-secondary"
                data-bts-button-up-class="btn btn-secondary"/>
              </div>
              <div class="form-group">
                <label for="example-postfix">带后缀的示例</label>
                <input type="text" id="example-postfix" class="form-control" value="55" name="example-postfix" />
              </div>
              <div class="form-group">
                <label for="example-prefix">带前缀的示例</label>
                <input type="text" id="example-prefix" class="form-control" value="0" name="example-prefix" />
              </div>
              <div class="form-group">
                <label for="example-empty">空值的初始化</label>
                <input type="text" id="example-empty" class="form-control" value="" name="example-empty" />
              </div>
              <div class="form-group">
                <label for="example-button-postfix">按钮后缀</label>
                <input type="text" id="example-button-postfix" class="form-control" name="example-button-postfix" />
              </div>
              <div class="form-group">
                <label for="example-button-class">更改按钮类</label>
                <input type="text" id="example-button-class" class="form-control" name="example-button-class" />
              </div>
              <div class="form-group">
                <label for="example-boundaries">禁用边界</label>
                <input type="text" id="example-boundaries" class="form-control" name="example-boundaries" value="1234567890" />
              </div>
            </div>
            <div class="col-md-6">
              <div class="form-group">
                <label for="example-vertical">按钮垂直对齐</label>
                <input type="text" id="example-vertical" class="form-control" value="" name="example-vertical" />
              </div>
              <div class="form-group">
                <label for="example-icon-vertical">带有自定义图标的垂直按钮</label>
                <input type="text" id="example-icon-vertical" class="form-control" value="" name="example-icon-vertical" />
              </div>
              <div class="form-group">
                <label for="example-callback">使用numeraljs格式化数字的回调示例(可以使用任何其他方法)</label>
                <input type="text" id="example-callback" name="example-callback" class="form-control"
                  value="10000.00"
                  data-bts-min="-1000000"
                  data-bts-max="1000000"
                  data-bts-step=".01"
                  data-bts-decimals="2"  />
              </div>
              <div class="form-group">
                <label for="example-initval">初始化数值(输入框可用<code>input-sm</code>、<code>input-lg</code>指定大小)</label>
                <input type="text" id="example-initval" class="form-control" name="example-initval" />
              </div>
              <div class="form-group">
                <label for="example-button-group">按钮组</label>
                <div class="input-group">
                  <input type="text" id="example-button-group" class="form-control" name="example-button-group" value="50" />
          
                  <div class="input-group-btn">
                    <button type="button" class="btn btn-default">Action</button>
                    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                      <span class="caret"></span>
                      <span class="sr-only">Toggle Dropdown</span>
                    </button>
                    <ul class="dropdown-menu pull-right" role="menu">
                      <li><a href="#">Action</a></li>
                      <li><a href="#">Another action</a></li>
                      <li><a href="#">Something else here</a></li>
                      <li class="divider"></li>
                      <li><a href="#">Separated link</a></li>
                    </ul>
                  </div>
                </div>
              </div>
              <div class="form-group">
                <label for="example-replaced">空白/非数字替换</label>
                <input type="text" id="example-replaced" class="form-control" name="example-replaced" value="50" />
              </div>
              <div class="form-group">
                <label for="example-event">事件示例</label>
                <input type="text" id="example-event" class="form-control" name="example-event" value="50" />
              </div>
            </div>
            <div class="col-md-12">
              <pre id="pretextarea" style="height:200px;overflow:auto;"></pre>
            </div>
          </div>
          
        </div>
      </div>
    </div>
    
  </div>
  
</div>

<script type="text/javascript" src="http://lyear.itshubao.com/iframe/js/jquery.min.js"></script>
<script type="text/javascript" src="http://lyear.itshubao.com/iframe/js/bootstrap.min.js"></script>
<script type="text/javascript" src="http://libs.itshubao.com/bootstrap-touchspin/jquery.bootstrap-touchspin.min.js"></script>
<script src="https://cdn.bootcss.com/numeral.js/2.0.6/numeral.min.js"></script><!--有个示例需要用到的,这里用的网上的js,有需要的可自行下载-->
<script src="https://cdn.bootcss.com/numeral.js/2.0.6/locales/chs.min.js"></script>
</body>
</html>
CSS

  
JavaScript
$(document).ready(function(){
    // 使用data-属性配置示例
    $("#example-attr").TouchSpin({});
    // 后缀的示例
    $("#example-postfix").TouchSpin({
        min: 0,
        max: 100,
        step: 0.1,
        decimals: 2,
        boostat: 5,
        maxboostedstep: 10,
        postfix: '%'
    });
    // 前缀的示例
    $("#example-prefix").TouchSpin({
        min: -1000000000,
        max: 1000000000,
        stepinterval: 50,
        maxboostedstep: 10000000,
        prefix: '¥'
    });
    // 按钮垂直对齐
    $("#example-vertical").TouchSpin({
        verticalbuttons: true,
    });
    // 带有自定义图标的垂直按钮
    $("#example-icon-vertical").TouchSpin({
        verticalbuttons: true,
        verticalup: '<i class="mdi mdi-chevron-up"></i>',
        verticaldown: '<i class="mdi mdi-chevron-down"></i>'
    });
    // 使用numeraljs格式化数字的回调示例
    numeral.locale('chs');
    $("#example-callback").TouchSpin({
        callback_before_calculation: function (v) {
            return numeral(v).value();
        },
        callback_after_calculation: function (v) {
            return numeral(v).format("$0,0.00");
        }
    });
    // 空值的初始化
    $("#example-empty").TouchSpin();
    // 初始化数值
    $("#example-initval").TouchSpin({
        initval: 40
    });
    // 按钮后缀
    $("#example-button-postfix").TouchSpin({
        postfix: "一个按钮",
        postfix_extraclass: "btn btn-info"
    });
    // 按钮组
    $("#example-button-group").TouchSpin({
        prefix: "pre",
        postfix: "post"
    });
    // 更改按钮类
    $("#example-button-class").TouchSpin({
        buttondown_class: "btn btn-link",
        buttonup_class: "btn btn-link"
    });
    // 空白/非数字替换,输入空或者非数字时会被替换成10
    $("#example-replaced").TouchSpin({
        replacementval: 10
    });
    // 禁用边界
    $("#example-boundaries").TouchSpin({
        min: null,
        max: null
    });
    // 事件示例
    var i = $("#example-event"),
        demoarea = $("#pretextarea"),
        text = "";

    function writeLine(line) {
        text += line + "\n";
        demoarea.text(text);
        demoarea.scrollTop(
            demoarea[0].scrollHeight - demoarea.height()
        );
    }

    i.TouchSpin({});
    i.on("touchspin.on.startspin", function () {
        writeLine("touchspin.on.startspin");
    });
    i.on("touchspin.on.startupspin", function () {
        writeLine("touchspin.on.startupspin");
    });
    i.on("touchspin.on.startdownspin", function () {
        writeLine("touchspin.on.startdownspin");
    });
    i.on("touchspin.on.stopspin", function () {
        writeLine("touchspin.on.stopspin");
    });
    i.on("touchspin.on.stopupspin", function () {
        writeLine("touchspin.on.stopupspin");
    });
    i.on("touchspin.on.stopdownspin", function () {
        writeLine("touchspin.on.stopdownspin");
    });
    i.on("touchspin.on.min", function () {
        writeLine("touchspin.on.min");
    });
    i.on("touchspin.on.max", function () {
        writeLine("touchspin.on.max");
    });
});