jQuery datepicker 上一个和下一个按钮未显示,如何指向 css 中的主题文件夹图像

Posted

技术标签:

【中文标题】jQuery datepicker 上一个和下一个按钮未显示,如何指向 css 中的主题文件夹图像【英文标题】:jQuery datepicker prev and next buttons not showing, how to point at theme folder images in css 【发布时间】:2013-08-27 15:29:53 【问题描述】:

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

当这些图像位于我的 web 包中的 ..\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);

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

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

【问题讨论】:

请在此处发布您的代码。 jqueryui.com 上的工作演示链接无法让我们知道您的代码为何不工作。 编辑了更多细节 【参考方案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 文件。

【讨论】:

我已经更详细地编辑了原始帖子。如何使用 ~Content/theme/base/images 指向正确的图像 谢谢!我也犯了同样的错误! 在您的 css 文件夹中创建一个名为 images 的文件夹,并包含此处找到的图标图像:corebiz.com.br/clientes/new_boti/assets/images/jquery-ui-dist/…【参考方案2】:

你快到了。

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

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

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

希望这对你有用。

【讨论】:

【参考方案3】:

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

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

我不太清楚为什么,正如 Mooseman 的回答:

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

似乎该链接是相对于site.css(包含在Content)而不是Jquery-ui.mincss,因此它显然找不到png。

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

themes/base/images/image.png

现在可以完美运行了。

【讨论】:

【参考方案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

【讨论】:

【参考方案5】:

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

    访问网站JQuery UI 并使用默认设置下载文件。 解压文件。 复制“images”文件夹并将其放入项目中 jQuery ui css 所在的同一文件夹中,这样就可以解决问题。

感谢Gullele's Corner,我只是简单地更新了程序,因为文件夹结构发生了变化(2019 年 5 月)。

【讨论】:

【参考方案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 上一个和下一个按钮未显示,如何指向 css 中的主题文件夹图像的主要内容,如果未能解决你的问题,请参考以下文章

将上一个和下一个按钮添加到 li item php 或 jquery

如何使用引导程序,jquery为选项卡制作上一个和下一个按钮?

jQuery 滑块 - 上一期和下一期

上一个和下一个按钮不相邻

仅显示 10 行和 1 页的 JQuery 数据表和按钮被禁用上一个和下一个

Gijgo Datepicker 上个月和下个月图标更改