Question

我已经使用jQuery ui datepicker成功地将日历控件添加到我的文本框中，但是虽然包含标签在单击时功能正常，但前一个和下一个按钮不可见

如果在{\ Content \ theme \ base \ images中的网页包中找到这些图片而不是下面显示的位置http://jqueryui.com/datepicker/上显示的图标>

.ui-widget-content .ui-icon {
background-image: url(images/ui-icons_222222_256x240.png);
}
.ui-widget-header .ui-icon {
background-image: url(images/ui-icons_222222_256x240.png);
}

我是否需要以类似于如何在c＃代码中调用图像的方式调用css中的图像？如：

"@Url.Content("~/Content/theme/base/images/ui-icons_222222_256x240.png")"

Answer 1

确保jquery-ui.min.css指向图像的正确文件。当您尝试加载图标时，控制台应显示错误。

例如，如果这是CSS文件的位置：http://example.com/css/jquery-ui.min.css，则图标文件应位于http://example.com/css/images/ui-icons_222222_256x240.png中。 CSS文件中的链接是相对于CSS文件的，而不是加载它的HTML文件。

Answer 2

你快到了。

确保您更改网址并添加＆＃34;！important＆＃34;在最后一行。

这将允许您添加任何您想要的图像。

    .ui-widget-content .ui-icon {
    background-image: url("../../images/ui-icons_222222_256x240.png")      
    !important;}
    .ui-widget-header .ui-icon {
    background-image: url("../../images/ui-icons_222222_256x240.png")   
    !important;}

希望这适合你。

Answer 3

我从错误消息中注意到该网站正在查找：

http://site/Content/images/image.png

我不太确定为什么，就像穆斯曼的回答一样：

CSS文件中的链接是相对于CSS文件的，而不是加载它的HTML文件。

链接似乎是site.css（包含在Content中）而非Jquery-ui.mincss中的相对链接，因此显然无法找到png。

将JQuery-ui.min.css中的路径更改为

themes/base/images/image.png

它现在完美无缺。

Answer 4

这是因为您是任务ui-icons_444444_256x240.png的图片。您可以从link这里下载该图像。

现在创建一个名为-images的文件夹，并将该文件夹图像添加到该文件夹中。

示例

http://example.com/css/jquery-ui.min.css
http://example.com/css/images/ui-icons_444444_256x240.png

Answer 5

对于任何寻求最简单答案的人，

转到网站JQuery UI，并使用默认设置下载文件。
提取文件。
复制“ images”文件夹，并将其放在jQuery ui css所在的文件夹中的项目中，这样可以解决问题。

信用额为Gullele's Corner，由于文件夹结构更改（2019年5月），我只是简单地更新了程序。

Answer 6

我遇到了同样的问题。我尝试更改 jquery-ui 文件中的相对 url，但图像仍未显示。相反，我不得不将指令放在我的 site.css 文件中。我的文件由 BundleConfig.cs 文件加载。

我在我的 site.css 文件中放置了相对路径，图像开始工作。

.ui-icon,
.ui-widget-content .ui-icon {
    background-image: url("../../Scripts/lib/jquery-ui/images/ui-icons_444444_256x240.png");
}

jQuery datepicker prev和next按钮没有显示，如何指向css中的主题文件夹图像

6 个答案: