1

Web 用の HTML 5 である Kendoui を初めて使用します。HTML 5 で小さなデモ アプリを 1 つ作成しました。これは、動的にテーマを変更する必要があります。つまり、コンボ ボックスまたはドロップダウンから色を選択するときを意味します。ページ全体に適用する必要があります。Google で検索しましたが、正しい解決策が得られませんでした。どうすればよいか教えてください。

これがサンプルのコードです。

   <!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