使用jQuery UI Slider自定义范围/变量集
我想看看我是否可以制作一个自定义数据集用于jQuery UI Slider 。 我正在一个服装尺寸范围为：[0,2,4,6,8,10,12,14,16,18,16W，18W，20W]的网站上工作
我遇到的问题是在18岁之后，当它跳到“宽”的尺寸时会有点独特。
在我添加16W，18W和on尺寸之前，我使用以下代码创建了一个工作滑块：
$("#slider-size .slider").slider({ min: 0, max: 18, step: 2, slide: function(event, ui) { $(".rsize").text(ui.value); } }); 更改滑块时，该函数中的最后一个参数会更改文本值。
有谁知道怎么去添加16W，18W等到这个列表的末尾？
谢谢！
对于自定义尺寸，您可以使用另一个arrays作为标签：
var sizes = ["0","2","4","6","8","10","12","14","16","18","16W","18W","20W"]; $("#slider-size .slider").slider({ min: 0, max: sizes.length - 1, step: 1, slide: function(event, ui) { $(".rsize").text(sizes[ui.value]); } });
现在，要添加或删除大小，只需修改sizes数组。
演示
$("#slider-size .slider").slider({ min: 0, max: 24, // max is 24 step: 2, slide: function(event, ui) { var s = ui.value; switch(ui.value) { case 20: s = '16W'; break; case 22: s = '18W'; break; case 24: s = '12W'; break; } $(".rsize").text(s); } });
– – – 要么 – – –
演示
$("#slider-size .slider").slider({ min: 0, max: 24, // max is 24 step: 2, slide: function(event, ui) { $(".rsize").text((ui.value >18)?(ui.value-4)+'W':ui.value); } });