jquery - 将 Jquery Mobile ThemeRoller 的主题应用于 MVC4 移动应用程序

Question

我刚刚使用 visual studio 2013 创建了一个 MVC4 移动应用程序。但是我不确定如何将 jquery mobile themeroller 主题应用于它。

我确实用我的自定义主题替换了现有的主题 css。它似乎根本不起作用。

找到下面的代码:

        bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/site.css"));

        bundles.Add(new StyleBundle("~/Content/mobilecss").Include("~/Content/jquery.mobile*"));

        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" /*custom theme file*/));

<head->
    <meta charset="utf-8" />
    <title>@ViewBag.Title</title>
    <meta name="viewport" content="width=device-width" />
    <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
    @Styles.Render("~/Content/mobileCss", "~/Content/css")
    @Scripts.Render("~/bundles/modernizr")  
</head->

我在这里错过了什么？

更新:

我无法以某种方式覆盖我使用 themerollers 创建的自定义主题。我没有尝试直接添加对文件的引用，如下所示。

<link rel="stylesheet" href="~/Content/jquery/jquery.mobile.theme-1.4.3.min.css" /> <!-- custom theme -->
<link rel="stylesheet" href="~/Content/jquery/jquery.mobile.icons.min.css" /> <!-- custom theme icon file -->
<link rel="stylesheet" href="~/Content/jquery.mobile-1.2.0.min.css" />
<link rel="stylesheet" href="~/Content/jquery.mobile.structure-1.2.0.min.css" />

在此之后，我添加了 JS 文件。当我添加数据主题属性以使用值“a”或“b”或“c”进行控制时，我得到默认颜色，而不是我在 themeroller 中在线的颜色。

Answer 1

您实际上还没有渲染您的主题包。您仍在呈现默认的 site.css。更改行:

@Styles.Render("~/Content/mobileCss", "~/Content/css")

收件人:

@Styles.Render("~/Content/mobileCss", "~/Content/themes/base/css")