HTML

Question

在我的项目中，我需要动态创建和删除分割器。我们正在使用KendoUI。

以编程方式创建分割器很好。它正在删除我关注的分离器。我查看了分割器控件的API，它有一个destroy方法，但不会从DOM中删除小部件。

我认为我唯一的选择就是从DOM中手动删除它。所以我做的是检查了分割器功能创建/修改的元素，然后将它们恢复到原始状态。

这是我到目前为止编写的代码：

HTML

<p>
<button id="createSplitter" type="button" class="k-button">Create Splitter</button>

<button id="destroySplitter" type="button" class="k-button">Destroy Splitter</button>
</p>

<div id="splitter">
    <div id="left">Left column</div>
    <div>Main content</div>
</div>

的JavaScript

var leftPane = $("#left");
var splitterElement;
$("#createSplitter").click(function(e) {
splitterElement = $("#splitter").kendoSplitter({
    panes: [
        { collapsible: true, size: 200 },
        { }
    ]
});
});

$("#destroySplitter").click(function(e){
    var splitter = splitterElement.data("kendoSplitter");
    splitter.destroy();
    $('#splitter').removeClass('k-widget k-splitter').removeAttr('data-role');
    $('#splitter .k-splitbar').remove();
    $('#splitter .k-pane')
    .removeClass("k-pane k-scrollable")
    .removeAttr("style");
});

我还为此功能创建了一个小提琴 - https://jsfiddle.net/7gyfr1v6/3/。

所以上面的代码可行。在小提琴中，当我点击Create Splitter时，它会创建它们，当我点击Destroy Splitter时，它会删除分割器功能。然而，为实现这一点而操纵CSS听起来有些苛刻。

有没有更好的方法来实现这一目标？如果没有，您在我编写的代码中是否有任何问题，是否可以改进此代码？

KendoUI - 以编程方式创建/销毁拆分器

HTML

的JavaScript

0 个答案: