Total combiné pour plusieurs curseurs jQuery-UI

Question

J'essaye d'implémenter une page où il y a 4 curseurs jQuery-UI, et je veux que le total combiné des 4 curseurs ne dépasse jamais 400.

Cela ne me dérange pas de quelle façon cela est implémenté, cela peut être à partir de 0, et dès que vous modifiez 1 curseur, le total disponible restant diminue ou le curseur dépasse le maximum, diminue les valeurs des autres curseurs .

P.S. Les curseurs vont par incréments de 10.

Toutes les idées & suggestions sont les bienvenus, et j'ai mis en place un jsFiddle si vous souhaitez tester.

Answer 1

Eh bien voici ya go:

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

Voici une démo simple ceci: http://jsfiddle.net/yijiang/Y5ZLL/4/

Answer 2

Fait une version mise à jour de la réponse ci-dessus pour afficher les pourcentages de 100%. Ainsi, lorsque vous ajustez un curseur, les deux autres diminuent, ce qui augmente le pourcentage de chaque curseur jusqu'à 100%. En outre, il était facile de définir des valeurs initiales

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

je trouve quand les autres curseurs (les autres que celui que vous vous déplacez) se déplacer, il est distrayant. J'ai aussi modifié le violon de Yi Jiang pour le faire simplement arrêter quand vous atteindrez un total de 400. Si vous voulez que ce curseur monte, vous devrez d'abord baisser l'un des autres comme le premier. , mais il garde le curseur par rapport au total global. Cela signifie que lorsque vous avez un curseur à 25% et un autre à 50%, ils ressemblent à 25 et 50 respectivement.

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

Pas un seul de ces réponses était le moins efficace pour changer les curseurs par rapport à l'autre d'une façon efficace ... la plupart d'entre eux ont quitté un ou plusieurs sur les calculs ou n'a pas respecté la limite globale, j'avais besoin de quelque chose pour permettre à un utilisateur de choisir ses jetons dans un jeu HTML5 donc je suis venu avec ça si quelqu'un d'autre a jamais eu un problème similaire ... si vous n'avez pas besoin de l'attacher Quelque chose comme changer les jetons de paris alors il suffit de sortir l'option d'arrêt ou de le changer en fonction de vos besoins

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