Ориентация переключателя сплиттера kendo ui

Question

Просто хотел поделиться решением небольшой проблемы, с которой я столкнулся, в одном из моих недавних проектов здесь.

Ситуация следующая: в веб-проекте на основе пользовательского интерфейса kendo вы хотите использовать функцию разветвителя со следующей базовой конфигурацией:

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

Как указано в вопросе, я опубликую свое собственное решение здесь.

Эта страница уже дала мне хороший старт, но некоторые решения не помогли мне или не предоставили конкретный код для описанного решения.

Поэтому я занялся отладкой с помощью 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, устанавливая его открытым для повторного связывания с Splitter.

Как указано выше, если у кого-то есть лучшие решения, пожалуйста, предоставьте их

Привет