kendo ui 分离开关方向

Question

只是想在这里分享我最近在一个项目中遇到的一个小问题的解决方案。

接下来的情况是：在基于 kendo UI 的 Web 项目中，您希望通过下一个基本配置使用拆分器功能：

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

现在假设您想更改 "toggle" 方向并能够根据需要重复使用该切换开关。

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

我会在下面提供答案，但欢迎使用其他可行的解决方案或更有效的方法。

Answer 1

如问题中所述，我将 post 我自己的解决方案。

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 中完全使拆分器对象为空，但是你完全删除了 link 到 DOM 并重置 DOM 将其设置为打开重新绑定到拆分器。

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

问候

kendo ui 分离开关方向

kendo ui splitter switch orientation

jquery

switch-statement

orientation

kendo-ui

kendo-splitter

HTML

JS