Question

在我的spring / maven项目中，我在jquery-ui对话框中打开每个子页面。问题是，当显示窗口时，缺少关闭按钮的图标，如下所示：

来自jquery的文件通过这两个jsp文件包含在我的项目的每个页面中：

header.jsp中

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@ page session="false" language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<%@ taglib uri="http://www.springframework.org/security/tags" prefix="sec" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>

<html>
<head>
<title>${param.name}</title>

<link href="${pageContext.servletContext.contextPath}/resources/jquery/css/custom/jquery-ui-1.10.4.custom.min.css" rel="stylesheet">
<link href="${pageContext.servletContext.contextPath}/resources/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="${pageContext.servletContext.contextPath}/resources/bootstrap/css/bootstrap-theme.min.css" rel="stylesheet">

<link href="${pageContext.servletContext.contextPath}/resources/extra/css/starter-template.css" rel="stylesheet">
<link href="${pageContext.servletContext.contextPath}/resources/extra/css/signin.css" rel="stylesheet">
<link href="${pageContext.servletContext.contextPath}/resources/extra/css/table.css" rel="stylesheet">

</head>
<body>

footer.jsp中

<script src="${pageContext.servletContext.contextPath}/resources/jquery/js/jquery-2.1.1.min.js"></script>
<script src="${pageContext.servletContext.contextPath}/resources/jquery/js/jquery-ui-1.10.4.custom.min.js"></script>
<script src="${pageContext.servletContext.contextPath}/resources/bootstrap/js/bootstrap.min.js"></script>

<script src="${pageContext.servletContext.contextPath}/resources/extra/js/jquery.md5.min.js"></script>
<script src="${pageContext.servletContext.contextPath}/resources/extra/js/form_submit.js"></script>
<script src="${pageContext.servletContext.contextPath}/resources/extra/js/form_valida.js"></script>
<script src="${pageContext.servletContext.contextPath}/resources/extra/js/page_link.js"></script>
<script src="${pageContext.servletContext.contextPath}/resources/extra/js/page_load.js"></script>

</body>
</html>

我项目中的文件层次结构是：

当我打开一个页面时，浏览器的网络监视器（我使用的是firefox），显示一下：

我觉得奇怪的是文件的状态： ui-icons_000000_256x240.png 是304 Not Modified，但我认为应该是200 Ok。

这真的是个问题吗？如果是这样，怎么解决？

Answer 1

几周前我在一个对话窗口中遇到了类似的问题。 解决方案是从以下位置升级图标：

..www/css/images/icons-png/ 
..www/css/images/icons-svg/

并在我的服务器上复制.css，.js和图标，而不是从外部来源下载！然后验证您的路径：

jquery-ui 
jquery.inline-png.css
jquery.inline-svg.css

Answer 2

您问题的最可能答案是 jquery-ui css中的链接不正确。 jQuery UI的模板css使用图像的相对路径，你可能“搞砸了”。修复它们，图标就会出现。

Answer 3

您使用的是来自CDN，谷歌等的jQuery-ui.js文件还是其他服务器。

请检查你的jquery-ui.js和jQuery-ui.css是否来自其他网址或两者都在当地。

如果他们来自同一地点，请检查以下步骤，如果没有，那么请为两者制作相同的原点。

Firefox中的F12 - ＆gt;选择＆＃34; Net＆＃34;标签 - ＆gt;选择＆＃34;全部＆＃34;标签

并检查精灵图像的响应

如果无法加载图片，则会有响应链接只是将该链接与项目文件夹层次结构进行比较

它将帮助您找到正确的图像路径。

还要检查图像URL是本地目录还是本地目录图像来自其他一些服务器/ URL

Answer 4

我怀疑由于 jQuery ui css文件使用映像文件夹的相对路径，该图标图像 ui-icons_000000_256x240.png 不是来自css的相对路径文件。

所以我建议你将你的服务器路径注释掉jQuery ui js和css文件，而不是使用cdn位置，如下所示：

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

对于测试，如果这是路径问题，您可以尝试这个想法！

显示对话框时缺少jquery-ui图标

4 个答案: