jQuery（datepicker）集成和映像路径存在问题

我想在我的web应用程序中集成jQuery DatePicker

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

然后我在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中的所有路径…

这些图像必须位于

/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"/>   

---

路径与实际文件相关，在您的例子中是.css。将jQueryUI的

/images

与css文件保持在同一目录中，它们将被正确引用

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