Question

我需要一个可调整大小的栏，可以一直到没有酒吧。取决于我设置网格的方式，有时我可以，有时我不能。我尝试的值是条形的初始大小的倍数。

以下是示例

$("#app-interactionAdjustingTheFractionBarsSTART-question-bar-5").resizable({
  handles: 'n',
  grid: [0, 60]
});

不工作： https://jsfiddle.net/xmzj3x54/

$("#app-interactionAdjustingTheFractionBarsSTART-question-bar-5").resizable({
  handles: 'n',
  grid: [0, 20]
});

对于初始条形尺寸的任何倍数，我需要能够一直走到没有高度。

Answer 1

我能够让这个工作水平但不垂直。可能是jQuery本身的错误？相反，我想出了一个应该完成工作的轻微hacky解决方案。

基本上，如果您的网格大小为20，则最小高度似乎为20px - 即使minHeight设置为0.您将可调整大小的div放入包装div中，将可调整大小的div移动20px，然后您将换行设置为overflow: hidden。然后，如果要检索div的感知高度，则必须从实际高度中减去20。示例如下。

var gridY = 20;

$("#resizable").resizable({
  handles: 'n',
  grid: [0, gridY],
  minHeight: gridY,
  maxHeight: 120,
  resize: function(e, ui){
  	var actualHeight = ui.size.height;
  	var perceivedHeight = actualHeight - gridY;
  	$("p").text(`${perceivedHeight}%`);
    
    // because the height of my div is
    // 100 I dont have to convert it to
    // percentage, but if it was anything
    // other than 100 you would have to 
  }
});

#resizable-wrap{
  width: 100px; 
  height: 100px;
  border: 1px solid #000;
  position: relative;
  overflow: hidden;
}

#resizable {
  position: absolute;
  top: 0;
  left: 25px;

  width: 50px; 
  height: 120px;  

  background-color: #F3EF7D;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<div id="resizable-wrap">
<div id="resizable" class="resizableBox"></div>
</div>
<p>100%</p>

JQuery UI可调整大小的网格，取决于网格值的不一致行为

1 个答案: