jquery - 使用 JQuery，如何强制调整大小的 div 以适应其子控件？

Question

所附图片包含一些关于我希望这个可调整大小的 div 的行为方式的信息。

基本上，我希望 div 能够垂直或水平设置控件。

也就是说，假设我在一个 div 中动态生成了一组控件，在这种情况下:

<style type="text/css">
    button { width: 100px; }
    input { width: 100px; }    
</style>
<div id="block">
    <div id="content">
        <button id="btn1">Button One</button>
        <button id="btn2">Button Two</button>
        <input id="txb1"></input>
        <button id="btn3">Button Three</button>
    </div>
</div>

但它可以是任意数量的按钮、文本框、组合框等。

这是迄今为止我在 JSFiddle 中对 JQuery 的了解。

如果您使用 fiddle ，您会发现在调整高度时，div 不符合其子元素。

它无法正常工作，我希望得到一些帮助/见解。谢谢。

Answer 1

这个片段试图在它们出现的任何配置中包含子 div 的高度，设置了最小宽度，并且有一个函数来计算最大宽度(这个函数已经被注释掉了，因为它有效地锁定可调整大小 - 我不确定您是否想要，但您可以取消注释以查看)。

请注意，隐藏按钮与模拟新内容的方式不同，因为 maxheight 函数会查找最后一个子 div 的高度，如果它有 display:none 则它假定最后一个 child-div 的底部为零。因此，“显示”按钮已经过修改以附加新按钮。

var block = $("#block");
var content = $("#divContent")
var cons = content.children().length * 20;
var numberOfControls = content.children().length;
var controlheight = 20;
var padding = 5;
var totalwidth = 0;
var totalheight = 0;
var minwid = 0;
var maxwid = 0;
var minhi = 0;
var maxhi = 0;
var arrwid = [];

block.ready(function(e) {
  //--- initialize values
  totalwidth = 0;

  //--- Find the sum of lengths of controls to set the maximum width
  maxwid = getMaxWidth() + padding;

  //--- Find the control with the longest length for minimum width
  minwid = getMinWidth() + padding;

  //--- Find number of controls to set the height
  maxhi = getMaxHeight();

  //--- Find minHeight
  minhi = controlheight;
});

block.draggable();

function res() {
  block.resizable({
    maxWidth: maxwid,
    minWidth: minwid,
    maxHeight: maxhi,
    minHeight: minhi,
    resize: function(e) {


      block.height(getMaxHeight());
      //block.width(totalwidth);

      //content.width(totalwidth + 400);
      //alert(totalwidth);
    }
  });
}
$(window).load(function() {
  res(); // defined for later resetting
});

function getMaxWidth() {
  content.children().each(function(i, val) {
    totalwidth = totalwidth + $("#" + val.id).width() + padding;
  });
  return totalwidth;
}

/*
function getMaxWidth() {
    var tempWidth = [];
    content.children().each(function(i, val){
        tempWidth.push($(this).outerWidth());          
    });
    totalwidth = Math.max.apply(null, tempWidth);
    return totalwidth;
}  // this function will get you the maximum current width, but combined with maxheight will effectively lock your resizer.
*/

function getMinWidth() {
  var arrwid1 = [];
  content.children().each(function(i, val) {
    arrwid1.push($(this).width());
  });
  minwid = Number(Math.max.apply(null, arrwid1)) + padding;
  $('#w').text('minwidth =' + minwid);
  return minwid;
}

function getMaxHeight() {
  var dcon = $('#divContent').children().last(),
    totalwidth = dcon.position().top + dcon.height();
  $('#h').text('height =' + totalwidth);
  return totalwidth;
}

function getMinHeight() {
  return controlheight; //--- Height of a single control.
}

function recalculateDimensions() {
  numberOfControls = content.children().length;
  maxwid = getMaxWidth();
  minwid = getMinWidth();
  maxhi = getMaxHeight();
  minhi = getMinHeight();
}

$('#btnDisplayBTN').click(function() {
  $('#divContent').append('<button class="btnNewBTN">new button!</button>');
  recalculateDimensions();
  res();
});


$('#btnGetHeight').click(function btnGetHeight_Click() {
  alert((numberOfControls + padding) * controlheight);
});

#block {
  border: 1px solid red;
  background-color: red;
  width: 300px;
  padding: 5px
}
#btnDisplayBTN {
  width: 100px;
}
#btnGetHeight {
  width: 100px;
}
.btnNewBTN {
  width: 100px;
}
#divContent {} div {
  width: 100%;
}
#monitor {
  position: fixed;
  bottom: 2em;
}

<link href="https://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.min.js"></script>

<div id="block">
  <div id="divContent">
    <button id="btnDisplayBTN">Display</button>
    <button id="btnGetHeight" click="btnGetHeight_Click()">Total Height</button>
    <input id="txb" />
  </div>
</div>

<div id='monitor'>
  <div id='h'></div>
  <div id='w'></div>
</div>