Как (динамически) подключить большое количество ползунков к полям ввода? - PullRequest
Новая
       13

Как (динамически) подключить большое количество ползунков к полям ввода?

0 голосов
/ 21 марта 2011

, поскольку эта страница является справочной (помимо официальной документации по jquery), когда речь идет о расширенных вопросах по jquery, я отправлю свой вопрос здесь. У меня есть AJAX-форма с до 80 (!) Ползунков, в основном, он работает нормально. хотя есть некоторые ползунки, имеющие диапазон от 0 до 500, что является большим количеством шагов, особенно, поскольку высота ползунка составляет всего около 90 пикселей. Вы можете себе представить, что можно переместить слайдер к определенному значению, иногда это почти невозможно.

Так что я хочу дополнительно дать возможность вводить значения через поле ввода. У вас есть идея, как это реализовать, может быть, даже без необходимости генерировать 80 входов? моя идея была бы что-то вроде, щелкая конкретный дескриптор, и поле ввода получит значение, переданное. Это должно работать без проблем, но как сделать так, чтобы соединение было «перевернуто», поэтому, если вы введете значение в поле ввода, оно будет передано дескриптору?

Заранее спасибо, это отличный сайт ...

Maschek

Ответы [ 3 ]

1 голос
/ 21 марта 2011

Вы можете использовать событие .change() документы поля ввода и вызвать метод value документы ползунок, чтобы обновить его. 

$('#your_input_id').change(function(){
                      $('#slider_id').slider('option','value',this.value);
                  });

пример http://jsfiddle.net/gaby/MXZGE/ ( значение желтого цвета обновляется )

0 голосов
/ 28 марта 2011

Я сделал несколько небольших изменений, теперь он работает с одним полем ввода для всех ползунков.Вот что я сделал: В функцию «sliderUpdateInput» я добавил строку «document.getElementById (« что угодно »). SetAttribute (« data-control-by », this.id);».затем в поле ввода добавляется id = "что угодно".Теперь нужно позаботиться о том, чтобы в атрибуте ползунка «data-control-by» значение совпадало с идентификатором ползунка, поэтому вы можете применить к нему функцию «sliderUpdateInput» с помощью this.id.Таким образом, значение атрибута input будет изменено на соответствующий ползунок каждый раз, когда вы щелкаете или перетаскиваете ползунок.

Если вы все равно хотите отобразить все входные данные для каждого ползунка, вам это не понадобится, нов моем сценарии не было места для всех этих входных данных, поэтому я подумал, что лучше использовать только один вход, чтобы он был немного более динамичным.

Спасибо за ваше решение, мне особенно нравится, какЗначение ввода соответствует ползунку в реальном времени.

0 голосов
/ 21 марта 2011

Вот код, который я разработал недавно для этой ситуации. У меня есть атрибут на входе, называемый data-control-by, который установлен в то же значение, что и div, в котором инициализирован ползунок. Например, у меня есть это в моем HTML: 

<div id="slider-1" data-controls="slider-1-slider-blah"></div>
<input name="whatever" data-controlled-by="slider-1-slider-blah" />

В моем js я бы сначала инициализировал ползунок так: 

$("#slider-1").slider({
  min: 0,
  max: 20,
  value: $("input[data-controlled-by='slider-1-slider-blah']").val(),
  slide: sliderUpdateInput,
  stop: sliderUpdateInput
});

Обратите внимание на указанную выше функцию обратного вызова sliderUpdateInput, используемую как в событиях slide (пока пользователь скользит), так и в событиях stop (когда пользователь прекращает скольжение). Вот как это выглядит: 

function sliderUpdateInput(e,u) {
  var slider = $(u.handle).parent();
  var controlled_input = $('input[data-controlled-by="' + slider.attr('data-controls') + '"]');
  if( u.value <= slider.slider('option', 'min') )
    controlled_input.val('');
  else
    controlled_input.val(u.value);
}

Затем на входе, который вы хотите обновить, вы добавите обработчик keyup, например: 

$('input[name="whatever"]').keyup(function(e) {
  var slider = $("div[data-controls='" + $(this).attr('data-controlled-by') + "']");
  var slider_min = slider.slider('option', 'min');
  var slider_max = slider.slider('option', 'max');

  // left or down
  if( e.keyCode == 37 || e.keyCode == 40 ) {
    if( isNaN( parseInt( $(this).val() ) ) )
      $(this).val(slider_min);
    if( parseInt( $(this).val() ) != slider_min )
      $(this).val( parseInt( $(this).val() ) - 1 );
    $(this).select();
  }
  // right or up
  else if( e.keyCode == 39 || e.keyCode == 38 ) {
    if( isNaN( parseInt( $(this).val() ) ) )
      $(this).val(slider_min);
    if( parseInt( $(this).val() ) != slider_max )
      $(this).val( parseInt( $(this).val() ) + 1 );
    $(this).select();
  }

  if( !isNaN( parseInt($(this).val()) ) )
    slider.slider('value', parseInt( $(this).val() ) );
  else
    slider.slider('value', slider_min );
});

Обновление: дальнейшее объяснение

Обратите внимание на коды клавиш, которые проверяются здесь для вверх / вправо и вниз / влево. Это значит, что пользователь может просто сдвинуть ползунок на 1 в любом направлении. Это особенно полезно, когда ввод имеет трехзначное значение, например 255.

Я действительно надеюсь, что это поможет вам и подстегнет ваше обучение! Прокомментируйте любые вопросы, пожалуйста! В селекторе обработчика событий keyup вы можете указать все, что получит все ваши входные данные, которыми вы хотите управлять / можете управлять ползунками.

...