Ползунок пользовательского интерфейса Jquery - введите значение и переместите ползунок в местоположение - PullRequest
Новая
       27

Ползунок пользовательского интерфейса Jquery - введите значение и переместите ползунок в местоположение

3 голосов
/ 25 августа 2009

Мне было интересно, нашел ли кто-нибудь решение или пример для фактического заполнения поля ввода ползунка и его перемещения в соответствующую позицию onBlur (). В настоящее время, как мы все знаем, он просто обновляет это значение с положение, в котором вы находитесь. Поэтому в некоторых отношениях я пытаюсь изменить функциональность этого удивительного слайдера.

Одна ссылка, которую я нашел: http://www.webdeveloper.com/forum/archive/index.php/t-177578.html немного устарела, но похоже, что они предприняли попытку. Однако ссылки на результаты не существуют. Я надеюсь, что там может быть решение.

Я знаю, что Filament перепроектировал ползунок для обработки выбранных (выпадающих) значений, и он работает без нареканий. Поэтому цель будет сделать то же самое, но с вводимым текстовым полем.

Ответы [ 3 ]

9 голосов
/ 25 августа 2009

Будет ли это делать то, что вы хотите? 

$("#slider-text-box").blur(function() {
  $("#slider").slider('option', 'value', parseInt($(this).val()));
});

Каждая опция на ползунке имеет как установщик, так и получатель, так что вы можете установить значение с этим, как в примере выше. Из документации: 

//getter
var value = $('.selector').slider('option', 'value');
//setter
$('.selector').slider('option', 'value', 37);

UPDATE:

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

$("#amount").blur(function () {
  $("#slider-range").slider("values", 0, parseInt($(this).val()));
});
$("#amount2").blur(function () {
  $("#slider-range").slider("values", 1, parseInt($(this).val()));
});

Вам нужно будет использовать Math.min/max, чтобы убедиться, что одно значение не проходит через другое, так как установщик, похоже, не предотвращает это.

Вы были почти там, когда использовали $("#slider-range").slider("values", 0) для получения каждого значения. Во многих jQuery есть такое соглашение о получении / установке, в котором дополнительный параметр используется для установки значения.

4 голосов
/ 28 октября 2009

Я проделал некоторую работу с ползунком пользовательского интерфейса jQuery, чтобы он принимал значения из текстового поля, это может быть не совсем то, что вам нужно, но может помочь:

http://chowamigo.blogspot.com/2009/10/jquery-ui-slider-that-uses-text-box-for.html

2 голосов
/ 21 июля 2010 
$slider = $("#slider");
            $("#amountMin").blur(function () {      
              $slider.slider("values", 0,Math.min($slider.slider("values", 1),parseInt($(this).val()) ) );
              $(this).val(Math.min($slider.slider("values", 1),parseInt($(this).val())));

            });
            $("#amountMax").blur(function () {
              $slider.slider("values",1,Math.max($slider.slider("values", 0),parseInt($(this).val()) ) );                              
              $(this).val(Math.max($slider.slider("values", 0),parseInt($(this).val())));
            });

Я просто использовал код Мартина и обновил идентификатор до #slider, а также добавил math.max, как он предложил, чтобы ползунки не перекрывались.

...