表单/表格

Bootstrap4数值输入jQuery插件

也想出现在这里?联系我们
创客主机


这是一款Bootstrap4数值输入插件。通过该插件可以非常轻松的将input元素转换为数值输入spinner。它的特点还有:

响应式,支持移动设备

长按按钮时数值会自动增加或减少

允许设置文本的前缀和后缀

使用方法

在页面中引入下面的文件。

  1. <script src="js/jquery.min.js" type="text/javascript"></script> 
  2. <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />    
  3. <script src="js/bootstrap-input-spinner.js" type="text/javascript"></script>

HTML结构

按照下面的HTML结构来创建一个数值输入spinner:

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

初始化插件

在页面DOM元素加载完毕之后,通过下面的方法来初始化该插件。

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

配置参数

可用的配置参数有:

  1. var config = {
  2.     decrementButton: "<strong>-</strong>", // button text
  3.     incrementButton: "<strong>+</strong>", // ..
  4.     groupClass: "", // css class of the input-group (sizing with input-group-sm or input-group-lg)
  5.     buttonsClass: "btn-outline-secondary",
  6.     buttonsWidth: "2.5rem",
  7.     textAlign: "center",
  8.     autoDelay: 500, // ms holding before auto value change
  9.     autoInterval: 100, // speed of auto value change
  10.     boostThreshold: 10, // boost after these steps
  11.     boostMultiplier: "auto", // you can also set a constant number as multiplier
  12.     locale: null // the locale for number rendering; if null, the browsers language is used
  13. }

Github网址:https://github.com/shaack/bootstrap-input-spinner

(0)

本文由 创客云 作者:创客云 发表,转载请注明来源!

热评文章

发表评论

嘿,欢迎咨询!