使用JQuery，如何强制使用可调整大小的div来形成适合其子控件？(Using JQuery, how can enforce a resizable div to form

使用JQuery，如何强制使用可调整大小的div来形成适合其子控件？(Using JQuery, how can enforce a resizable div to form-fit its child controls?)

附加的图像有一些关于我如何喜欢这个可调整大小的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所拥有的内容

如果你玩小提琴，你会发现div在高度调整时不符合它的孩子。

它没有按照我的意愿工作，并希望得到一些帮助/见解。 谢谢。

The attached image has some info on how I'd like this resizable div to behave.

Basically, I'd like the div to be able to set the controls vertically or horizontally.

That said, say I have dynamically generated set of controls in a div, in this case:

<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>

but it can be any number of buttons, textboxes, comboboxes, etc.

Here's what I have for JQuery thus far in a JSFiddle

If you play with the fiddle, you'll see that the div doesn't conform to its children when resizing height-wise.

Its not working how i'd like it to and was hoping for some help/insight. Thank you.

最满意答案

这个片段试图在它们出现的任何配置中拥抱子div的高度，设置最小宽度，并且有一个函数来计算最大宽度（此函数已被注释掉，因为它上面有效锁定了可调整性 - 我不确定你想要什么，但你可以取消注意看）。

请注意，隐藏按钮与模拟新内容的方式不同，因为maxheight函数会查找最后一个child-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> 
  
 
This snippet attempts to hug the height of the child-divs in whichever config they appear, a minimum width is set, and there's a function to calculate the max width (this function has been commented out though because with it on it effectively locks the resizability -which I'm not sure you want, but you can uncomment to see).
 
Note that the hidden button isn't the same way as simulating new content as the maxheight function looks for the height of the last child-div and if this has display:none then it assumes the bottom of the last child-div is zero. So the 'display' button has been adapted to append new buttons.
 
 
 
  
  
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>