Question

使用JSF2中的资源是一件好事，因为您可以将资源存储在某个位置，然后使用HTML或JSF2中的不同替代方法来引用它们。我在XHTML页面中使用这样的资源：

<h:graphicImage value="#{resource['image:sort_up.png']}"/>

或者在创建自己的taglib时使用Java中的资源：

ResourceHandler resHandler = context.getApplication().getResourceHandler();
Resource minus = resHandler.createResource(IMAGES_TOGGLE_MINUS_PNG,"image");
writer.startElement("img", toComponent);
writer.writeAttribute("src", minus.getRequestPath(), "src");

HTML中的翻译路径看起来像这样：

/nbfrontend/jsf2frontend/javax.faces.resource/sort_up.png.xhtml?ln=image

问题是：如何从JavaScript引用这些图像？

一种方法是创建一个隐藏元素，我将存储路径，然后使用getElementByID检索隐藏元素并从那里检索值。但是，当在应用程序中使用大量图像时，这不能很好地扩展。

另一种解决方法是将图像的路径传递给JavaScript函数，但这对于未直接调用的JavaScript函数来说是不可行的。

在JavaScript中使用这样的JSF2资源还有其他选择吗？

Answer 1

将其用作CSS背景图片，而不是<h:outputStylesheet>提供的。

.toggle {
    background-image: url(#{resource['image:sort_up.png']});
}

.toggle.up {
    background-image: url(#{resource['image:sort_down.png']});
}

与此JS（jQuery风味）

结合使用

$('.toggle').click(function() {
    $(this).toggleClass('up');
    // ...
});

如何最好地使用Javascript中的JSF2资源

1 个答案: