Question

我在我的应用程序中添加了dropdownlist，其中填充了所有可用主题的列表。我在_Layout.cshtml页面中添加了这个下拉列表。

<div class="col-sm-2">
    <div style="float: right;" class="themeSelector" id="themeSelector">
        <div style="float: left; margin-top: 10px;">
            Theme:
        </div>
        @Html.DropDownList("themeComboBox", IMCC_PAS.Controllers.AvailableThemes.Themes, new { autopostback = "true", @style = "height:20px; width: 80px;margin-left:5px; margin-top: 8px;" })
    </div>
  </div>
<div class="col-sm-3">
    @Html.Partial("_LoginPartial")
</div>

在各个视图上，我使用jquery

阅读当前主题

var theme = $("#themeComboBox").val();

并根据需要在我的控件上应用主题。

但是，如何在更改主题时刷新控件？

这就是主题如何应用于页面上的控件。

$("fabGrid").jqxGrid({ theme: 'nameOfTheme' });
$("chkAllBtn").jqxButton({ theme: 'nameOfTheme' });

当主题发生变化时，它应该反映在所有页面上（每个页面都有网格，按钮等）。

P.S：主题应用于不同的控件（网格，下拉列表，按钮等），可能会也可能不会出现在submit form中。

Answer 1

在_Layout中，加载默认主题，如下所示：

<link rel="stylesheet" href="/content/themes/light.css" id="theme-stylesheet" />

然后在你的js：

$("#themeComboBox").change(function(){
    $("#theme-stylesheet").attr("href", "/content/themes/" + $(this).val() + ".css");
});

现在，根据下拉值，加载了不同的css文件。

更改问题后

更新：

如果你想改变jqGrid的主题，它将是类似的：

$("#themeComboBox").change(function(){
    $("#theme-stylesheet").attr("href", "/content/jqwidgets/styles/" + $(this).val() + ".css");
});

这是fiddle。

相对路径将根据您的设置而变化。另外，请确保选项中的值与css文件名匹配。

刷新视图以应用新选择的主题

1 个答案: