HTML

<div id="mySplitter">
    <div id="primaryItemPane">

    </div>
    <div id="secundaryItemPane">

    </div>
</div>

JS

$("#mySplitter").kendoSplitter({
                orientation: "vertical",
                panes: [
                    { collapsible: false, size: "50%", contentUrl: "/urlToPane" },
                    { collapsible: false, size: "50%", contentUrl: "/urlToPane" },
                ]
            });

现在假设您要更改“切换”方向，并能够根据需要重新切换。

主要问题是Kendo UI不提供内置函数来切换方向并维护底层现有窗格。

我将在下面提供自己的答案，但欢迎其他工作解决方案或更有效的方式。

Answer 1

如问题中所述，我将在此处发布我自己的解决方案。

This页面已经给了我一个很好的开端，但是有些解决方案对我没有用，或者没有为所描述的解决方案提供具体的代码。

所以我通过Chrome进行了调试，并提出了以下解决方案：

orderbasedSwitchOrientation: function () {
        //get the existing working splitter
        var splitter = $("#mySplitter").data("kendoSplitter");

        //remove the DOM splitbar elements and remove all splitter styling
        splitter.element
            .children(".k-splitbar").remove()
            .end()
            .children(".k-pane").css({ width: "", height: "", top: "", left: "" });

        //destroy the splitter link to the DOM
        splitter.destroy();

        //Switch the orientation of the destroyed splitter object
        splitter.orientation = splitter.options.orientation = (splitter.orientation == "vertical" ? "horizontal" : "vertical");

        //re-initialize the splitter with the newly switched orientation
        $("#mySplitter").kendoSplitter({
            orientation: splitter.orientation
        });
    }

我认为这种方法，因为你从来没有在JS中完全使splitter对象为null，但是你完全删除了DOM的链接并重置了它设置为打开的DOM，以便重新绑定到Splitter。

如上所述，如果有人有更好的解决方案，请提供

问候

kendo ui splitter switch orientation

HTML

JS

1 个答案: