CSS:没有为JQuery datepicker显示的图像

Question

我在这里使用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并将它们保存在本地,然后我下载了平滑模板,解压缩它,将图像放在我的服务器上的/ images中但箭头图像不显示,这就是它的外观: http:// postimg .ORG /图像/ bcnvipy61 /

我是否将图像复制到了错误的地方？(我对CSS不好)

编辑(阅读以下评论后:

<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/

Answer 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");
}

对不起,那里可能有太多无关的信息,但我还在卷...