如何在 HTML 中创建一个简单的微调器？或者 jQuery
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10431358/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to create a simple spinner in HTML? Or jQuery
提问by Rodrigo Gra?a
Is possible to create a spinner in HTML? Only HTML? A tag maybe?
是否可以在 HTML 中创建微调器？只有 HTML？也许是标签？
My HTML:
我的 HTML：
<label for="time">Tempo:</label>
<input type="text" name="time" id="time" value="" style="width: 150px;" />
If not can we use some jquery? Something like "datepicker" or like this
如果不能，我们可以使用一些 jquery 吗？像“日期选择器”或这样的东西
$("#time").spinner({ options });
Something realy simple :D
一些非常简单的：D
I found this but i can't understand how to use it.
我找到了这个，但我不明白如何使用它。
http://docs.jquery.com/UI/Spinner/spinner
http://docs.jquery.com/UI/Spinner/spinner
EDIT:
编辑：
IF I USE THIS:
如果我使用这个：
<label for="time">Tempo:</label>
<input type="number" name="time" id="time" value="0" style="width: 150px;" />
(The diference is the input type)
（区别在于输入类型）
Chrome automatically creates the spinner (+1/-1) but the same does not happen with firefox (and not tested on IE)
Chrome 会自动创建微调器 (+1/-1)，但 Firefox 不会发生同样的情况（并且未在 IE 上测试）
Why people still use other browsers?! :D
为什么人们还在使用其他浏览器？！:D
采纳答案by Ankur Verma
https://github.com/btburnett3/jquery.ui.spinner
https://github.com/btburnett3/jquery.ui.spinner
Load css and javascript using respective tags
使用各自的标签加载 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:please load jquery and jquery.ui plugin before loading the ui.spinner.js
PS：请在加载 ui.spinner.js 之前加载 jquery 和 jquery.ui 插件
回答by Chad Hedgcock
http://github.com/fgnass/spin.js
http://github.com/fgnass/spin.js
- No images
- no external CSS
- No dependencies
- Highly configurable
- Resolution independent
- Uses VML as fallback in old IEs
- Uses @keyframe animations, falling back to setTimeout()
- Works in all major browsers, including IE6
- Small footprint (~1.9K gzipped)
- 没有图片
- 没有外部 CSS
- 无依赖
- 高度可配置
- 分辨率无关
- 在旧 IE 中使用 VML 作为后备
- 使用@keyframe 动画，回退到 setTimeout()
- 适用于所有主流浏览器，包括 IE6
- 占用空间小（压缩后约 1.9K）
回答by Adrian S.
The HTML code for the spinner box looks like this:
微调框的 HTML 代码如下所示：
<input type="number" min="0" max="50" step="2" value="0" size="6" name="cantitate">
The TYPE is "number". The MIN and MAX are the start and end values you want for the value. The STEP attribute is the increase or decrease in value when you click on the arrows. The VALUE is the default that appears in the box when the page loads, and also the value that is returned when the form is sent. SIZE refers to how wide you want the box.
TYPE 是“数字”。MIN 和 MAX 是您想要的值的开始值和结束值。STEP 属性是单击箭头时值的增加或减少。VALUE 是页面加载时出现在框中的默认值，也是发送表单时返回的值。SIZE 指的是你想要的盒子有多宽。
回答by Ian Stanway
You could use the spinnerfrom the upcoming jQuery UI 1.9, although you'd have to be happy with using the library in beta. Here's a demo.
您可以使用即将推出的 jQuery UI 1.9 中的微调器，尽管您必须对在测试版中使用该库感到满意。这是一个演示。
Chrome (8) and Opera (11) both usethe native HTML5 spinner, but it's ugly IMO.
Chrome (8) 和 Opera (11)都使用原生 HTML5 微调器，但 IMO 很难看。
