3

首先，我可以看到我的 mvc3 项目中已经有 jquery ui，但没有主题 css 文件。

我需要选择一个日期，并且像往常一样需要覆盖 EditorFor DateTime。我今天开始使用脚本下项目提供的默认 jquery ui js 文件。日期选择器显示得很好，只有基于 Site.css 的完整的混乱 UI。

所以现在我下载了一个 jquery 构建（带有启动主题）并按照这个页面了解如何将它放在一起。

我正在使用 T4MVC，所以我的页面如下所示：
Layout.cshtml：

<script src="@Links.Scripts.jquery_1_4_4_js" type="text/javascript"></script>
<link href="@Links.Content.Site_css" rel="stylesheet" type="text/css" />
<script src="@Links.Content.start.jquery_ui_1_8_7_custom_css" type="text/javascript"></script>

创建.cshtml

 <script src="@Links.Scripts.jquery_validate_min_js" type="text/javascript"></script>
    <script src="@Links.Scripts.jquery_validate_unobtrusive_min_js" type="text/javascript"></script>
    <script src="@Links.Scripts.jquery_ui_1_8_7_custom_min_js" type="text/javascript"></script>

这是结果：
替代文字

任何想法，我尝试了几种将脚本和 css 文件标签放在不同位置的组合，但似乎没有任何效果。

更新：所以我是个笨蛋，在布局中有一个<script>而不是一个<link>标签！但是仍然存在一个问题，日期选择器显示来自Site.css的 css 。
替代文字

更新 2：有解决方案

所以我检查了chrome，在资源下我看不到jquery css文件。我解雇了提琴手，但没有看到对 css 文件的任何请求。

我看到了！

<link href="@Links.Content.start.jquery_ui_1_8_7_custom_css" **rel="Stylesheet"** type="text/css" />

是的！没错，我没有添加rel！

4

2 回答 2

3

在您的 Layout.cshtml 中，您正在使用脚本标记来包含 css 文件。改变：

<script src="@Links.Content.start.jquery_ui_1_8_7_custom_css" type="text/javascript"><script>至

<link href="@Links.Content.start.jquery_ui_1_8_7_custom_css" rel="stylesheet"></link>
于 2010-12-29T15:58:52.530 回答
1

您需要在日期选择器周围放置一个包装容器。执行此操作需要两个步骤：

  1. 下载 jquery ui 文件时，单击“高级主题设置”，您将看到“CSS 范围”字段。这允许您将日期选择器的 css 本地化到特定的类/范围。对于此示例，我们将其称为“jqueryui_element”。

  2. 一旦你连接了新的 css 文件，你将不得不用你定义的 css 类/范围来包装它。我发现执行此操作的最简单方法是以下 javascript 行：

    $('#ui-datepicker-div').wrap('<div class="jqueryui_element"></div>');

#ui-datepicker-div是应用于 datepicker 元素的默认 id。如果由于某种原因你改变了它，它也必须在这里更新。

希望有帮助！

于 2010-12-29T16:21:31.293 回答