我实现了一个 jsf 2.0 组件，它应该显示 jQuery 的日期选择器。它工作得很好，但找不到 css 中引用的图像。找到了 *.js 和 *.css，但没有找到图像链接。
这是我的组件的代码
<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:c="http://java.sun.com/jsp/jstl/core"
xmlns:cc="http://java.sun.com/jsf/composite">
<head>
<title>jQuery - Datepicker</title>
</head>
<body>
<cc:interface>
<cc:editableValueHolder name="input"/>
</cc:interface>
<cc:implementation>
<h:outputStylesheet library="stats" name="jquery/css/jquery-ui-1.8.16.custom.css" />
<h:outputScript library="stats" name="jquery/js/jquery-1.7.1.min.js" target="head"/>
<h:outputScript library="stats" name="jquery/js/jquery-ui-1.8.17.custom.min.js" target="head"/>
<script type="text/javascript">
var jq = jQuery.noConflict();
jq(document).ready(function() {
jq("[id$=#{cc.clientId}]").datepicker({
showOn : 'focus',
duration : 10,
changeMonth : true,
changeYear : true,
dayNamesMin : ['So', 'Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa'],
currentText : 'Heute',
dateFormat : 'dd-mm-yy',
yearRange : '-3:+3',
showButtonPanel : true,
closeText : 'Schliessen',
});
});
</script>
<h:panelGroup>
<h:inputText id="#{cc.clientId}" value="#{cc.attrs.value}" style="width:80px;"/>
</h:panelGroup>
</cc:implementation>
</body>
</html>
在 css 中，图像是这样的引用(jQuery css):
.ui-icon { width: 16px; height: 16px; background-image: url(images/ui-icons_222222_256x240.png); }
.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('/stats-webapp/images/ui-icons_454545_256x240.png); }
.ui-state-highlight .ui-icon {background-image: url('/stats-webapp/images/ui-icons_2e83ff_256x240.png); }
.ui-state-error .ui-icon, .ui-state-error-text .ui-icon {background-image: url(images/ui-icons_f6cf3b_256x240.png); }
我的文件路径如下
datepicker.xhtml -> src/main/webapp/resources/stats/datepicker.xhtml
javascript 文件 -> src/main/webapp/resources/stats/jquery/js/jquery*.js
css 文件 -> src/main/webapp/resources/stats/jquery/css/jquery*.css
图像 -> src/main/webapp/resources/stats/jquery/css/images/。
即使我使用绝对路径在 css 路径中引用这些图像，我的浏览器也找不到它(当我启动 chrome 开发者工具时，我也找不到这些文件)
感谢帮助
最佳答案
您将 CSS 文件作为 JSF 资源提供。将从 /javax.faces.resource 开始提供服务URL 中的文件夹，它还将获得 FacesServlet 映射，如 /faces/*或 *.xhtml在网址中。它会使路径相关的 CSS 背景图像 URL 无效。您需要相应地更改 CSS backgorund 图像 URL 以作为 JSF 资源提供服务。规范的方法是使用 EL 中的资源映射器 #{resource} :
.some {
background-image: url(#{resource['stats:jquery/css/images/foo.png']});
}
另一种方法是使用 OmniFaces UnmappedResourceHandler 这样您就不需要修改 CSS 文件。
另一种选择是获取一个 JSF UI 组件库，它的分类中已经有一个基于 jQuery 的日期选择器组件，例如 PrimeFaces <p:calendar> .
关于java - 在 JSF 组件的 CSS 中链接图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/8947011/