Kombinierte Summe für mehrere jQuery-UI-Schieberegler

Question

Ich versuche, eine Seite mit 4 jQuery-UI-Schiebereglern zu implementieren, und ich möchte, dass die Summe aller 4 Schieberegler nie über 400 hinausgeht.

Es ist mir egal, auf welche Weise dies implementiert ist, kann es von 0 beginnen, und sobald Sie 1 Schieberegler ändern, verringert sich die verbleibende verfügbare Gesamtmenge oder ein Schieberegler nach dem Maximum, verringert die Werte auf den anderen Schieberegler .

P.S. Die Schieberegler gehen in Schritten von 10.

Alle Ideen & Vorschläge sind willkommen, und ich habe eine jsFiddle eingerichtet, wenn Sie testen möchten.

Answer 1

hier Nun ya gehen:

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); 
      }); 
     } 
    }); 
}); 

Hier ist eine einfache Demo dieses: http://jsfiddle.net/yijiang/Y5ZLL/4/

Answer 2

eine aktualisierte Version der obigen Antwort Aus Prozentsatz von 100% zu zeigen. Wenn Sie also einen Schieberegler nach oben verschieben, verringern sich die anderen beiden Werte, sodass sich der Prozentsatz jedes Schiebereglers zu 100% addiert. Auch machte es einfach Anfangswerte

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); 
      }); 
     } 
    }); 
}); 

Answer 3

Ich fand einzustellen, wenn die anderen Schieber (die, die andere als die, die Sie sich bewegen) bewegen, ist es störend. Ich habe auch die Yi Jiang Geige modifiziert, um sie jetzt einfach zu stoppen, wenn du insgesamt 400 erreichst. Wenn du möchtest, dass der Slider höher geht, musst du zuerst eine der anderen verringern, ähnlich wie die erste , aber es hält den Schieberegler relativ zur Gesamtsumme.

Das heißt, wenn Sie einen Schieberegler bei 25% und einen anderen bei 50% haben, sehen sie aus, als wären sie bei 25 bzw. 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; 
      } 
     } 
    }); 
}); 

Answer 4

Kein einziger dieser Antworten war das am wenigsten Bit effektiv für Schieber in Beziehung zueinander in jeder effektiven Art und Weise ... die meisten von ihnen nach links ein oder mehrere aus den Berechnungen zu ändern oder ich habe das Limit nicht eingehalten, ich brauchte etwas, um einem User zu erlauben, seine Chips in einem HTML5-Spiel auszuwählen, also kam ich auf dieses Problem, wenn jemand anders ein ähnliches Problem hat ... wenn du es nicht binden musst etwas wie das Ändern der wettenden Chips dann nehmen Sie einfach die Haltwahl heraus oder ändern Sie sie, um Ihren Notwendigkeiten zu entsprechen

<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>