html定义微调器,bootstrap4 input数值微调插件

bootstrap-input-spinner是一款基于bootstrap4和jquery的input输入框数值微调插件。该插件会为输入框添加增加和减少按钮，通过点击相应的按钮，来对输入框中的数值进行微调。

该bootstrap4 输入框数值微调插件的特点还有：

支持移动手机，响应式设计。

支持国际化数值格式。

长按按钮可以连续改变数值。

当数值改变时，会分派change和input事件。

安装

可以通过npm来安装该bootstrap4 输入框数值微调插件。

npm install -save bootstrap-input-spinner

使用方法

在页面中引入jquery和bootstrap4相关文件，以及InputSpinner.js。

HTML结构

在输入框input元素里添加min、max和step属性。

另外，如果是浮点数，还可以通过data-decimals指定小数点后的位数。

初始化插件

在页面DOM元素加载完毕之后，通过InputSpinner方法来初始化该bootstrap4 输入框数值微调插件。

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

配置参数

该bootstrap4 输入框数值微调插件的可用配置参数有：

var config = {

decrementButton: "-", // button text

incrementButton: "+", // ..

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

}

decrementButton：数值减少按钮上的文本。

incrementButton：数值增加按钮上的文本。

groupClass：input-group上的class类。

buttonsClass：按钮的class类。

buttonsWidth：按钮的宽度。

textAlign：文本对齐方式。

autoDelay：长按按钮时触发数值改变的延迟时间。

autoInterval：长按按钮时触发数值改变的间隔时间。

boostThreshold：默认值为15。

boostMultiplier：默认值为4。

locale：数值本地化。如果为null，则使用浏览器的本地语言。

html定义微调器,bootstrap4 input数值微调插件相关推荐

java sqlite 创建_关于Java：创建3个由sqlite数据库填充的微调器
我正在尝试实现一个活动,该活动具有3个微调器(下拉列表),每个微调器由sqlite数据库中的不同表填充. 我设法创建了一个已正确填充的微调器,但是在创建其他两个并正确填充它们时遇到了麻烦. 到目前为止 ...
jQuery EasyUI API 中文文档 - 微调器（Spinner）
Spinner 微调器扩展自 $.fn.validatebox.defaults,用 $.fn.spinner.defaults 重写了 defaults. 依赖 validatebox 用法 1. ...
如何更改微调器的文字大小和文字颜色？
本文翻译自:How to change spinner text size and text color? In my Android application, I am using spinner, ...
如何显示jQuery中的加载微调器？
在原型中,我可以使用以下代码显示"正在加载..."图像: var myAjax = new Ajax.Request( url, {method: 'get', parameter ...
android选择下拉框的默认值,如何在Android中将默认值设置为微调器下拉列表？
我需要将默认值文本"选择你的设备"值设置为我的微调器下拉列表,我把它作为列表项,所以它作为一个下拉列表项,我隐藏下拉列表,因为这我的下拉菜单中有一个空白区域. 我该怎么做? 这是我 ...
java微调器_java-更改微调器标题栏样式
您必须创建CustomSpinner, 为此,请尝试以下方式,对我来说效果很好步骤1:创建自定义微调器类 class CustomSpinnerAdapter extends CursorAdapt ...
Struct2_定义拦截器并使用注解方式作用在Action的方法中
一.目的:通过在方法上加注解控制哪些方法需要登陆后才能访问二.方式:利用拦截器判断用户是否登陆三.实现步骤定义配置文件 struts.xml添加节点 1 2 3 4 5 6 7 8 9 10 ...
java类中定义索引器,C#面向对象基础——字段、属性和索引器
关于面向对象编程,在很多语言里面都出现过,最常用的如java和c++, C#语言关于面向对象编程的规范,我觉得介于上面两者之间,我的理解是它比较偏向c++,或许是因为跟它的析构函数有关系,像java有 ...
python 类装饰器和函数装饰器区别_python进阶之装饰器之4在类中定义装饰器，将装饰器定义为类，两者的区别与联系...
# 把装饰器定义为类 # 定义中需要实现__call__(),__get__() 方法 import types from functools import wraps class Profiled: ...
AnnotationConfigApplicationContext 通过调用注解Bean 定义读取器
AnnotatedBeanDefinitionReader 的register()方法向容器注册指定的注解Bean,注解Bean 定义读取器向容器注册注解Bean 的源码如下: //注册多个注解Bea ...

html定义微调器,bootstrap4 input数值微调插件

html定义微调器,bootstrap4 input数值微调插件相关推荐

最新文章

热门文章