在线下单

淘宝网拍付下单(拍付下单之后请及时联系客服排单)

店铺地址 https://sminer.taobao.com/

拍付链接 http://t.cn/R34uWQU

bootstrap4-input数值微调插件

分类:插件代码 更新时间:2018-06-27 浏览次数:555

代码简介

bootstrap-input-spinner是一款基于bootstrap4和jquery的input输入框数值微调插件。该插件会为输入框添加增加和减少按钮,通过点击相应的按钮,来对输入框中的数值进行微调。 特点:1. 支持移动手机,响应式设计。 2. 支持国际化数值格式。 3. 长按按钮可以连续改变数值。 当数值改变时,会分派change和input事件。

浏览器兼容

Chrome、 Opera、 Safari、Opera、IE9+

使用方法

1. 引入文件:

<linkhref="css/bootstrap.min.css"rel="stylesheet">
<scriptsrc="jquery.min.js"></script>
<scriptsrc="bootstrap.min.js"></script>
<scriptsrc="InputSpinner.js.js"></script>


2. html:

    <input type="number" value="50" min="0" max="100" step="10"/>

    <input type="number" value="4.5" data-decimals="2" min="0" max="9" step="0.1"/> 


3. js:

    $("input[type='number']").InputSpinner();


4. 配置参数:

varconfig = {
    decrementButton:"<strong>-</strong>",// button text
    incrementButton:"<strong>+</strong>",// ..
    groupClass:"",// css class of the input-group (sizing with input-group-sm or input-group-lg)
    buttonsClass:"btn-outline-secondary",
    buttonsWidth:"2.5em",
    textAlign:"center",
    autoDelay: 500,// ms holding before auto value change
    autoInterval: 100,// speed of auto value change
    boostThreshold: 15,// boost after these steps
    boostMultiplier: 4,
    locale:null// the locale for number rendering; if null, the browsers language is used
}

问题反馈

  • 问题内容

  • 问题附件

  • 您的称呼

    联系方式

提交成功

您的问题已成功提交,我们工作人员将于1个工作日之内与您联系处理。
谢谢您的支持!

发票受理

提交成功

您的发票受理请求已成功提交,我们工作人员将于1个工作日之内与您联系处理。
谢谢您的支持!