jQuery Slider - Как мне сделать группу слайдеров, имеющих максимальное значение в зависимости от другого слайдера? - PullRequest
Новая
       26

jQuery Slider - Как мне сделать группу слайдеров, имеющих максимальное значение в зависимости от другого слайдера?

0 голосов
/ 20 июля 2010

Вот сложный вопрос, который я пытался заставить работать.Это работает на полпути, однако я думаю, что логика является проблемой.Я объясню ситуацию и проблему ниже.

Ситуация: Хотите использовать контроллер ползунка, чтобы выбрать количество взрослых, детей, младенцев, которые могут занимать в комнате.Например, комната, в которой могут разместиться 3 человека, где пользователь может использовать ползунки, чтобы выбрать, например, 1 взрослого, 2 детей и 0 младенцев.Однако пользователь не должен превышать общее количество взрослых + детей + младенцев больше, чем вместимость комнаты.Ниже приведено несколько примеров сценариев. 

Room A with Capacity for 4 Pax and 1 Adult is required.
Adult/Child/Infant : 1/0/0 is less than 4 is OK
Adult/Child/Infant : 2/1/1 is equal to 4 is Ok
Adult/Child/Infant : 0/2/1 is less than 4 but NO Adult, therefore NOT OK

Чтобы использовать слайдер пользовательского интерфейса jQuery, мне нужно установить 3 ползунка для каждого типа человека (Взрослый / Ребенок / Младенец) и установить свойство ползунков таким образом,общие значения не должны превышать вместимость комнаты.

Ползунки не должны разрешать, например, если вместимость комнаты 4, где значение ползунка «Взрослый» выбрано 3, а ребенок выбран как 1, тогда ползунок «младенец» не должен иметь никакого значения для «Взрослый»+ Ребенок уже заполнил комнату, и нет места для любого ребенка.Или, если для параметра «Взрослый» выбрано значение «Макс.», Равное 4, то другие два ползунка для ребенка и младенца не должны иметь возможности устанавливать какие-либо значения, если только значение «Ползунок взрослого» не уменьшится, чтобы освободить место для ребенка и младенца.Поэтому моя проблема состоит в том, чтобы кодировать расширенный плагин jQuery, чтобы он мог работать с любым выбором элементов и задавать свойства, определяющие главный слайдер.Эта логика может быть не самой лучшей, поэтому мне нужны хорошие идеи и, если возможно, какая-то функция, которая могла бы позволить ползункам работать вместе как группа.

Пожалуйста, предложите мне любой хороший метод.

Ответы [ 2 ]

3 голосов
/ 21 ноября 2010

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

var sliders = $("#sliders .slider"),
    smax = 4,
    smin = 0;

sliders.each(function() {
    var availableTotal = smax;

    $(this).empty().slider({
        value: 0,
        // Check - is this the adult slider? 
        min: (this.id === 'adult') ? 1 : smin,
        max: smax,
        range: 'min',
        step: 1,
        slide: function(event, ui) {
            // Update display to current value
            $(this).siblings().text(ui.value);

            // Get current total
            var total = 0;

            sliders.not(this).each(function() {
                total += $(this).slider("option", "value");
            });

            // Need to do this because apparently jQ UI
            // does not update value until this event completes
            total += ui.value;

            var max = availableTotal - total;

            // Update each slider
            sliders.not(this).each(function() {
                var t = $(this),
                    value = t.slider("option", "value");

                t.slider("option", "max", max + value)
                    .siblings().text(value + '/' + (max + value));
                t.slider('value', value);
            });
        }
    });
});

Это будет конкретно работать с примером, который вы дали - он устанавливает минимальную сумму для ползунка для взрослых, делая невозможным выбор значений, из-за которых общая сумма будет превышать переменную availableTotal.

См. Это простое демо для более подробной информации: http://jsfiddle.net/yijiang/RsZYZ/

1 голос
/ 21 июля 2010

Я думаю, что решением было бы использовать событие слайда следующим образом: 

$("#mainSlider").slider({
   slide: function(event, ui) { 
             //Insert logic here..
          }
});

И затем вы выбираете метод: 

$("#secondarySlider").slider("max", x);

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

Вот так я бы решил часть пользовательского интерфейса, тогда вам нужно вычислить значения для установки.

У вас есть документация здесь: http://jqueryui.com/demos/slider/

...