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

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

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

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 не предоставляет встроенных функций для переключения ориентации и сохранения базовых существующих панелей.

Я дам ответ ниже сам, но приветствуются другие рабочие решения или более эффективные способы.


jquery switch-statement kendo-ui orientation kendo-splitter
person Cédric Berlez    schedule 27.06.2017    source источник

Ответы (1)


arrow_upward
1
arrow_downward

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

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

Итак, я занялся отладкой через 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.

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

Привет

person Cédric Berlez    schedule 27.06.2017