javascript - Kendo UI分离器 : Change Splitbar color while splitter pane is resizing

Question

我最近开始使用 KendoUI Splitter。

我有白色背景，当我移动拆分 handle 来调整 Pane 大小时，会出现显示 Pane 调整大小位置的拆分 handle 。问题是，因为页面背景是白色的，我几乎看不到这个句柄，所以我想将其颜色更改为更明显的颜色。

HTML:

<div id="example" class="k-content">
        <div id="vertical">
            <div>
                <p>
                    Outer splitter : top pane (resizable and collapsible)
                </p>
            </div>
            <div id="middlePane">
                <div id="horizontal" style="height: 100%">
                    <div>
                        <p>
                            Inner splitter :: left pane
                        </p>
                    </div>
                    <div>
                        <p>
                            Inner splitter :: center pane
                        </p>
                    </div>
                    <div>
                        <p>
                            Inner splitter :: right pane
                        </p>
                    </div>
                </div>
            </div>
            <div>
                <p>
                    Outer splitter : bottom pane (non-resizable, non-collapsible)
                </p>
            </div>
        </div>

JS:

$("#vertical").kendoSplitter({
    orientation: "vertical",
    panes: [
        { collapsible: false, resizable: false, size: "100px" },
        { collapsible: false },
        { collapsible: false, resizable: false, size: "100px" }
    ]
});

$("#horizontal").kendoSplitter({
    panes: [
       { collapsible: true },
       { collapsible: false },
       { collapsible: true }
    ]
});

$(window).resize(function() {
   resizeSplitter()
});

resizeSplitter = function() {
   splitter = $("#vertical")
    .data("kendoSplitter")
    .size("#middlePane", $(window).height() - 200 + "px")
    .trigger("resize")
};

resizeSplitter();

这是Splitter在 JSFiddle 中。我想在移动时更改分割条的颜色。

Answer 1

调整拆分器大小时，会为“移动拆分栏”添加一个新元素。 该元素具有 .k-ghost-splitbar 类，因此您可以向该元素添加自定义背景颜色。

.k-ghost-splitbar {
    background-color: red;
}

我已经更新了您的fiddle .