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

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

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

我已更新您的fiddle。

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

1 个答案: