用滑块宽度值计算

时间:2017-10-05 09:15:40

标签: javascript jquery html

我现在正在计算门。这个计算有两个部分 - 门口和门。而且我不知道如何计算这个维度。我的桌子有尺寸门口和门。门的高度不变。这让我意识到了。但随着宽度我有问题。这些宽度值的公式应该是多少?我有一个想法:我用一个值为height \ width的对象写一个数组。但接下来要做什么我不知道。谢谢!



 $(document).ready(function() { 
 var $total = $(".total");
        var $total1 = $(".total1");
        var $tot = $(".tot");
        var $tot1 = $(".tot1");
          
        var mySlider = $( "#mySlider" ).slider({
            range: "min",
            min: 650,
            step: 50,
            max: 1000,
            value: 1000,
            slide: function( event, ui ) { 
                mySlider1.slider( "option", "value", ui.value + 50 );
                $total.val(  ui.value );    
            },
            change: function(event, ui){
                $total.val(  ui.value );        
            } 
        });
        $total.val( mySlider.slider( "value" ) );
        // $total.on("keyup",function(e){
        //      $("#mySlider").slider("value",this.value);
        // });

        var mySlider1 = $( "#mySlider1" ).slider({
            range: "min",
            disabled: true,
            min: 600,
            step: 100,
            max: 900,
            value: 900,
            slide: function( event, ui ) {
                mySlider.slider( "option", "value", ui.value - 100); 
                $total1.val(  ui.value );   
            },
            change: function(event, ui){
                $total1.val(  ui.value );       
            } 
        });
        $total1.val( mySlider1.slider( "value" ) );

        var rangeSlider = $( "#rangeSlider" ).slider({
            orientation: "vertical",
            range: "min",
            min: 2040,
            max: 2080,
            value: 3000,
            slide: function( event, ui ) {
                $tot.val( ui.value );
                rangeSlider1.slider("option","value", ui.value);  
            },
            change: function(event, ui){
                $tot.val( ui.value );  
            } 
        });
        $tot.val( rangeSlider.slider( "value" ) );
               
        var rangeSlider1 = $( "#rangeSlider1" ).slider({
            orientation: "vertical",
            disabled: true,
            range: "min",
            min: 0,
            max: 2000,
            value: 2000,
            slide: function( event, ui ) {
                $tot1.val( ui.value );
                rangeSlider.slider("option","value", ui.value);    
            },
            change: function(event, ui){
                $tot1.val( ui.value );  
            } 
        });
        $tot1.val( rangeSlider1.slider( "value" ) );
        
        
        // var sliderOptions = [ 
        //  { minWidth: 650 },
        //  { maxWidth: 1000 },   
        //  { minHeight: 2040 },
        //  { maxHeight: 2080 },
        //  { doorHeight: 2000 },
        //  { doorMaxWidth: 900 },
        //  { doorMinWidth: 600 }
        // ];

        // function () {

        // }
    });

<!DOCTYPE html> 
<html> 
  <head>
    <title>jQuery UI : Slider with Minimum Range </title> 
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.3/themes/hot-sneaks/jquery-ui.css" />
  <script src="http://code.jquery.com/jquery-2.1.3.js"></script>
  <script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
</head> 
<body>
<!-- Doorway -->
<div class="before" style="display: inline-block; margin-right: 20px;">
  <p>
    <label for="tot"> Height:</label>
    <input type="text" id="tot" class="tot" style="border:0; color:#fa4b2a; font-weight:bold;">
  </p>
   
  <div id="rangeSlider" style="height:250px; display: inline-block;"></div>


  <div style="display:inline-block; width: 185px; height: 240px; background: #ececec;"></div>

  <p>
    <label for="total">Width:</label>
    <input type="text" id="total" class="total" style="border:0; color:#fa4b2a; font-weight:bold;">
  </p>
  <div id="mySlider" style="width: 230px"></div>
</div>

<!-- Door -->
<div class="after" style="display: inline-block;">
  <p>
    <label for="tot1"> Height:</label>
    <input type="text" id="tot1" class="tot1" disabled  style="border:0; color:#fa4b2a; font-weight:bold; background: #fff;">
  </p>
   
  <div id="rangeSlider1" style="height:250px; display: inline-block;"></div>

  <div style="display:inline-block; width: 185px; height: 240px; background: #ececec;"></div>

  <p>
    <label for="total1">Width:</label>
    <input type="text" id="total1" class="total1" disabled style="border:0; color:#fa4b2a; font-weight:bold;  background: #fff;">
  </p>
  <div id="mySlider1" style="width: 230px"></div>
</div>
</body>
</html>
&#13;
&#13;
&#13;

此表格带有dimensions

0 个答案:

没有答案