css - 如何在默认的 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 控件上应用默认样式，并希望加载不同的主题，比如可以在 this 中看到的“Silver”主题演示

我怎样才能实现它？

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