Kendo UI 拆分器：在拆分器窗格调整大小时更改拆分栏颜色

Question

我最近开始使用 KendoUI Splitter。

我有一个白色背景，当我移动拆分手柄以调整窗格大小时，会出现显示窗格调整大小位置的拆分手柄。问题是，因为页面背景是白色的，我几乎看不到这个句柄，所以我想把它的颜色改成更显眼的颜色。

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();

这是 JSFiddle 中的 Splitter。我想在它移动的时候改变它的颜色。

Answer 1

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

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

我已经更新了你的fiddle。