Question

可以在HTML中创建微调器吗？只有HTML？标签可能？

我的HTML：

<label for="time">Tempo:</label>
<input type="text" name="time" id="time" value="" style="width: 150px;" />

如果没有，我们可以使用一些jquery吗？像“datepicker”之类的东西或者像这样

$("#time").spinner({ options });

简单的事情：D

我发现了这个，但我无法理解如何使用它。

http://docs.jquery.com/UI/Spinner/spinner

修改

如果我使用它：

<label for="time">Tempo:</label>
<input type="number" name="time" id="time" value="0" style="width: 150px;" />

（差异是输入类型）

Chrome会自动创建微调器（+ 1 / -1），但firefox不会发生同样的情况（并且未在IE上测试）

为什么人们还在使用其他浏览器？！：d

Answer 1

http://github.com/fgnass/spin.js

没有图片
没有外部CSS
无依赖性
高度可配置
独立决议
在旧IE中使用VML作为后备
使用@keyframe动画，回退到setTimeout（）
适用于所有主流浏览器，包括IE6
占地面积小（约1.9K gzipped）

Answer 2

微调框的HTML代码如下所示：

<input type="number" min="0" max="50" step="2" value="0" size="6" name="cantitate">

TYPE是“数字”。 MIN和MAX是您想要的值的起始值和结束值。单击箭头时，STEP属性是值的增加或减少。 VALUE是页面加载时显示在框中的默认值，也是发送表单时返回的值。 SIZE指的是你想要盒子的宽度。

Answer 3

https://github.com/btburnett3/jquery.ui.spinner

使用相应的代码加载css和javascript

<script type="text/javascript" src="js/jSpinner/ui.spinner.js"></script>
.
.
.
<link rel="stylesheet" type="text/css" href="css/jSpinner/ui.spinner.css" />


.
$("#time").spinner({
    min : 0,
    max : 100,
    showOn : 'both'
});

PS：请在加载ui.spinner.js之前加载jquery和jquery.ui插件

Answer 4

您可以使用即将推出的jQuery UI 1.9中的spinner，尽管您必须对使用测试版中的库感到满意。 Here's a demo

Chrome（8）和Opera（11）both use本机HTML5微调器，但它是丑陋的IMO。

如何在HTML中创建一个简单的微调器？或jQuery

4 个答案: