Общее количество для нескольких слайдеров jQuery-UI - PullRequest
Новая
       50

Общее количество для нескольких слайдеров jQuery-UI

9 голосов
/ 15 августа 2010

Я пытаюсь реализовать страницу, где есть 4 ползунка jQuery-UI, и я хочу сделать так, чтобы общая сумма всех 4 ползунков никогда не превышала 400.

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

P.S. Ползунки идут с шагом 10.

Все идеи и предложения приветствуются, и я настроил jsFiddle , если вы хотите проверить.

Ответы [ 4 ]

13 голосов
/ 15 августа 2010

Ну вот, пожалуйста: 

var sliders = $("#sliders .slider");

sliders.each(function() {
    var value = parseInt($(this).text(), 10),
        availableTotal = 400;

    $(this).empty().slider({
        value: 0,
        min: 0,
        max: 400,
        range: "max",
        step: 10,
        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);
            });
        }
    });
});

Вот простая демонстрация этого: http://jsfiddle.net/yijiang/Y5ZLL/4/

11 голосов
/ 05 мая 2013

Сделал обновленную версию ответа выше, чтобы показать проценты 100%.Таким образом, когда вы настраиваете один ползунок вверх, остальные два уменьшаются, в результате чего процент каждого ползунка увеличивается до 100%.Также упростили установку начальных значений

JSfiddle 

var sliders = $("#sliders .slider");
var availableTotal = 100;

sliders.each(function() {
    var init_value = parseInt($(this).text());

    $(this).siblings('.value').text(init_value);

    $(this).empty().slider({
        value: init_value,
        min: 0,
        max: availableTotal,
        range: "max",
        step: 2,
        animate: 0,
        slide: function(event, ui) {

            // Update display to current value
            $(this).siblings('.value').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 delta = availableTotal - total;

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

                var new_value = value + (delta/2);

                if (new_value < 0 || ui.value == 100) 
                    new_value = 0;
                if (new_value > 100) 
                    new_value = 100;

                t.siblings('.value').text(new_value);
                t.slider('value', new_value);
            });
        }
    });
});
5 голосов
/ 24 июля 2013

Я обнаружил, что когда другие ползунки (те, которые не двигаются) двигаются, это отвлекает.Я также изменил скрипку И Цзяна, чтобы теперь просто остановить ее, когда вы достигнете в общей сложности 400. Если вы хотите, чтобы этот слайдер поднялся выше, вам сначала нужно будет опустить один из других, так же, как первый, но он сохраняет ползунок относительно общего итога.

Это означает, что когда у вас один ползунок на 25%, а другой на 50%, они выглядят как 25 и 50 соответственно.

JSfiddle 

var sliders = $("#sliders .slider");

sliders.each(function() {
    var value = parseInt($(this).text(), 10),
        availableTotal = 400;

    $(this).empty().slider({
        value: 0,
        min: 0,
        max: 400,
        range: "max",
        step: 10,
        animate: 100,
        slide: function(event, ui) {

            // Get current total
            var total = 0;    

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


            var max = availableTotal - total;            

            if (max - ui.value >= 0) {
                // Need to do this because apparently jQ UI
                // does not update value until this event completes
                total += ui.value;
                console.log(max-ui.value);
                $(this).siblings().text(ui.value);
            } else {
                return false;
            }
        }
    });
});
0 голосов
/ 16 октября 2014

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

    <div id="chip_holder" style="float:right;margin-right:20px;">
    <ul id="sliders">
    <?php
    $chips = array("1" => array("blue", "1 Point", "1"), "5" => array("red", "5 Points", "5"), "10" => array("gold", "10 Points", "10"));

        $t = 0;
        $value_per_row = floor($my_points / count($chips));
          $totalc = 0;
        foreach($chips as $key => $value){
        $value = floor($value_per_row / $value[2]);
        $totalc = $totalc + $value_per_row;
        ?>
        <li style="display:inline-block;">
              <input type="number" style="display:none;" id="hidden_value_<?php echo $key; ?>" value="<?php echo floor($value);  ?>" min="0" max="<?php echo $my_points; ?>" step="<?php echo $chips[$key][2]; ?>" />
              <span id="slide_<?php echo $key; ?>" title="<?php echo $key; ?>" class="chip_slider" alt="<?php echo $key / $my_points; ?>"></span>
              <span id="chip_label_<?php echo $key; ?>" title="<?php echo $key; ?>" class="chip_label"><?php echo $value; ?></span>
        </li>
    <?php
        $t++;
        }
        if($totalc < $my_points){
        $min = min(array_keys($chips));
        $remainder = floor(($my_points - $totalc) / $chips[$min][2]);
    ?>
        <script>

            $('#hidden_value_<?php echo $min; ?>').val(parseInt($('#hidden_value_<?php echo $min; ?>').val()) + parseInt(<?php echo $remainder; ?>));
            $('#chip_label_<?php echo $min; ?>').text(parseInt($('#hidden_value_<?php echo $min; ?>').val()));
        </script>
        <?php } ?>
            <li id="checkout_button" onclick="javascript: checkout_now();"><?php echo CASHOUT; ?></li>

        </ul>
         <ul id="chips_stay_put">
         <?php
            $t = 0;
            foreach($chips as $key => $value){
            ?>
              <li class="chip_holder" style="width:70px;">
                  <span id="chip_holder_<?php echo $key; ?>" class="<?php echo $value[0]; ?>" alt="<?php echo $key; ?>"></span>
             </li>
                <?php
            $t++;
            }
        ?>
        </ul>
        </div>
<script>
 function drop_chips(id, chips){

$('.chip_label').each(function(){

        id =$(this).attr('id');
         idx =$('#' + id).attr('title');
    chips = parseInt($('#chip_label_' + idx).text());
    cls = $('#chip_holder_' + idx).attr('class');

    $('#chip_holder_' + idx).html('');

    m = minMaxTitle($('.chip.' + cls));

    if(m>0){
        start = 0;
    }else{
        start = m;
    }
    htmlH = '';

        while(m<=chips){
        start= start + m;
            zIndex = parseInt(start) + parseInt(100);

            htmlH += '<span id="chip_' + idx + '_' + m + '" class="chip ' + cls + '" style="position:absolute;top:-'+ (m * 3) + 'px;z-index:' + zIndex + ';" alt="' + cls + '" title="' +m+ '">' + idx +  '</span>';

            m++;

    }

    $('#chip_holder_' + idx).html(htmlH);


        $('.chip').draggable({
          drag: function( event, ui ) {
              var snapTolerance = $(this).draggable('option', 'snapTolerance');
              var topRemainder = ui.position.top % 20;
              var leftRemainder = ui.position.left % 20;

              if (topRemainder <= snapTolerance) {
              ui.position.top = ui.position.top - topRemainder;
              }

              if (leftRemainder <= snapTolerance) {
              ui.position.left = ui.position.left - leftRemainder;
              }
          } ,

          revert : function(event, ui) {
                // on older version of jQuery use "draggable"
                  // $(this).data("draggable")
                  // on 2.x versions of jQuery use "ui-draggable"
                  // $(this).data("ui-draggable")
                  $(this).data("uiDraggable").originalPosition = {
                  top : 0,
                  left : 0
                  };
                  // return boolean
                  return !event;
                  // that evaluate like this:
                  // return event !== false ? false : true;
              }

        });
    });

}
var sliders = $("#sliders .chip_slider");

sliders.each(function() {
    var slider_id;
    var value = parseInt($(this).text(), 10),
        availableTotal = parseInt($('#my_points_hidden').val());

    $(this).empty().slider({
        value: parseInt($('#' + $(this).attr('id')).prev('input').val()),
        min: 0,
        max: parseInt($('#' + $(this).attr('id')).prev('input').attr('max')),
        range:parseInt($('#' + $(this).attr('id')).prev('input').attr('max')),
        orientation:"vertical",
        step: 1,
        animate: 100,
        stop: function( event, ui ) { drop_chips() },
        slide: function(event, ui) {

         // Update display to current value
            $(this).siblings('.value').text(ui.value);

            // Get current total
            var total = 0;

        var slider_id = $(this).attr('title');

            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 delta = availableTotal - total;

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

                var new_value = value + (delta/2);

                if (new_value < 0 || ui.value == 100) 
                    new_value = 0;
                if (new_value > 100) 
                    new_value = 100;

                t.siblings('.value').text(new_value);
                t.slider('value', new_value);
                id = $(this).attr('id');

                title = $('#' + id).attr('title');
                initial_slider = total - new_value;
                console.log(slider_id);
        $('#chip_label_' + slider_id).text(parseInt(parseInt(ui.value) / parseInt($('#hidden_value_' + slider_id).attr('step'))));
                $('#chip_label_' + title).text(parseInt(parseInt(new_value) / parseInt($('#hidden_value_' + title).attr('step'))));
              });

        }

    });
});

</script>
...