我现在正在计算门。这个计算有两个部分 - 门口和门。而且我不知道如何计算这个维度。我的桌子有尺寸门口和门。门的高度不变。这让我意识到了。但随着宽度我有问题。这些宽度值的公式应该是多少?我有一个想法:我用一个值为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;
此表格带有dimensions