Luk*_*Luk 1 css java jquery jsf-2
我实现了一个jsf 2.0组件,它应该显示jQuery的Datepicker.它工作正常,但找不到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
images - > src/main/webapp/resources/stats/jquery/css/images/.
即使我用绝对路径引用css路径中的那些图像,我的浏览器也找不到它(当我启动chrome开发工具时,我也找不到文件)
谢谢您的帮助
您将CSS文件作为JSF资源提供.它将从/javax.faces.resourceURL中的文件夹提供,它也将获得FacesServlet映射,如URL /faces/*或*.xhtmlURL.它会使路径相关的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>.