剑道ui分离器开关方向答案

【问题标题】：kendo ui splitter switch orientation剑道ui分离器开关方向
【发布时间】：2017-06-27 09:15:30
【问题描述】：

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

情况如下：在基于 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" },
                ]
            });

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

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

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

【问题讨论】：

标签： jquery kendo-ui switch-statement orientation kendo-splitter

【解决方案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 中完全使拆分器对象为空，但是您完全删除了到 DOM 的链接并重置 DOM 将其打开以重新绑定到拆分器。

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

问候

【讨论】：