CSS:JQuery datepicker 不显示图像

Posted

技术标签:

【中文标题】CSS:JQuery datepicker 不显示图像【英文标题】:CSS: Images not showing for JQuery datepicker 【发布时间】:2015-06-09 03:29:21 【问题描述】:

我正在使用datepicker:https://jqueryui.com/datepicker/

我在那里点击了视图源,然后复制了代码。

以下三行:

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

我复制了脚本/ css并在本地保存了它们, 我下载了平滑度模板,解压缩它,将图像放在我的服务器上/图像中,但箭头图像不显示,这就是它的样子: http://postimg.org/image/bcnvipy61/

我在错误的地方复制了图像吗? (我不擅长 CSS)

编辑(阅读以下 cmets 后:

<link rel="stylesheet" href="css/jquery-ui.css">
    <script src="js/jquery-1.10.2.js"></script>
    <script src="js/jquery-ui.js"></script>

所以路径是:

css/
js/
images/

【问题讨论】:

您是否包含了js库?? span> 如果你从 jqueryui 下载了主题,你应该把 jquery-ui.css 放在你的 css 文件夹中(如果你这样使用它),然后在你的 css 文件中,你可以用 @ 更改目录987654328@ 如果您有 css folderimage folder 我在上面进行了编辑,向您展示了我如何调用样式表和 javascript 那么在您的jquery-ui.css您应该更改images/ path您可以在该文件中找到并将其更改为../images/。它应该这样工作。当然你应该在images文件夹中拥有所有jqueryui图像 【参考方案1】:

jquery-ui.css 文件的这一部分控制所有图标:

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

.ui-state-default .ui-icon 
    background-image: url("images/ui-icons_888888_256x240.png");

.ui-state-hover .ui-icon,
.ui-state-focus .ui-icon 
    background-image: url("images/ui-icons_454545_256x240.png");

.ui-state-active .ui-icon 
    background-image: url("images/ui-icons_454545_256x240.png");

.ui-state-highlight .ui-icon 
    background-image: url("images/ui-icons_2e83ff_256x240.png");

.ui-state-error .ui-icon,
.ui-state-error-text .ui-icon 
    background-image: url("images/ui-icons_cd0a0a_256x240.png");

它使用ui-icon图像作为背景并改变背景位置。

例如:

.ui-icon-arrow-1-e  background-position: -32px -32px; 

找到正确的图标。

关键是第一部分中的路径是相对的,所以如果你 css 生活在图片上方的目录中,它会很好用。

例如做这样的事情:

<link rel="stylesheet" href="jquery-ui.css">
<script src="jquery-1.10.2.js"></script>
<script src="jquery-ui.js"></script>

但是,如果您希望它位于同级目录或其他地方的 css 目录中,您要么必须提供指向站点中图像的绝对链接,要么向上跳过足够多的目录以指示在哪里可以找到该图像目录。因此,只需适当地更改 jquery-ui.css 文件以匹配您想要执行的操作。

例如改为:

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

或:

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

抱歉,那里可能有太多无关信息,但我很忙...

【讨论】:

嘿!感谢您提供详细信息,在大多数情况下总比少好 :) 但这让我更加困惑,尤其是这部分 The point is the the path in the first section is relative so if you css lives in the directory above images it works great. 这是否意味着您希望我将 /css 移动到 /images/css ? 实际上不,把东西留在原处并编辑css文件以绝对指向正确的路径:/images/ui-icons_222222_256x240.png - 现在css在哪里并不重要生活它总是会在站点的根目录中查找,然后下降到图像目录以查找图像;或相对的 ../images/ui-icons_222222_256x240.png - 如果 css 位于 /css 目录中,它会上升一个目录(..),然后下降到 images 目录。或者去掉 css 目录,把 css 文件放在根目录下(这看起来会在以后给你带来组织上的麻烦) 我在默认图像文件夹之外更改了图像的位置,并且无法链接到它们的新位置。我试过你的解决方案。将“../”添加到任何路径都解决了我的问题。希望这对其他人也有帮助。

以上是关于CSS:JQuery datepicker 不显示图像的主要内容,如果未能解决你的问题,请参考以下文章

求助,jquery datepick日历插件,怎么显示时分秒?可以显示吗

jQuery datepicker - 在初始化后更改 .ui-datepicker-calendar 的显示

jQuery Datepicker,选择多个日期并在选择时通过css标记它们,永久

jQuery UI Datepicker:今天也被选中时不要突出显示

Jquery UI Datepicker不显示

jQuery datepicker 在点击时不显示日历