jquery微调器，以字符串作为输入

嗨我搜索但我没有找到这样的解决方案。是否有可能创建一个带有jquery的微调器，它有文本值（字符串）作为输入而不是数字。或者换句话说就像这个http://jsfiddle.net/ yaQSP /而是..- 1,0,1 ..从列表或字符串数​​组中旋转文本值。

Answer 1

更新

刚清理了一下http://jsfiddle.net/yaQSP/25/

---

见： http ： //jsfiddle.net/yaQSP/23/

你可以这样做有点hacky：创建你的数组。

组：

$('#spinner').spinner({ step: 1, numberformat: "n" });​ 

并在输入字段上绑定更改事件。 然后这样称呼它 – >

 yourArr[i] 

而i是输入字段的值。

Answer 2

以前的答案不起作用。 我在chrome和firefox的给定链接下测试了它。

在这里寻找另一个解决方案

您需要覆盖微调框小部件的_parse和_format函数。

这是一个简单的类似Bool的微调器的例子：

 $.widget("ui.boolspinner", $.ui.spinner, { options: { min: 0, max: 1, start: 1 }, _parse: function (value) { if (typeof value === "string") { return (value.toLowerCase() == "ja")?1:0; } return value; }, _format: function (value) { return (value == 1)?"Ja":"Nein"; } }); $(function() { $("#spinner-testprint").boolspinner(); }); 

http://jsfiddle.net/k46bA/

我完成了自己的小部件。 它使用字符串数组作为输入。

 $.widget("ui.formatSpinner", $.ui.spinner, { options: { }, _parse: function (value) { if (typeof value === "string") { return this.options.values.indexOf(value); } return value; }, _format: function (value) { //wrap around if (value < 0) { value = this.options.values.length-1; } if (value > this.options.values.length-1) { value = 0; } var format = this.options.values[value]; return format; }, }); 

用法：

 //paper type spinner var arrPaperTypes = ["Standard 80g", "Standard 100g", "Gloss 100g", "Gloss 120g"]; $(function() { $("#spinner-paper").formatSpinner({ values: arrPaperTypes }); }); 

Answer 3

在Bojan的回答的基础上，通过覆盖_adjustValue，可以获得更清晰的解决方案：

 $.widget("ui.textSpinner", $.ui.spinner, { options: { wrap: true }, _parse: function (value) { if ((value === '') || isNaN(value)) { value = this.options.values.indexOf(value); if (value === -1) { value = 0; } } if (value < 0) { value = this.options.wrap ? (this.options.values.length -1) : 0; } else if (value >= this.options.values.length) { value = this.options.wrap ? 0 : (this.options.values.length - 1); } return value; }, _format: function (value) { return this.options.values[value]; }, _adjustValue: function (value) { if (value < 0) { value = this.options.wrap ? (this.options.values.length - 1) : 0; } else if (value >= this.options.values.length) { value = this.options.wrap ? 0 : (this.options.values.length - 1); } return value; } }); var arrText = ["John", "Paul", "George", "Ringo"]; $(function() { $("#spinner-text").textSpinner({ values: arrText, spin: function( event, ui ) { $( "#spinner-value" ).text(ui.value); } }); $("#spinner-text-nowrap").textSpinner({ values: arrText, wrap: false, spin: function( event, ui ) { $( "#spinner-value-nowrap" ).text(ui.value); } }); }); 

    
 Wrapping 
 Value: 3 
 
 No wrapping 
 Value: 3