一号娱乐APP - 流畅数字增减器

GitHub 專案頁面 下載

一号娱乐APP为您呈现触屏友好的数字增减器,专为Bootstrap 3设计,支持鼠标滚轮及键盘操作,带来极致顺滑的交互体验。

多场景应用展示

<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` 属性时,`initval` 才会生效作为初始值。若留空,则初始化时值为空。

<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-sm` 或 `input-group-lg`)的 `input-group` 中,可轻松调整整个控件的视觉大小。

<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` 属性时,`initval` 设置的初始值才会被应用。空字符串表示初始化时值为空。
replacementval "" 当用户留空或输入非数字时应用。空字符串表示值将保持不变。
min 0 最小值
max 100 最大值
step 1 步长
forcestepdivisibility 'round' 强制值可被步长整除的设置: `step` | `decimals` | `forceStepDivisibility`
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 通过按钮改变值时触发(达到限制时不会触发)
touchspin.on.startspin 开始旋转时触发
touchspin.on.startupspin 开始向上旋转时触发
touchspin.on.startdownspin 开始向下旋转时触发
touchspin.on.stopspin 停止旋转时触发
touchspin.on.stopupspin 停止向上旋转时触发
touchspin.on.stopdownspin 停止向下旋转时触发
touchspin.on.min 达到最小值时触发
touchspin.on.max 达到最大值时触发

事件监听

您可直接在原始输入框上主动触发以下事件,实现动态控制。

示例用法: $("input").trigger("touchspin.uponce"); $("input").trigger("touchspin.updatesettings", {max: 1000});

事件名称 说明
touchspin.updatesettings `updatesettings`: 更新实例设置。
touchspin.uponce 增加步长
touchspin.downonce 减少步长
touchspin.startupspin 启动向上旋转
touchspin.startdownspin 启动向下旋转
touchspin.stopspin 停止旋转

立即体验

立即体验,畅享娱乐

一号娱乐APP科技有限公司专注成就专业电话:+86 138 9646 3182邮箱:[email protected]上海市浦东新区张江路466号
📍 在百度地图查看位置