如何通过默认Kendo样式加载不同的Kendo UI Slider

Question

我在ASP.net MVC应用程序中为Kendo控件使用以下CSS：

@Styles.Render("~/Content/Telerik/styles/kendo.common.css")
@Styles.Render("~/Content/Telerik/styles/kendo.default.css")

但是我不想在Kendo Slider控件上应用默认样式，而是希望加载另一个主题，例如“银色”主题，可以在此演示中看到。

我该如何实现？

Answer 1

您可以在下面的链接中找到其他样式的CSS。

https://github.com/telerik/kendo-ui-core/tree/master/styles/web

下载并导入项目中的CSS。

之后，使用以下功能可以实现更改主题。

$(function() {
 changekendoTheme("Silver");
});

 function changekendoTheme(skinName, animate) {
        var doc = document,
            kendoLinks = $("link[href*='kendo.']", doc.getElementsByTagName("head")[0]),
            commonLink = kendoLinks.filter("[href*='kendo.common']"),
            skinLink = kendoLinks.filter(":not([href*='kendo.common'])"),
            href = location.href,
            skinRegex = /kendo\.\w+(\.min)?\.css/i,
            extension = skinLink.attr("rel") === "stylesheet" ? ".css" : ".less",
            url = commonLink.attr("href").replace(skinRegex, "kendo." + skinName + "$1" + extension),

            url2 = commonLink.attr("href").replace(skinRegex, "kendo.dataviz." + skinName + "$1" + extension);

        exampleElement = $("#example");

        function preloadStylesheet(file, callback) {
            var element = $("<link rel='stylesheet' media='print' href='" + file + "'").appendTo("head");
            setTimeout(function () {
                callback();
                element.remove();
            }, 100);
        }

        function replaceTheme() {
            var oldSkinName = $(doc).data("kendoSkin"),newLink;
            var newLink1 = doc.createElement('link');
            newLink1.setAttribute("rel", "stylesheet");
            newLink1.setAttribute("href", url);

            var newLink2 = doc.createElement('link');
            newLink2.setAttribute("rel", "stylesheet");
            newLink2.setAttribute("href", url2);

            var head = document.head;

            head.insertBefore(newLink2, skinLink[0]);
            head.insertBefore(newLink1, skinLink[0]);

            skinLink.remove();

            $(doc.documentElement).removeClass("k-" + oldSkinName).addClass("k-" + skinName);
        }

        if (animate) {
            preloadStylesheet(url, replaceTheme);
        } else {
            replaceTheme();
        }