jQuery UI多个可调整大小的div不大于父div
jQuery UI多个可调整大小的div不大于父div
提问于 2020-01-20 15:50:49
我有个家长。父div包含另外五个div(相邻)。我想要做的是，使这些div在jQuery UI中可调整大小。
问题(这使我很难)，是所有五个div的可调整大小宽度不能大于父div的宽度。例如：
假设，screen).
- Each父
- div的宽度为500‘s(在父div中为100% )，父div的宽度为100’s(包括边距和边框)；
当div 1从100 is调整到200 is宽度时，会发生以下情况：
- Div 1现在的宽度为200px.
- Divs 2、3、4和5，宽度为75 of (因为500 px-300px=200 of /4=75 of)。
我在下面添加了一个代码示例和一个图像。我使用了在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>
回答 1
Stack Overflow用户
回答已采纳
发布于 2020-01-20 17:31:43
这里的问题是，您必须计算每个可调整大小的切片，包括边框。最初，您将查看第一个元素并计算其他同级元素上的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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/59826778
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号