JQuery 用户界面主题 : No Widgets Display Correctly

Question

免责声明 - A * 表示我无法发布我想要的内容的地方，因为这是我在堆栈溢出上的第一篇帖子，所以我改为解释我想要显示的内容。 :)

我似乎无法从 Jquery UI 获取滚动主题以正常工作。首先，当我打开下载中给出的示例文件时，它看起来像这样。

一般情况下，一切看起来都像那样被揉成一团，好像没有任何填充、边距、边框等。

下图是 JQueryUI 基础主题，base/all.css 正在我的网站上实现。

看起来不错，但这不是我想要的 JqueryUI 的样子。下面，我尝试实现主题 theme/jquery-ui.css 而不是 base，我得到了与示例中相同的结果。

*我曾想包含一个指向我网站上正在实现的主题的链接，但我没有足够的声誉来包含超过 2 个链接。无论如何，它看起来与示例 html 中的外观完全相同。

奇怪的是，当我在网站上“滚动”主题时，一切看起来都像我期望的那样。为了引用我的主题，这里是它的链接。

*好吧，另一个谎言没有链接，但即使从滚动画廊下载一个 Jquery UI 主题，我也会得到同样的结果。

我想知道我是否只是误解了如何使用主题？我的理解是您可以将 all.css 替换为客户 jquery-ui.css。在这两种情况下，我都在下载时选择了所有可能的组件。

Answer 1

好的，所以我能够解决我自己的问题，这实际上要归功于堆栈溢出的另一个答案。本质上这是 ASP.NET MVC 中的捆绑问题，我不完全理解您应该如何使用主题。首先，这是我的 bundle 最初的样子。

            bundles.Add(new StyleBundle("~/Content/jqueryui").Include(
            "~/External/Content/themes/base/all.css",
            "~/External/Content/themes/green/jquery-ui.css",
            "~/External/Content/themes/green/jquery-ui.structure.css",
            "~/External/Content/themes/green/jquery-ui.theme.css"
            ));

多亏了这个答案，我决定检查它在页面上实际呈现的顺序(事后看来我应该首先这样做)。 How do I configure MVC's style bundling order?这帮助我发现确实是主题首先呈现，然后是 base.css，即使这不是它们在包中的顺序。

因此，我将 base.css 拆分为该包之前的显式调用(也从包中删除了 base.css)，并且一切正常!这就是它在我的布局页面的 head 标记中的样子。

@Styles.Render("~/External/Content/themes/base/all.css")
@Styles.Render("~/Content/jqueryui")

因此，在将 JQuery UI 主题与 ASP.NET MVC 结合使用时需要检查两件事，首先是捆绑顺序(查看它在页面上呈现的顺序)，以及您是否不知道使用 base.css(或选择您正在使用的元素 css)以及主题，然后执行此操作!