gpt4 book ai didi

java - 在 JSF 组件的 CSS 中链接图像

转载 作者:行者123 更新时间:2023-11-29 10:05:39 24 4
gpt4 key购买 nike

我实现了一个 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/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com