剑道分离器方向

Question

我真的很难尝试使用 Kendo UI Splitter 创建我想要的布局。我要做的就是有一个右窗格和一个顶部和底部窗格，右窗格从上到下并且不被底部窗格切断。下面是我想要完成的图表。如果有人可以提供如何使用 Razor 或 JQuery 来执行此操作的示例，将不胜感激。

提前致谢。

Answer 1

将一个拆分器嵌入另一个拆分器：

<div id="leftRightSplitter">
    <div id="leftPane">
      <div id="topBottomSplitter">
        <div id="topPane">
          Left-Top
        </div>
        <div id="bottomPane">
          Left-Bottom
        </div>
      </div>
    </div>
    <div id="rightPane">
      Right
    </div>
</div>

<script>
    $(document).ready(function() {
        $("#leftRightSplitter").kendoSplitter({
            orientation: "horizontal",
            panes: [
                { collapsible: false, size: "75%" },
                { collapsible: false }
            ]
        });

        $("#topBottomSplitter").kendoSplitter({
          orientation: "vertical"
        });
    });
</script>

示例：https://dojo.telerik.com/@Stephen/umEhOMId

或者：https://demos.telerik.com/kendo-ui/splitter/index

或者：https://demos.telerik.com/aspnet-mvc/splitter