jquery可调整大小以显示当内容包含垂直滚动条时左右面板拆分器未按预期工作

epggiuax 于 2023-02-08 发布在 jQuery

关注(0)|答案(1)|浏览(126)

我实现了jquery resizable来显示两个水平面板（leftpanel和rightpanel），两个面板之间有一个拖动条。我添加了一个border-right，在left_pane的右边包含一条黑线，以帮助定位拖动的位置。
此功能适用于内容很少的情况，但适用于添加内容的情况（使用[Add Content]按钮）：
1.拆分拖动停止工作/不再可拖动（这是因为垂直滚动条吗？）
1.拆分拖动器的位置在滚动条的左侧，而不是预期的"黑线"位置。

$("#left_pane").resizable({
  handles: 'e',
  resize: function() {
    $("#right_pane").outerWidth($("#container").innerWidth() - $("#left_pane").outerWidth());
  }
});

function addContent() {
  // Fill out the pane content...
  var lp = document.getElementById('left_pane');
  var rp = document.getElementById('right_pane');
  for (var i = 0; i < 10; i++) {
    lp.innerHTML += lp.innerText + ' ';
    rp.innerHTML += rp.innerText + ' ';
  }
}

* {
  box-sizing: border-box;
}

#container {
  position: absolute;
  width: calc(100% - 20px);
  height: calc(100% - 50px);
}

#left_pane,
#right_pane {
  top: 0;
  height: calc(100% - 20px);
  position: absolute;
  padding: 10px;
  color: black;
  overflow:auto;
}

#left_pane {
  width: 25%;
  left: 0;
  background: lightgrey;
  border-right: 2px solid black;
}

#right_pane {
  width: 75%;
  right: 0;
  background: white;
}

button {
    margin:10px;
}

<button onClick='addContent()'>Add Content</button>

<div id="container">Container
  <div id="left_pane">Lorem ipsum dolor sit amet </div>
  <div id="right_pane">Lorem ipsum dolor sit amet </div>
</div>

<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">

也可以在https://jsfiddle.net/Abeeee/xvhc615j/9/上找到运行示例
我该怎么解决这个问题？

jquery

来源：https://stackoverflow.com/questions/75338134/jquery-resizable-to-show-left-right-panel-splitter-not-working-as-expected-when

1条答案

按热度按时间

s5a0g9ez1#

请看下面的例子。

$(function() {
  function addContent(event) {
    var panes = $("div[id*='PaneContent']");
    for (var i = 0; i < 10; i++) {;
      panes.append(" " + panes.eq(0).text());
    }
  }

  $("#addContent").click(addContent);

  $("#leftPaneWrapper").resizable({
    handles: {
      e: "#leftPaneHandle"
    },
    resize: function(e, ui) {
      $("#rightPaneContent").width($("#container").width() - ui.size.width);
    }
  });
});

* {
  box-sizing: border-box;
}

#container {
  width: calc(100% - 20px);
  height: calc(100% - 50px);
}

div[id*='PaneContent'] {
  top: 0;
  height: calc(100% - 20px);
  padding: 10px;
  margin: 0;
  color: black;
  overflow: auto;
  position: absolute;
}

#leftPaneWrapper {
  width: 25%;
  height: calc(100% - 20px);
  left: 0;
  position: absolute;
}

#leftPaneHandle {
  width: 3px;
  height: 100%;
  background: black;
  position: absolute;
  top: 0;
  right: 3px;
}

#leftPaneContent {
  background: lightgrey;
  left: 0;
  width: calc(100% - 5px);
  padding-right: 0;
}

#rightPaneContent {
  width: 75%;
  right: 0;
  top: 40px;
  background: white;
}

button {
  margin: 10px;
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>

<div>
  <button id="addContent">Add Content</button>
</div>
<div id="container">
  <div id="leftPaneWrapper">
    <div id="leftPaneHandle" class="ui-resizable-handle ui-resizable-e"></div>
    <div id="leftPaneContent">Lorem ipsum dolor sit amet </div>
  </div>
  <div id="rightPaneContent">Lorem ipsum dolor sit amet </div>
</div>

您可以使用自定义句柄。当您向元素添加边框时，它不是可调整大小的句柄。
支持以下键：{ n, e, s, w, ne, se, sw, nw }。任何指定的值应该是一个jQuery选择器，它与用作句柄的resizable的子元素匹配。如果句柄不是resizable的子元素，则可以直接传入DOMElement或一个有效的jQuery对象。
注意：生成自己的句柄时，每个句柄都必须具有ui-resizable-handle类以及相应的ui-resizable-{direction}类，例如ui-resizable-s
查看更多信息：www.example.comhttps://api.jqueryui.com/resizable/#option-handles
我为左面板创建了一个Wrapper，在其中添加了一个Handle和内容，当添加更多内容时，溢出只针对内容，而不影响Handle或Wrapper。

赞(0）回复(0）举报 2023-02-08

我来回答

jquery可调整大小以显示当内容包含垂直滚动条时左右面板拆分器未按预期工作

1条答案

相关问题

热门标签

最新问答