用于 Bootstrap 4 和 5 的 Easy Input Spinner 插件 - InputSpinner.js

用于 Bootstrap 4 和 5 的 Easy Input Spinner 插件 - InputSpinner.js

版本:

浏览量:228

最后更新:2021-09-06

应用标签:MAC 软件Jquery插件

推荐指数:

详细信息

Bootstrap框架(Bootstrap 4 & 5)的一个简单但可定制的输入微调器插件(小于 4KB 缩小),使用户能够使用 +/- 按钮增加/减少一个数字。

安装:

# NPM
$ npm install bootstrap-input-spinner --save

如何使用它:

1.在html文档中加载必要的jQuery库和Bootstrap框架。

<link rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" />
<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/cdn/bootstrap.min.js"></script>

2.input-spinner.js在 jQuery 之后加载 JavaScript 文件

<script src="bootstrap-input-spinner.js"></script>

3. 为输入微调器创建一个普通数字输入。该插件支持本地输入属性,例如valueminmaxstep

<input type="number" value="5" min="0" max="100" step="1">

4. 通过调用数字输入上的函数来初始化输入微调器。

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

5.如果要限制小数位数并禁用千位分隔符:

<input type="number" value="5" min="0" max="100" step="1"
       data-decimals="2"
       data-digit-grouping="false">

6.给输入元素添加前缀&后缀

<input type="number" value="5" min="0" max="100" step="1"
       data-prefix=""
       data-suffix="">

7. 设置输入模式。默认值:'十进制'。

<input type="number" value="5" min="0" max="100" step="1"
       inputmode="decimal">

8. Available plugin options to customize the input spinner.

$("input[type='number']").inputSpinner({
 
  // button text/icons
  decrementButton: "<strong>-</strong>",
  incrementButton: "<strong>+</strong>",
 
  // class of input group
  groupClass: "input-group-spinner",
 
  // button class
  buttonsClass: "btn-outline-secondary",
 
  // button width
  buttonsWidth: "2.5em",
 
  // text alignment
  textAlign: "center",
 
  // delay in milliseconds
  autoDelay: 500,
 
  // interval in milliseconds
  autoInterval: 100,
 
  // set this `true` to disable the possibility to enter or paste the number via keyboard
  buttonsOnly: false,
 
  // set this to `false` to disallow the use of the up and down arrow keys to step
  keyboardStepping: true,
 
  // the locale, per default detected automatically from the browser
  locale: navigator.language,
 
  // the editor (parsing and rendering of the input)
  editor: I18nEditor,
   
  // the template of the input
  template: // the template of the input
    '<div class="input-group ${groupClass}">' +
    '<div class="input-group-prepend"><button style="min-width: ${buttonsWidth}" class="btn btn-decrement ${buttonsClass} btn-minus" type="button">${decrementButton}</button></div>' +
    '<input type="text" inputmode="decimal" style="text-align: ${textAlign}" class="form-control form-control-text-input"/>' +
    '<div class="input-group-append"><button style="min-width: ${buttonsWidth}" class="btn btn-increment ${buttonsClass} btn-plus" type="button">${incrementButton}</button></div>' +
    '</div>'
   
});

9. Event handlers:

changedElement.addEventListener("change", function(event) {
  valueOutput.innerHTML = changedElement.value
})

10. Change the value programmatically:

instance.setValue(new value)

11. Destryo the instance.

instance.destroy()

Changelog:

v3.0.2 (2021-05-28)

  • Compatible with Bootstrap 5

v2.1.1 (2021-05-14)

  • renamed back to bootstrap-input-spinner.js

v2.0.12 (2021-04-29)

  • prevent double creation and print warning in console

v2.0.11 (2021-04-26)

  • prevent failure, when destroyed element is not an input spinner

v2.0.10 (2021-03-30)

  • Fixed Spinner(s) not working properly after changing the value programmatically

v1.17.2 (2021-01-28)

  • Right-click on button sends spinner on endless increment/decrement operation

v1.17.0 (2021-01-19)

  • set default `keyboardStepping` `true`

v1.16.9 (2021-01-11)

  • update

v1.16.8 (2020-10-26)

  • little cleanup

v1.16.5 (2020-09-25)

  • added locale to props

v1.16.4 (2020-09-17)

  • Removed `boostMultiplier` and `data-step-max`

v1.15.4 (2020-09-14)

  • updated

v1.14.2 (2020-09-14)

  • added more examples

v1.14.1 (2020-09-08)

  • Styling with templates

v1.13.20 (2020-08-27)

  • Fixed issue with hidden attribute

v1.13.17 (2020-08-02)

  • Replaced + and - with the HTML entities &plus; and &minus;

v1.13.16 (2020-07-28)

  • Bugs fixed

v1.13.11 (2020-07-21)

  • JS Update

v1.13.10 (2020-07-20)

  • Fixed "Invalid regular expression" error when thousandSeparator is empty string

v1.13.6 (2020-06-06)

  • Allows to destroy the instance

v1.13.4 (2020-04-02)

  • Package update

v1.13.3 (2019-12-18)

  • Allow enter and space button triggers

v1.12.7 (2019-10-31)

  • Allow enter and space button triggers

发表评论

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。