表单/表格

Bootstrap4数值输入jQuery插件

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

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)

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

热评文章

发表评论

精彩推荐

Supro - 极简电商WordPress汉化主题

钻石珠宝奢侈品DedeCMS织梦模板

Hi, 如果您有主题插件代购(30-600元)汉化等建站相关业务,可以 跟我联系 哦!
欢迎投稿
嘿,欢迎咨询!