1

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

接下来的情况是：在基于 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 没有提供切换方向和维护底层现有窗格的内置功能。

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

4

1 回答 1

1

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

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

因此，我通过 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 将其打开以重新绑定到拆分器。

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

问候

于 2017-06-27T09:24:16.987 回答