Question

我在ASP.net MVC应用程序中使用下面给出的CSS作为我的Kendo控件：

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

但是，我不希望在Kendo Slider控件上应用默认样式，并希望加载不同的主题，例如＆＃39; Silver＆＃39;主题可以在this demo

中看到

我怎样才能实现它？

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

如何在默认的Kendo样式上加载不同的Kendo UI Slider

1 个答案: