jQuery（日期选择器）集成和图像路径问题

Question

我想将 jQuery-DatePicker 集成到我的 Web 应用程序中。

我下载了脚本、css 和图像，并将它们放在相应的目录中：scripts、css 和 images。

然后我在scripts.xhtml:

<ui:composition
xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets">

<h:outputScript library="scripts" name="jquery-1.3.2.min.js"/>
<h:outputScript library="scripts" name="jquery-ui-1.7.1.custom.min.js"/>
<h:outputScript library="scripts" name="daterangepicker.jQuery.js"/></ui:composition>

和styles.xhtml中定义它们；

<ui:composition
xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets">

<h:outputStylesheet library="css" name="commons.css"/>
<h:outputStylesheet library="css" name="styles.css"/>
<h:outputStylesheet library="css" name="doi.css"/>
<h:outputStylesheet library="css" name="ui.daterangepicker.css"/>
<h:outputStylesheet library="css" name="redmond/jquery-ui-1.7.1.custom.css"/>   

<!-- PRINT STYLES -->
<!-- Note: there is currently no way to determine the "media" attribute with h:outputStylesheet -->
<link rel="stylesheet" media="print" href="${facesContext.externalContext.requestContextPath}/javax.faces.resource/css/print.css.xhtml" type="text/css" /></ui:composition>

问题是所有相关图像均未加载/找到。

对于前。背景在 css 中硬编码 -> background-image: url("images/ui-icons_d8e7f3_256x240.png") 这不是相应的路径...

我是否必须在某处指定其他内容？我无法想象我必须手动更改脚本和 css 中的所有路径......

Answer 1

这些图像必须位于 /css 文件夹的 /images 子文件夹中。

---

与具体问题无关，您并没有真正以正确的方式使用库。它应该代表一个“主题”的公共库。但您似乎将它们全部放在默认库中，因此您实际上应该按如下方式声明资源：

<h:outputScript name="scripts/jquery-1.3.2.min.js"/>
<h:outputScript name="scripts/jquery-ui-1.7.1.custom.min.js"/>
<h:outputScript name="scripts/daterangepicker.jQuery.js"/>

<h:outputStylesheet name="css/commons.css"/>
<h:outputStylesheet name="css/styles.css"/>
<h:outputStylesheet name="css/doi.css"/>
<h:outputStylesheet name="css/ui.daterangepicker.css"/>
<h:outputStylesheet name="css/redmond/jquery-ui-1.7.1.custom.css"/>   

此外， 上存在 media 属性支持代码> 自 JSF 2.1 起：

<h:outputStylesheet media="print" name="css/print.css" />