如何在 JSF 中制作图像按钮答案

【问题标题】：How to make an image button in JSF如何在 JSF 中制作图像按钮
【发布时间】：2011-08-20 03:35:39
【问题描述】：

我想要一个看起来像按钮的组件，但它应该包含图像而不是文本。因为标准按钮不提供此功能，所以我尝试使用<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>-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">

【问题讨论】：

标签： jsf button primefaces

【解决方案1】：

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

使用图片属性

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

图片的绝对或相对网址为该按钮显示。如果指定，这个“输入”元素将属于“图像”类型。否则会属于“类型”指定的类型带有指定标签的属性 “价值”属性。

使用 CSS

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

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

【讨论】：

CSS 是最好的解决方案。 <input type="image"> 有不同的用途。
我使用了您的两个选项的组合：<h:commandButton action="#{some_action}" image="#{some_image}" styleClass="#{some_class}" /> 我使用了以下 css：.some_class { height: [heigt_of_image]px; width: [width_of_image]px; background: lightblue; border-style: outset; border-width: 2px; float: left; padding: 6px 8px; margin: 0px; } 填充将按钮增加到所需的大小。

【解决方案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;
}

【讨论】：

感谢您的回答。我试过了，但不幸的是<p:panel>-tag 被翻译成两个嵌套的div：<div class="myclass"><div class="some_primefaces_stuff"> <a href="some_location" class="clickAll"> [the image] </a></div></div>。我无法控制内部<div> 的css，所以它的大小限制了<a> 的大小。
如果您必须使用面板组件，那么如果您使用的是 JQuery，则可以使用第 n 个子选择器 [api.jquery.com/nth-child-selector/] 将相关的 CSS 样式应用于 div 的子 DIV与.myclass

【解决方案3】：

如果可以使用来自 PrimeFaces/JSF 的图标，那么有一个简单而可靠的解决方案是

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

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

【讨论】：

感谢您，因为我一直在寻找减小命令按钮的大小。

【解决方案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
}

【讨论】：