如何使用剑道ui html5更改html正文主题_Html_Web_Kendo Ui

如何使用剑道ui html5更改html正文主题

html web kendo-ui

如何使用剑道ui html5更改html正文主题,html,web,kendo-ui,Html,Web,Kendo Ui,我是新使用Kendoui，HTML 5的网页，我已经创建了一个小的演示应用程序在HTML 5，在这我需要改变动态的主题，这意味着当我选择颜色组合框或下拉它应该适用于整个页面。我在谷歌搜索，但我没有得到正确的解决方案，请指导我怎么做下面是代码示例 <!DOCTYPE html> <html> <head> <title></title> <link href="Content/kendo/2013.2.716/k

我是新使用Kendoui，HTML 5的网页，我已经创建了一个小的演示应用程序在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>

谢谢。

显示您的代码到目前为止所做的工作。我正在浏览此链接。但这是唯一的对象，但我需要改变整个形式。改变剑道主题？或者更改随机css规则颜色？感谢您的重播。。有样品吗。。？因为我不知道怎么做。。拜托。。。。在这里我找到了一个链接。。。。当运行此程序时，我会出错。对我有效，您会出现什么错误？什么浏览器？