努力让Bootstrap TouchSpin工作

时间:2015-06-03 11:22:25

标签: jquery html twitter-bootstrap

我正在尝试使用Bootstrap TouchSpin选择器向联系表单添加数字选择器。我基本上做错了,我看不到 - +/-按钮不起作用......有人指向正确的方向吗?以下是以容器流体开头的代码:

<div class="container-fluid">
<div class="row drop">
<div class="container">
<div class="col-md-4">

<label for="demo1">
    Example with postfix (large):
</label>
<div class="input-group bootstrap-touchspin">
<span class="input-group-btn">
<button class="btn btn-default bootstrap-touchspin-down" type="button">
    -
</button>

</span>
<span class="input-group-addon bootstrap-touchspin-prefix" style="display: none;"></span>

<input id="demo1" class="form-control" type="text" name="demo1" value="55" style="display: block;"></input>

<span class="input-group-addon bootstrap-touchspin-postfix">
    %
</span>
<span class="input-group-btn">

<button class="btn btn-default bootstrap-touchspin-up" type="button">
    +
</button>
</div>    
</div>
</div>
</div>
</div>
<div class="container-fluid footer">
</div>

<script>
        $("input[name='demo1']").TouchSpin({
            min: 0,
            max: 100,
            step: 0.1,
            decimals: 2,
            boostat: 5,
            maxboostedstep: 10,
            postfix: '%'
        });
    </script>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.bootstrap-touchspin.min.js"></script>

1 个答案:

答案 0 :(得分:1)

您需要使用包含脚本来覆盖内联JavaScript代码。

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.bootstrap-touchspin.min.js"></script>
<script>
    $("input[name='demo1']").TouchSpin({
        min: 0,
        max: 100,
        step: 0.1,
        decimals: 2,
        boostat: 5,
        maxboostedstep: 10,
        postfix: '%'
    });
</script>