专为移动端和触摸屏设计的输入框数字增减组件,支持鼠标滚轮和上下方向键,让您的操作更流畅。
<input id="demo0"
type="text"
value="55"
name="demo0"
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-default"
data-bts-button-up-class="btn btn-default"
/>
<script>
$("input[name='demo0']").TouchSpin({
});
</script>
<input id="demo_vertical" type="text" value="" name="demo_vertical">
<script>
$("input[name='demo_vertical']").TouchSpin({
verticalbuttons: true
});
</script>
<input id="demo_vertical2" type="text" value="" name="demo_vertical2">
<script>
$("input[name='demo_vertical2']").TouchSpin({
verticalbuttons: true,
verticalupclass: 'glyphicon glyphicon-plus',
verticaldownclass: 'glyphicon glyphicon-minus'
});
</script>
<input id="demo1" type="text" value="55" name="demo1">
<script>
$("input[name='demo1']").TouchSpin({
min: 0,
max: 100,
step: 0.1,
decimals: 2,
boostat: 5,
maxboostedstep: 10,
postfix: '%'
});
</script>
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="demo2" class="col-md-5 control-label">Example:</label> <input id="demo2" type="text" value="0" name="demo2" class="col-md-7 form-control">
</div>
</form>
<script>
$("input[name='demo2']").TouchSpin({
min: -1000000000,
max: 1000000000,
stepinterval: 50,
maxboostedstep: 10000000,
prefix: '$'
});
</script>
<input id="demo3" type="text" value="" name="demo3">
<script>
$("input[name='demo3']").TouchSpin();
</script>
设置初始值时,若输入框已设置 `value` 属性,则该设置会被忽略。
<input id="demo3_21" type="text" value="" name="demo3_21">
<script>
$("input[name='demo3_21']").TouchSpin({
initval: 40
});
</script>
<input id="demo3_22" type="text" value="33" name="demo3_22">
<script>
$("input[name='demo3_22']").TouchSpin({
initval: 40
});
</script>
可通过在输入框上添加 `input-sm` 或 `input-lg` 类来调整整体控制器大小;若插件应用于 `input-group` 内,则可使用 `input-group-sm` 或 `input-group-lg` 类。
<input id="demo4" type="text" value="" name="demo4" class="input-sm">
<script>
$("input[name='demo4']").TouchSpin({
postfix: "a button",
postfix_extraclass: "btn btn-default"
});
</script>
<div class="input-group input-group-lg">
<input id="demo4_2" type="text" value="" name="demo4_2" class="form-control input-lg">
</div>
<script>
$("input[name='demo4_2']").TouchSpin({
postfix: "a button",
postfix_extraclass: "btn btn-default"
});
</script>
<div class="input-group">
<input id="demo5" type="text" class="form-control" name="demo5" 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>
<script>
$("input[name='demo5']").TouchSpin({
prefix: "pre",
postfix: "post"
});
</script>
$("input[name='demo6']").TouchSpin({
buttondown_class: "btn btn-link",
buttonup_class: "btn btn-link"
});
$("input[name='demo7']").TouchSpin({
replacementval: 10
});
| 选项 | 默认值 | 说明 |
|---|---|---|
initval | "" | 当输入框未设置 `value` 属性时应用。空字符串表示初始化时值保持为空。 |
replacementval | "" | 当用户留空或输入非数字时应用。空字符串表示值不会被替换。 |
min | 0 | 最小值。 |
max | 100 | 最大值。 |
step | 1 | 每次增减的步长。 |
forcestepdivisibility | 'round' | 强制值能被步长整除: | | | |
decimals | 0 | 小数点位数。 |
stepinterval | 100 | 微调器刷新间隔(毫秒)。 |
stepintervaldelay | 500 | 微调器开始旋转前的延迟(毫秒)。 |
verticalbuttons | false | 启用传统的上下按钮。 |
verticalupclass | 'glyphicon glyphicon-chevron-up' | 启用垂直按钮模式时,上按钮的类。 |
verticaldownclass | 'glyphicon glyphicon-chevron-down' | 启用垂直按钮模式时,下按钮的类。 |
prefix | "" | 输入框前的文本。 |
postfix | "" | 输入框后的文本。 |
prefix_extraclass | "" | 前缀的额外类。 |
postfix_extraclass | "" | 后缀的额外类。 |
booster | true | 启用时,按住按钮,微调器会持续加速。 |
boostat | 10 | 每次加速的步长。 |
maxboostedstep | false | 加速时的最大步长。 |
mousewheel | true | 启用鼠标滚轮来改变输入值。 |
buttondown_class | 'btn btn-default' | 下按钮的类。 |
buttonup_class | 'btn btn-default' | 上按钮的类。 |
buttondown_txt | '-' | 下按钮内的内容。 |
buttonup_txt | '+' | 上按钮内的内容。 |
插件会在原始输入框上触发以下事件,您可以在此处进行监听。
| 事件 | 描述 |
|---|---|
change | 通过按钮改变值时触发(当微调器达到由 `max` 或 `min` 设置的限制时,不触发)。 |
touchspin.on.startspin | 微调器开始向上或向下旋转时触发。 |
touchspin.on.startupspin | 微调器开始向上旋转时触发。 |
touchspin.on.startdownspin | 微调器开始向下旋转时触发。 |
touchspin.on.stopspin | 微调器停止旋转时触发。 |
touchspin.on.stopupspin | 微调器停止向上旋转时触发。 |
touchspin.on.stopdownspin | 微调器停止向下旋转时触发。 |
touchspin.on.min | 微调器达到 `min` 设置的限制时触发。 |
touchspin.on.max | 微调器达到 `max` 设置的限制时触发。 |
您可以通过以下方式在原始输入框上触发事件。
示例用法: $("input").trigger("touchspin.uponce"); $("input").trigger("touchspin.updatesettings", {max: 1000});
| 事件类型 | 详细说明 |
|---|---|
touchspin.updatesettings | :更新已初始化 TouchSpin 实例的任何设置。 |
touchspin.uponce | 每次增加一个步长。 |
touchspin.downonce | 每次减少一个步长。 |
touchspin.startupspin | 向上启动微调器。 |
touchspin.startdownspin | 向下启动微调器。 |
touchspin.stopspin | 停止微调器。 |
从GitHub下载,欢迎在GitHub issues反馈问题和建议,或通过G+或Twitter联系我!