javascript - 动态改变分离器的高度

Question

我已经在我的应用程序中实现了 kendoUI splitter。我想动态改变分离器的高度。我这样定义分离器:

<div id="splitter" style="height:500px;width:100%">
  <div id="leftPane"></div>
  <div id="rightPane"></div>
</div>
$("#splitter").kendoSplitter({
  panes: [
    { collapsible: true, size: "50%" },
    { collapsible: true, size: "50%" }
  ],
  orientation: "horizontal",
});

我不想在 Pane 中显示滚动条。我想增加分割器的高度，以删除滚动条。你能告诉我如何实现这个吗？

Answer 1

为了调整拆分器的大小，您可以执行以下操作:

// Get reference to the splitter
var splitter = $("#splitter").data("kendoSplitter");
// Set the new height to 600px
splitter.wrapper.height(600);

但是由于 splitter 中没有 redraw 方法，因此您应该通过执行以下操作来触发 resize 事件:

// Trigger a resize event in splitter to force a redraw.
splitter.trigger("resize");