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