2

是否可以在 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

4

4 回答 4

5

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

  • 没有图片
  • 没有外部 CSS
  • 无依赖
  • 高度可配置
  • 独立于分辨率
  • 在旧 IE 中使用 VML 作为后备
  • 使用@keyframe 动画，回退到 setTimeout()
  • 适用于所有主流浏览器，包括 IE6
  • 占用空间小（压缩后约 1.9K）
于 2012-05-03T13:17:18.597 回答
3

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

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

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

于 2017-06-15T16:52:09.110 回答
1

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 插件

于 2012-05-03T12:34:07.557 回答
1

您可以使用即将发布的 jQuery UI 1.9 中的微调器，尽管您必须对使用 beta 中的库感到满意。这是一个演示。

Chrome (8) 和 Opera (11)都使用原生的 HTML5 微调器，但它是丑陋的 IMO。

于 2012-07-02T23:29:49.257 回答