JQuery UI主题：没有小部件显示正确 [英] JQuery UI Theme : No Widgets Display Correctly

问题描述

免责声明 - A *表示某处，我不能张贴我想要的，因为这是我第一次有关堆栈溢出的帖子，所以我解释我想要显示的内容。 ：）

Disclaimer - A * denotes somewhere where I wasn't able to post what I wanted, since this is my first ever post on stack overflow, so I instead explain what I wanted to display. :)

我似乎有一个问题从Jquery UI滚动主题正常工作。首先，当我打开下载中提供的示例文件时，它看起来像这样。

I seem to be having a problem with getting a rolled theme from Jquery UI to work correctly. First when I open the example file given in the download it looks like this.

一般来说，所有的东西都像这样，像没有任何填充，边距，边框等。

Everything in general looks scrunched up like that, like there isn't any padding, margins, borders, etc.

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

The next image is JQueryUI base theme, base/all.css being implemented on my site.

看起来正确，但它不是我想要的JqueryUI看起来像。下面是我试图实现主题主题/ jquery-ui.css而不是基础，我得到与示例相同的结果。

Looks correct, but it's not what I want JqueryUI to look like. Below, is me trying to implement the theme theme/jquery-ui.css instead of the base and I get the same result as in the example.

*我想要包括指向在我的网站上实施的主题的链接，但是我没有足够的声誉来包括超过2个链接。无论如何，它看起来与在示例html中看起来完全一样。

*I had wanted to include a link to the theme being implemented on my site, but I don't have enough reputation to include more than 2 links. Anyways, it looks the exact same as how it looks in the example html.

奇怪的是当我在网站上滚动主题时，会期望它。对于我的主题，这里是它的链接。

The weird thing is when I am "rolling" the theme on the website everything looks how I would expect it to. For reference to my theme, here is the link to it.

*确定另一个谎言没有链接，但甚至从滚动画廊下载一个Jquery UI主题我得到同样的崩溃结果。

*Ok another lie no link, but even downloading one of the Jquery UI themes from the roller gallery I get the same scrunched up results.

我想知道我是否只是误解如何使用主题？我的理解是你可以替换all.css与客户jquery-ui.css。在我下载时我有可能选择的每个组件。

I'm wondering if I'm just misunderstanding how to use the theme? My understanding is you can just replace the all.css with the customer jquery-ui.css. In both I have every component possible selected when downloading.

推荐答案

好的，所以我能够解决我自己的问题，它实际上是由于堆栈溢出的另一个答案。本质上，这是一个捆绑问题在ASP.NET MVC，我不完全了解你应该如何使用主题。第一件事首先在这里是我的束最初看起来像。

Ok so I was able to solve my own problem, and it was actually thanks to another answer on stack overflow. Essentially it was a bundling issue in ASP.NET MVC, and me not completely understanding how you are supposed to use the theme. First things first here's what my bundle originally looked like.

            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"
            ));

感谢这个答案，我决定检查它实际呈现在页面上的顺序在事后看来，我应该做的第一位）。 如何配置MVC的样式绑定顺序？这有助于我发现确实主题是先呈现，然后是base.css，即使这不是他们在捆绑中的顺序。

Thanks to this answer, I decided to check the order in which it was actually rendering on the page (which in hindsight I should have done it the first place). How do I configure MVC's style bundling order? This helped me find out that indeed the themes were rendering first and then the base.css even though that's not the order they were in the bundle.

所以我把base.css拆分成了一个显式的调用之前（也从bundle中删除了base.css），一切正常工作！这是在我的布局页的head标签。

So I split out the base.css into an explicit call before that bundle (also removed the base.css from the bundle), and everything worked perfectly! This is how it is in the head tag of my Layout page.

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

因此，当使用ASP.NET MVC使用JQuery UI主题时，需要检查两个事情，首先是绑定顺序（看它在页面上呈现的顺序），如果你不知道使用base.css或者你使用的选择元素css）和主题，然后这样做！

So two things to check when using a JQuery UI theme with ASP.NET MVC, first the bundling order (see what order it's rendering on the page) and if you didn't know to use the base.css (or the select element css you are using) along with the theme then do that!

这篇关于JQuery UI主题：没有小部件显示正确的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！