我正在为我的 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”主题演示
我怎样才能实现它?
最佳答案
您可以在下面的链接中找到其他样式的 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();
}
关于css - 如何在默认的 Kendo 样式上加载不同的 Kendo UI Slider,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41460512/