我有一个父 div。父 div 包含其他五个 div(彼此相邻)。我想做的是使用 jQuery UI 调整这些 div 的大小。
问题(这对我来说很困难)是所有五个 div 的可调整宽度不能大于父 div 的宽度。例如:
- 比方说，父级 div 的宽度为 500 像素(在我的屏幕上为 100%)。
- 父 div 内的每个 div 的宽度为 100px(包括边距和边框)；
当 div 1 的宽度从 100 像素调整为 200 像素时，会发生以下情况:
- Div 1 现在的宽度为 200 像素。
- 第 2、3、4 和 5 格的宽度为 75 像素(因为每个 500 像素 - 300 像素 = 200 像素/4 = 75 像素)。
我在下面添加了代码示例和图像。我使用了在 StackOverflow 上找到的示例并对其进行了调整。为什么这个例子不能正常工作？为什么 div 移动到下一行而不是停在屏幕末尾？
感谢您的帮助。
<style>
body, html {
margin: 0;
padding: 0;
}
#app {
width: 100%;
height: 100%;
}
#resultColumns {
width: calc(100% - 20px);
height: calc(100% - 20px);
padding: 10px;
}
.columnContainer {
min-width: 100px;
height: 100%;
background-color: #eeeeee;
float: left;
border-top: 1px solid #333333;
border-bottom: 1px solid #333333;
border-left: 1px solid #333333;
}
.lastColumnContainer {
border-right: 1px solid #333333;
}
.columnHeader {
font-size: 16px;
font-weight: bold;
text-align: center;
}
.columnContent {
font-size: 14px;
text-align: left;
}
</style>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
</head>
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<html>
<body>
<div id="app">
<div id="resultColumns">
<!-- First Column -->
<div class="columnContainer">
<div class="columnHeader">Title 1</div>
<div class="columnContent">Content 1</div>
</div>
<!-- Second Column -->
<div class="columnContainer">
<div class="columnHeader">Title 2</div>
<div class="columnContent">Content 2</div>
</div>
<!-- Third Column -->
<div class="columnContainer">
<div class="columnHeader">Title 3</div>
<div class="columnContent">Content 3</div>
</div>
<!-- Fourth Column -->
<div class="columnContainer">
<div class="columnHeader">Title 4</div>
<div class="columnContent">Content 4</div>
</div>
<!-- Fifth Column -->
<div class="columnContainer lastColumnContainer">
<div class="columnHeader">Title 5</div>
<div class="columnContent">Content 5</div>
</div>
</div>
</div>
</body>
</html>
<script>
makeResizable();
function makeResizable() {
$('#resultColumns .columnContainer:eq(0)').resizable({
maxWidth: getMaxWidth($('#resultColumns .columnContainer:eq(0)')),
stop: updateMaxWidth,
handles: 'e'
});
$('#resultColumns .columnContainer:eq(1)').resizable({
maxWidth: getMaxWidth($('#resultColumns .columnContainer:eq(1)')),
stop: updateMaxWidth,
handles: 'e'
});
$('#resultColumns .columnContainer:eq(2)').resizable({
maxWidth: getMaxWidth($('#resultColumns .columnContainer:eq(2)')),
stop: updateMaxWidth,
handles: 'e'
});
$('#resultColumns .columnContainer:eq(3)').resizable({
maxWidth: getMaxWidth($('#resultColumns .columnContainer:eq(3)')),
stop: updateMaxWidth,
handles: 'e'
});
$('#resultColumns .columnContainer:eq(4)').resizable({
maxWidth: getMaxWidth($('#resultColumns .columnContainer:eq(4)')),
stop: updateMaxWidth,
handles: 'e'
});
}
function getMaxWidth(e) {
return $('#resultColumns').width() - e.siblings().outerWidth() - 10; // 10px for the borders (2px each) - 5 divs in total
}
function updateMaxWidth(e, ui) {
ui.element.siblings().resizable('option', 'maxWidth', getMaxWidth(ui.element.siblings()));
}
</script>最佳答案
这里的问题是您必须计算每个可调整大小的切片，包括边框。最初，您查看第一个元素并计算其他同级元素的 maxWidth。对于您的示例，这是其他 4 个元素。
如果您捕获其他元素之一，比如说第三个元素，则需要更新其他剩余的下一个兄弟元素，以便它们的 maxWidth 是剩余的部分。
$(function() {
function getPad(o, d) {
return parseInt(o.css("padding-" + d));
}
function getMaxWidth(o) {
var mw = parseInt(o.parent().innerWidth()) - (getPad(o.parent(), "left") + getPad(o.parent(), "right"));
var sbw = 2; // First & Last Border
o.siblings(".columnContainer").each(function(i, el) {
sbw += parseInt($(el).width()) + 1; // Inner Border
});
return mw - sbw;
}
function makeResizable() {
$('#resultColumns .columnContainer').resizable({
handles: 'e',
maxWidth: getMaxWidth($("#resultColumns .first")),
resize: function(e, ui) {
console.log($(this).width(), getMaxWidth($(this)));
},
stop: function(e, ui) {
$(this).siblings().each(function(i, el) {
$(el).resizable("option", "maxWidth", getMaxWidth($(el)));
});
}
});
}
makeResizable();
});html,
body {
margin: 0;
padding: 0;
}
#app {
width: 100%;
height: 100%;
}
#resultColumns {
width: calc(100% - 20px);
height: calc(100% - 20px);
padding: 10px;
}
.columnContainer {
min-width: 100px;
height: 100%;
background-color: #eeeeee;
float: left;
border-top: 1px solid #333333;
border-bottom: 1px solid #333333;
border-left: 1px solid #333333;
}
.last {
border-right: 1px solid #333333;
}
.columnHeader {
font-size: 16px;
font-weight: bold;
text-align: center;
}
.columnContent {
font-size: 14px;
text-align: left;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<div id="app">
<div id="resultColumns">
<!-- First Column -->
<div class="columnContainer first">
<div class="columnHeader">Title 1</div>
<div class="columnContent">Content 1</div>
</div>
<!-- Second Column -->
<div class="columnContainer">
<div class="columnHeader">Title 2</div>
<div class="columnContent">Content 2</div>
</div>
<!-- Third Column -->
<div class="columnContainer">
<div class="columnHeader">Title 3</div>
<div class="columnContent">Content 3</div>
</div>
<!-- Fourth Column -->
<div class="columnContainer">
<div class="columnHeader">Title 4</div>
<div class="columnContent">Content 4</div>
</div>
<!-- Fifth Column -->
<div class="columnContainer last">
<div class="columnHeader">Title 5</div>
<div class="columnContent">Content 5</div>
</div>
</div>
</div>关于javascript - jQuery UI 多个可调整大小的 div 不大于父 div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59826778/