Question

我想在我的JSF页面的value中同时拥有图像和文本（来自a4j:commandButton属性），这可能吗？

由于

Answer 1

只需将图像定义为CSS背景图像。

.buttonclass {
    background-image: url('foo.gif');
}

您不希望仅将图像属性用于背景图像。这将呈现一个HTML <input type="image">，其目的完全不同（图像映射将返回鼠标指针的X和Y位置）。

Answer 2

使用a4j:commandButton标记的image属性会导致组件忽略任何封闭的输出文本标记。包含h:graphicImage标记可以存储图像，但不会作为按钮呈现的内容的一部分。

解决此问题的最佳方法是创建一个包含测试和图像的新按钮，并使用a4j:commandButton的图像属性。

@BalusC：好点重新输入类型，但设置你的答案中列出的按钮类并使用

                <a4j:commandButton styleClass="btnStop" type="button"
                    disabled="true" ignoreDupResponses="true" reRender="lastOp"
                    onclick="this.disabled=true" alt="myAlt" value="myVal"
                    oncomplete="this.disabled=false" action="#{MyBacking.action}" />

创建一个按钮，图像无处可见。

Answer 3

没有找到a4j：commandButton的快速解决方案。但是，我使用等效的a4j：commandLink

<a4j:commandLink action="..." type="submit"
   oncomplete="..." styleClass="buttonLink">
 <h:graphicImage url="/img/icons/save12x12.gif" /> Update</a4j:commandLink>

使用以下样式表

  <u:selector name="a.buttonLink">
    <u:style name="padding" value="2px 4px"/>
    <u:style name="background-image">
      <f:resource f:key="org.richfaces.renderkit.html.GradientA"/>
    </u:style>
    <u:style name="background-position" value="0px 50%"/>
    <u:style name="border" value="1px solid"/>
    <u:style name="border-color" skin="headerBackgroundColor"/>
    <u:style name="font-family" skin="generalFamilyFont"/>
    <u:style name="font-size" value="11px"/>
    <u:style name="font-weight" value="bold"/>
    <u:style name="color" skin="headerTextColor"/>
    <u:style name="text-decoration" value="none"/>
  </u:selector>

  <u:selector name="a.buttonLink:active, a.buttonLink:link, a.buttonLink:visited">
    <u:style name="color" skin="headerTextColor"/>
    <u:style name="text-decoration" value="none"/>
  </u:selector>

没有使用IE测试它（不使用它），但使用firefox工作正常..

如何在RichFaces a4j：commandButton中嵌入带有文本的图像

3 个答案: