Question

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

<h:commandLink action="#{some_action}">
    <p:panel styleClass="some_style">
        <h:graphicImage value="#{some_image}">
    </p:panel>
</h:commandLink>

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

我的项目使用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">

Answer 1

您可以通过多种方式将图片添加到commandButton：

使用图像属性

<h:commandButton action="#{some_action}" image="button.gif" />

图像的绝对或相对URL 要显示此按钮。如果指定，这个“输入”元素将是“图像”类型。否则，它会属于“类型”指定的类型具有由...指定的标签的属性 “价值”财产。

使用CSS

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

.button {
    background: white url('button.gif') no-repeat top;
}

Answer 2

你可以把div移到外面，例如。

<div class="myButton">
<h:commandLink action="#{some_action}" styleClass="clickAll">
        <h:graphicImage value="#{some_image}">
</h:commandLink>
</div>

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

.clickAll{
  display:block;
}

Answer 3

如果您可以使用PrimeFaces / JSF中的图标，那么有一个简单而有效的解决方案

<p:column>
    <p:commandButton icon="ui-icon-wrench"
     style="border-width:0;background:none;"/>
</p:column>

在JSF中避免使用JavaScript代码可能会有所帮助。

Answer 4

如果图像不合适，则将属性添加到сss类：

.button {
    background: white url('button.gif') no-repeat top;
    width: 32px;   // button width
    height: 32px;  // button height
    background-size: contain;
    border: none;  // hide border of button
}

如何在JSF中制作图像按钮

4 个答案: