1

我在这里使用基本主题有一个开箱即用的标准 MVC4 应用程序。

我还有一个 Themeroller 拉链。

如何将自定义 jqueryui 主题应用到我的应用程序以代替股票主题？非常感谢逐步说明并解释为什么要完成每个步骤，并为我解除 MVC4 的主题迷雾大有帮助。

（我知道问题 11892182，我完全按照它没有成功。现在已经一岁了，我希望 jQueryUI 和 MVC4 之间的情况会变得更好）

戴夫

4

3 回答 3

1

Jquery UI 默认嵌入在新的 asp.net mvc4 互联网模板项目中。为了使用默认主题。

  1. 打开您的 _Layout.cshtml 文件。（视图 => 共享 => Layout.cshtml）
  2. 在您的标题部分中，将此行替换 @Styles.Render("~/Content/css") 为 @Styles.Render("~/Content/themes/base/css")
  3. @Scripts.Render("~/bundles/jqueryui")在下面的 Layout.cshtml 文件的末尾添加它@Scripts.Render("~/bundles/jquery")
  4. 现在开始使用您的 jqueryUI 小部件和主题，它们将正确显示。

为了使用您自定义下载的主题，您需要修改 BundleConfig.cs 文件（App_Start => BundleConfig.cs）

如果您拥有带有单独文件的 jqueryUI 的完整源代码。只需将基本文件夹（内容 => 主题 => 基本）中的当前基本主题文件替换为您的自定义主题文件。

如果您有一个用于 javascript 和 css 的文件。修改 BundleConfig.cs 代码。代替

bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(
                    "~/Content/themes/base/jquery.ui.core.css",
                    "~/Content/themes/base/jquery.ui.resizable.css",
                    "~/Content/themes/base/jquery.ui.selectable.css",
                    "~/Content/themes/base/jquery.ui.accordion.css",
                    "~/Content/themes/base/jquery.ui.autocomplete.css",
                    "~/Content/themes/base/jquery.ui.button.css",
                    "~/Content/themes/base/jquery.ui.dialog.css",
                    "~/Content/themes/base/jquery.ui.slider.css",
                    "~/Content/themes/base/jquery.ui.tabs.css",
                    "~/Content/themes/base/jquery.ui.datepicker.css",
                    "~/Content/themes/base/jquery.ui.progressbar.css",
                    "~/Content/themes/base/jquery.ui.theme.css"));

以便包含部分保存您的自定义 css 文件的路径，例如这样的

bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(
                    "~/Content/themes/base/jquery-ui-1.10.3.custom.css");
于 2013-08-04T13:21:12.643 回答
0

sherwaniusman，我尝试了你的建议，但我只设法完全破坏了我自己的 CSS。我一定是错过了什么。我以为我明白发生了什么，但显然没有。

让我们尝试一些不同的东西。这就是我所做的。你能告诉我哪里出错了吗？

  1. 从http://jqueryui.com/themeroller/下载了“le-frog”主题

  2. 打开 zip 并将 js 文件夹中的三个文件复制到我的 MVC4 应用程序的 Scripts 文件夹中。这三个文件是：jquery-1.9.1.js、jquery-ui-1.10.3.custom.js 和 jquery-ui-1.10.3.custom.min.js

  3. 将 'le-frog' 文件夹从 zip 复制到我的应用程序的 Content/themes 文件夹以创建 Content/themes/le-frog 文件夹。le-frog 文件夹包含两个文件和一个 images 子文件夹。这两个文件是 jquery-ui-1.10.3.custom.css 和 jquery-ui-1.10.3.custom.min.css

  4. 编辑了 _Layout.cshtml 使其成为唯一的 Styles.Render

    @Styles.Render("~Content/themes/le-frog/css")

这在最后

@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/jqueryui")

  1. 编辑 BundleConfig.cs 以将每个符号指向正确的目的地：

    bundles.Add(new ScriptBundle("~/bundles/jquery").Include("~/Scripts/jquery-1.9.1.js"));

    bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(
    "~/Scripts/jquery-ui-1.10.3.custom.js"));

    bundles.Add(new StyleBundle("~/Content/themes/le-frog/css").Include("~/Content/themes/le-frog/jquery-ui-1.10.3.custom.css"));

在我看来，这确实可行，但我得到的页面根本没有 CSS 样式。

请......我在这里错过了什么？

戴夫

于 2013-08-05T14:45:45.420 回答
0

也使用了le-frog，目前还不清楚哪个文件放在哪里。“内容”下没有“css”文件夹，看起来文件夹结构已在版本之间更改。

令人沮丧 - 添加主题不应该比在 WinForm 下实现拖放更困难（也不会花费更多时间）。

于 2013-11-21T13:44:43.247 回答