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

Question

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

<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",
});

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

Answer 1

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

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

但是由于您没有redraw方法splitter应该trigger通过以下方式处理resize事件：

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