Несколько ползунков, таких как многоуровневый торт, ползунок нижнего уровня определяет максимальный размер для следующего уровня над ним и т. Д. - PullRequest
Новая
       1

Несколько ползунков, таких как многоуровневый торт, ползунок нижнего уровня определяет максимальный размер для следующего уровня над ним и т. Д.

0 голосов
/ 12 декабря 2018

Я тратил слишком много времени, пытаясь выяснить это, поэтому я искал помощи.
У меня есть 5 горизонтальных ползунков один над другим.Это настроено как пироги.Пользователь выберет размер «Нижний ярус» с ползунком от 4 до 20. Затем этот выбор активирует следующий ползунок вверх и настроит его на максимум на единицу меньше, чем на ползунке под ним.И так далее, и так далее, пока они не сделают все свои выборы, будь то торт «три уровня» или «пять уровней».

Вот что у меня есть https://jsfiddle.net/midnight428/7t0abg2L/ Код: 

   <html>
<head>
    <title>Cake Calculator</title>
    <link rel="stylesheet" href="cake.css">
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <!--this one does the slider and button on the slider !-->
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script><!--this one does the resulting number above the slider plus all that the above one does !-->
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script><!--this one gets rid of both above!-->
    <!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>!-->
    <script>
    $(function() {
    $("#5thTier-enabled").click(function(){
        if(this.checked) {
            $("#slider-range-5thTier").slider("enable");
        }
        else {
            $("#slider-range-5thTier").slider("disable");
        }
    });     
    $( "#slider-range-5thTier" ).slider({
      disabled: true,
      range: "min",
      step: 1,
      min: 4,
      max: 20,
      value: 16,
      slide: function( event, ui ) {
        $( "#5thTier" ).val( ui.value );
      }
      //stop: function(event, ui){
        //var valuesOfBottom = $( "#bottomTier" ).slider("option", "values");
        //var diff = valuesOfBottom[1] - valuesOfBottom[0];
        //$( "#2ndTier" ).slider("option", "values", [ui.value, ui.value+diff]);
     // }
    });
    $( "#5thTier" ).val( $( "#slider-range-5thTier" ).slider( "value" ) );      

    $("#4thTier-enabled").click(function(){
        if(this.checked) {
            $("#slider-range-4thTier").slider("enable");
        }
        else {
            $("#slider-range-4thTier").slider("disable");
        }
    });     
    $( "#slider-range-4thTier" ).slider({
      disabled: true,
      range: "min",
      step: 1,
      min: 4,
      max: 20,
      value: 16,
      slide: function( event, ui ) {
        $( "#4thTier" ).val( ui.value );
      }
    });
    $( "#4thTier" ).val( $( "#slider-range-4thTier" ).slider( "value" ) );

    $("#3rdTier-enabled").click(function(){
        if(this.checked) {
            $("#slider-range-3rdTier").slider("enable");
        }
        else {
            $("#slider-range-3rdTier").slider("disable");
        }
    });     
    $( "#slider-range-3rdTier" ).slider({
      disabled: true,
      range: "min",
      step: 1,
      min: 4,
      max: 20,
      value: 16,
      slide: function( event, ui ) {
        $( "#3rdTier" ).val( ui.value );
      }
    });
    $( "#3rdTier" ).val( $( "#slider-range-3rdTier" ).slider( "value" ) );

    $("#2ndTier-enabled").click(function(){
        if(this.checked) {
            $("#slider-range-2ndTier").slider("enable");
        }
        else {
            $("#slider-range-2ndTier").slider("disable");
        }
    });     
    $( "#slider-range-2ndTier" ).slider({
      disabled: true,
      range: "min",
      step: 1,
      min: 4,
      max: 20,
      value: 16,
      slide: function( event, ui ) {
        $( "#2ndTier" ).val( ui.value );
      }
    });
    $( "#2ndTier" ).val( $( "#slider-range-2ndTier" ).slider( "value" ) );


    $( "#slider-range-bottomTier" ).slider({
      range: "min",
      step: 1,
      min: 4,
      max: 20,
      value: 16,
      slide: function( event, ui ) {
        $( "#bottomTier" ).val( ui.value );
      }
    });
    $( "#bottomTier" ).val( $( "#slider-range-bottomTier" ).slider( "value" 
    ) );
    } );

    </script>


    <!-- Slider Tiers -------!-->       
    <script>
        $( function() {
            $( "#slider-range-minT" ).slider({
              range: "min",
              step: 1,
              min: 2,
              max: 10,
              value: 3,
              slide: function( event, ui ) {
                $( "#amountTiers" ).val( ui.value );
              }
            });
            $( "#amountTiers" ).val( $( "#slider-range-minT" ).slider( "value" ) );
        } );
    </script>
    <!-- END Slider Tiers ---------!-->
    <!-- Slider Budget-------!-->
    <script>
        $( function() {
            $( "#slider-range-minB" ).slider({
              range: "min",
              step: 25,
              min: 25,
              max: 1000,
              value: 500,
              slide: function( event, ui ) {
                $( "#amountBudget" ).val( "$" + ui.value );
              }
            });
            $( "#amountBudget" ).val( "$" + $( "#slider-range-minB" ).slider( "value" ) );
        } );
    </script>
    <!-- END Slider Budget ---------!-->
    <!-- Slider Servings -------!-->
    <script>
        $( function() {
            $( "#slider-range-minS" ).slider({
              range: "min",
              value: 200,
              step: 10,
              min: 10,
              max: 1000,
              slide: function( event, ui ) {
                $( "#amountServings" ).val( ui.value );
              }
            });
            $( "#amountServings" ).val( $( "#slider-range-minS" ).slider( "value" ) );
        } );
    </script>
    <!-- END Slider Servings ---------!-->

    </head>
    <p>
