0

我在一个页面上有两个剑道拆分器。一个剑道分离器位于另一个剑道分离器内部。我的问题是如何在调整父剑道拆分器的大小时停止调整子剑道拆分器的大小。这是一种不寻常的行为，但我需要让它发挥作用。

看，当我尝试调整第一个拆分器的大小时，第二个拆分器也会自动调整大小。我怎样才能阻止它调整大小？有人可以请吗？

$("#vertical").kendoSplitter({
    orientation: "horizontal",
        panes: [
            { collapsible: true, resizable: true, size: "100px" },
            { collapsible: true },
            { collapsible: true, resizable: true, size: "100px" }
        ]
    });

$("#horizontal").kendoSplitter({
    panes: [
        { collapsible: true },
        { collapsible: true },
       
    ]
});
html
{
    overflow: hidden;
    font: 12px sans-serif;
}

html,
body,
#vertical
{
    height: 100%;
    border-width: 0;
    margin: 0;
    padding: 0;
}
<link href="http://cdn.kendostatic.com/2014.1.416/styles/kendo.common.min.css" rel="stylesheet"/>
<link href="http://cdn.kendostatic.com/2014.1.416/styles/kendo.blueopal.min.css" rel="stylesheet"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.1.416/js/kendo.web.min.js"></script>

<div id="vertical">
    <div>
       1
    </div>
    <div id="middlePane">
        <div id="horizontal" style="height: 100%">
            <div>
               2
                <input type="text" class="k-textbox" />
            </div>
            <div>
              3
            </div>
          
        </div>
    </div>
</div>

4

2 回答 2

1

我已经使用以下解决方案解决了我的问题。

var splitter = $("#horizontal").data("kendoSplitter");
splitter.options.panes[0].size = "200px";
splitter.size("#right-bottom-pane", "200px");
于 2018-07-31T07:28:06.103 回答
0

但是，我有办法修复正确的面板宽度。我已经更新了代码片段。检查下面。

谢谢

$("#vertical").kendoSplitter({
    orientation: "horizontal",
        panes: [
            { collapsible: true, resizable: true, size: "50px" },
        ]
    });

$("#horizontal").kendoSplitter({
    panes: [
        { collapsible: true},
        { collapsible: true}
    ]
});
var splitter = $("#horizontal").getKendoSplitter();
splitter.size("#three", 400 + "px");
html
{
    overflow: hidden;
    font: 12px sans-serif;
}

html,
body,
#vertical
{
    height: 100%;
    border-width: 0;
    margin: 0;
    padding: 0;
}
<link href="http://cdn.kendostatic.com/2014.1.416/styles/kendo.common.min.css" rel="stylesheet"/>
<link href="http://cdn.kendostatic.com/2014.1.416/styles/kendo.blueopal.min.css" rel="stylesheet"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.1.416/js/kendo.web.min.js"></script>

<div id="vertical">
    <div id="one">
       1
    </div>
    <div id="middlePane">
        <div id="horizontal" style="height: 100%">
            <div id="two">
               2
                <input type="text" class="k-textbox" />
            </div>
            <div id="three">
              3
            </div>
          
        </div>
    </div>
</div>

于 2016-08-03T11:41:46.943 回答