Пользовательский диапазон / набор переменных с помощью ползунка пользовательского интерфейса jQuery - PullRequest
Новая
       13

Пользовательский диапазон / набор переменных с помощью ползунка пользовательского интерфейса jQuery

13 голосов
/ 26 июля 2010

Я хотел посмотреть, смогу ли я создать собственный набор данных для использования с jQuery UI Slider .Я работаю над сайтом, размеры одежды которого варьируются от: [0, 2, 4, 6, 8, 10, 12, 14, 16, 18, 16 Вт, 18 Вт, 20 Вт]

У меня возникает проблема сразу после 18, когда она переходит к «широким» размерам, которые немного уникальны.

Перед тем, как добавить 16W, 18W и размеры, я создал рабочий слайдер.используя следующий код: 

$("#slider-size .slider").slider({
  min: 0,
  max: 18,
  step: 2,
  slide: function(event, ui) {
    $(".rsize").text(ui.value);
  }
});

Последний аргумент в этой функции изменяет текстовое значение при изменении ползунка.

Кто-нибудь знает, какдобавить 16W, 18W и т. д. в конец этого списка?

Спасибо!

Ответы [ 2 ]

34 голосов
/ 26 июля 2010

для нестандартных размеров, вы можете использовать другой массив для ваших меток: 

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.

7 голосов
/ 26 июля 2010

демо 

$("#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);
  }
});​
...