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

I have used the jQuery ui datepicker to successfully add a calendar control to my textbox, but the previous and next buttons are not visible although the containing tag works functionally when clicking

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

The how can I modify this to show the icons shown on the http://jqueryui.com/datepicker/ when these images are found within my web package at ..\Content\theme\base\images and not the locations shown below

我如何修改此图标以显示http://jqueryui.com/datepicker/上显示的图标,当这些图像在我的网页包中找到.. \ Content \ theme \ base \ images而不是下面显示的位置

.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);
}

Do I need to call the image within css in a similar fashion to how images are called from within my c# code? As in:

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

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

3 个解决方案

#1

Make sure your jquery-ui.min.css is pointing to the correct file for the images. The console should show an error when you are attempting to load the icons.

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

For example, If this is the location of your CSS file: http://example.com/css/jquery-ui.min.css, then the icon file should be in http://example.com/css/images/ui-icons_222222_256x240.png. The link in the CSS file is relative to the CSS file, not the HTML file loading it.

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

#2

You are almost there.

你快到了。

Just ensure you change your url and add the "!important" at the end of the line.

只需确保更改您的网址并在该行末尾添加“!important”即可。

This will allow you to add any image you wish.

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

    .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;}

Hope this works for you.

希望这对你有用。

#3

I noticed from the error message that the site was looking in:

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

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

I'm not quite sure why, as from Mooseman's answer:

我不太清楚为什么,就像穆斯曼的回答一样:

The link in the CSS file is relative to the CSS file, not the HTML file loading it.

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

It seems that the link was relative from site.css (which is contained in Content) rather than Jquery-ui.mincss, and so it obviously could not find the png.

似乎链接是相对于site.css(包含在内容中)而不是Jquery-ui.mincss,所以它显然找不到png。

After changing the paths in JQuery-ui.min.css to

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

themes/base/images/image.png

It now works perfectly.

它现在完美无缺。

#1