如何在JSF中制作图像按钮

bsp*_*oel 22 jsf button primefaces

我希望有一个看起来像按钮的组件,但它应该包含一个图像,而不是文本.由于标准按钮不提供此功能,我尝试使用<h:commandLink>:

<h:commandLink action="#{some_action}">
    <p:panel styleClass="some_style">
        <h:graphicImage value="#{some_image}">
    </p:panel>
</h:commandLink>
Run Code Online (Sandbox Code Playgroud)

这不起作用.将<h:commandLink>被转换成一个<a>标签,和<p:panel><div>.<a>-tags可能不包含<div>-tags,因此<div>-tag会自动放在<a>-tag 之外.结果是只有图像是可点击的,而不是周围的面板,其样式看起来像一个按钮.有没有办法让周围的面板成为链接的一部分,或者将图像放在按钮内?

我的项目使用JSF和Primefaces库:

<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:composite="http://java.sun.com/jsf/composite"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.prime.com.tr/ui">
Run Code Online (Sandbox Code Playgroud)

Mar*_*ark 31

您可以通过几种方法将图像添加到commandButton:

使用图像属性

<h:commandButton action="#{some_action}" image="button.gif" />
Run Code Online (Sandbox Code Playgroud)

要为此按钮显示的图像的绝对或相对URL.如果指定,则此"input"元素将为"image"类型.否则,它将是"type"属性指定的类型,其标签由"value"属性指定.

使用CSS

<h:commandButton action="#{some_action}" styleClass="button" />

.button {
    background: white url('button.gif') no-repeat top;
}
Run Code Online (Sandbox Code Playgroud)

  • CSS是最好的解决方案.`<input type ="image">`有不同的用途. (3认同)

pla*_*nes 8

你可以把div移到外面,例如

<div class="myButton">
<h:commandLink action="#{some_action}" styleClass="clickAll">
        <h:graphicImage value="#{some_image}">
</h:commandLink>
</div>
Run Code Online (Sandbox Code Playgroud)

并以这种方式设计div.只需将锚(标记)显示为一个块,它应该填充整个div,这样它就可以全部点击.例如在你的CSS中:

.clickAll{
  display:block;
}
Run Code Online (Sandbox Code Playgroud)