如何在JSF中制作图像按钮_Jsf_Button_Primefaces

如何在JSF中制作图像按钮

jsf button primefaces

如何在JSF中制作图像按钮,jsf,button,primefaces,Jsf,Button,Primefaces,我想有一个组件，看起来像一个按钮，但它应该包含一个图像，而不是文本。由于标准按钮不提供此功能，我尝试使用：这不管用。被翻译成标记，被翻译成-标记可能不包含-标记，因此-标记会自动放置在-标记之外。其结果是，只有图像是可点击的，而不是周围的面板，它的样式看起来像一个按钮。有没有办法使周围的面板成为链接的一部分，或者在按钮内放置图像我的项目使用JSF和Primefaces库： <html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="h

我想有一个组件，看起来像一个按钮，但它应该包含一个图像，而不是文本。由于标准按钮不提供此功能，我尝试使用

：

这不管用。

被翻译成

标记，

被翻译成

<代码>-标记可能不包含

-标记，因此

-标记会自动放置在

-标记之外。其结果是，只有图像是可点击的，而不是周围的面板，它的样式看起来像一个按钮。有没有办法使周围的面板成为链接的一部分，或者在按钮内放置图像

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

您可以将div移出，例如

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

有几种方法可以将图像添加到图像中：

使用图像属性

<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;
}


.按钮{
背景：白色url（'button.gif'）无重复顶部；
}

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

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

这可能有助于避免JSF中的JavaScript代码。

如果图像不适合，则将属性添加到С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
}

CSS是最好的解决方案。

有不同的用途。我使用了两个选项的组合：

我使用了以下css:

。一些类{高度：[图像高度]px；宽度：[图像宽度]px；背景：浅蓝色；边框样式：开始；边框宽度：2px；浮动：左侧；填充：6px 8px；边距：0px；}

填充将按钮增加到所需大小。谢谢您的回答。我已经试过了，但不幸的是，

-标记被翻译成两个嵌套的div:

。我无法控制内部

的css，因此其大小限制了

的大小。如果必须使用面板组件，那么如果使用JQuery，则可以使用第n个子选择器[将相关CSS样式应用于DIV，该DIV是带有.myclasse的DIV的子级。谢谢您，因为我一直在寻找减小命令按钮大小的方法。

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

.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
}