<p>
  <label for="5thTier">5th Tier:</label>
  <input type="text" id="5thTier" readonly style="border:0; color:blue; font-weight:bold; font-size:100%;">
  <input id="5thTier-enabled" type="checkbox">I want a 5th Tier
</p>
<div id="slider-range-5thTier" style="width:70%;"></div>    

<p>
  <label for="4thTier">4th Tier:</label>
  <input type="text" id="4thTier" readonly style="border:0; color:blue; font-weight:bold; font-size:100%">
  <input id="4thTier-enabled" type="checkbox">I want a 4th Tier
</p>
<div id="slider-range-4thTier" style="width:70%;"></div>

<p>
  <label for="3rdTier">3rd Tier:</label>
  <input type="text" id="3rdTier" readonly style="border:0; color:blue; font-weight:bold; font-size:100%">
  <input id="3rdTier-enabled" type="checkbox">I want a 3rd Tier
</p>
<div id="slider-range-3rdTier" style="width:70%;"></div>

<p>
  <label for="2ndTier">2nd Tier:</label>
  <input type="text" id="2ndTier" readonly style="border:0; color:blue; font-weight:bold; font-size:100%">
  <input id="2ndTier-enabled" type="checkbox">I want a 2nd Tier
</p>
<div id="slider-range-2ndTier" style="width:70%;"></div>

<p>
  <label for="bottomTier">Bottom Tier:</label>
  <input type="text" id="bottomTier" readonly style="border:0; color:blue; font-weight:bold; font-size:100%">
</p>
<div id="slider-range-bottomTier" style="width:70%;"></div>
<br /><br /><br /><br />
</p>
    <p>
   <label for="amountBudget">Maximum Budget:</label>
<input type="text" id="amountBudget" readonly style="border:0; color:blue; font-weight:bold; font-size:100%">
</p>

<div id="slider-range-minB" style="width:70%;"></div>
<!-- ----------------END Slider Budget -------------------------!-->

<!-- ----------------Slider Servings -------------------------!-->
<p>
  <label for="amountServings">Maximum Servings:</label>
  <input type="text" id="amountServings" readonly style="border:0; color:blue; font-weight:bold; font-size:100%">
</p>

<div id="slider-range-minS" style="width:70%;"></div>
</html>
</body>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...