1

我是使用 Kendoui, HTML 5 for web 的新手，我在 html 5 中创建了一个小型演示应用程序，在此我需要动态更改主题，这意味着当我从组合框或下拉菜单中选择颜色时应该适用于整个页面。我在谷歌搜索但我没有得到正确的解决方案，请指导我如何做。

这是休闲示例的代码。

   <!DOCTYPE html>
  <html>
  <head>
<title></title>
  <link href="Content/kendo/2013.2.716/kendo.common.min.css" rel="stylesheet" type="text/css" />
   <link href="Content/kendo/2013.2.716/kendo.default.min.css" rel="stylesheet" typ  e="text/css" />
   <script src="Scripts/kendo/2013.2.716/jquery.min.js" type="text/javascript"></script>
   <script src="Scripts/kendo/2013.2.716/kendo.all.min.js" type="text/javascript"></script>
<style>
    html, body
    {
        margin: 0;
        padding: 0;
    }

    body
    {
        font: 12px/1.5 Tahoma,sans-serif;
        padding: 2em;
    }

    span.themeChooser
    {
        float: right;
    }

    #tree
    {
        height: 9em;
    }
</style>
  </head>
  <body class="k-content">
      <div id="example" class="k-content">
        <input class="themeChooser" value="default" />
         <div id="tree">
        </div>

      <p>
             Note: in order for the whole page to be styled, the &lt;body&gt; element has a <code>
            k-content</code> class.</p>
</div>
<script>
    $(function () {
        $("#themeChooser").kendoDropDownList({
            dataSource: [
    { text: "Black", value: "black" },
    { text: "Blue Opal", value: "blueopal" },
    { text: "Default", value: "default" },
    { text: "Metro", value: "metro" },
    { text: "Silver", value: "silver" }
],
            change: function (e) {
                var theme = (this.value() || "default").toLowerCase();

                changeTheme(theme);
            }
        });

        // sample widget on the page
        $("#tree").kendoTreeView({
            dataSource: [
    { text: "foo", expanded: true, items: [
        { text: "bar", selected: true }
      ]
    },
    { text: "baz" }
]
        });

        // loads new stylesheet
        function changeTheme(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),
    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;

                if ($.browser.msie) {
                    newLink = doc.createStyleSheet(url);
                } else {
                    newLink = skinLink.eq(0).clone().attr("href", url);
                }

                newLink.insertBefore(skinLink[0]);
                skinLink.remove();

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

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

</script>

谢谢你 。

4

0 回答 0