Мне хотелось узнать, могу ли я создать пользовательский набор данных для использования jQuery UI Slider. Я работаю над сайтом с размерами одежды, которые входят в диапазон: [0, 2, 4, 6, 8, 10, 12, 14, 16, 18, 16W, 18W, 20W]
Проблема, с которой я столкнулась, возникает сразу после 18, когда она перескакивает на "широкие" размеры, которые немного уникальны.
До того, как я добавил 16W, 18W и по размерам, я создал рабочий слайдер, используя следующий код:
$("#slider-size .slider").slider({
min: 0,
max: 18,
step: 2,
slide: function(event, ui) {
$(".rsize").text(ui.value);
}
});
Последний аргумент этой функции изменяет текстовое значение при изменении ползунка.
Кто-нибудь знает, как добавить в 16W, 18W и т.д. в конец этого списка?
Спасибо!
для пользовательских размеров вы можете использовать другой массив для своих меток:
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);
}
});