Question

我想用图像和自定义标签实现JSF按钮。我测试了这段代码：

<h:commandButton id="savesettings" styleClass="avesettings" value=" Save Settings " action="#{GeneralController.updateDBSettings}" rendered="true" update="growl">
    <f:ajax render="@form" execute="@form"></f:ajax>
</h:commandButton>

.avesettings {
    background-image: url('../images/small.png');
}

结果如下：

enter image description here

我还测试了第二个代码：

<h:commandButton id="savesettings" image="resources/images/first.png" value=" Save Settings " action="#{GeneralController.updateDBSettings}" rendered="true" update="growl">
    <f:ajax render="@form" execute="@form"></f:ajax>
</h:commandButton>

我得到的结果没有标签：

enter image description here

你能帮我创建JSF按钮，背景图片和自定义标签定义为按钮属性吗？

Answer 1

您使用styleClass="avesettings"的第一种方法，即使用CSS样式是唯一可行的方法，因为如果指定image属性，输入元素将成为图像。

另见documentation

因此，您最好的选择是使用高级样式技术作为按钮，请参阅这些文章：

Answer 2

你有没有尝试过"image" attribute的commandButton标签？

Answer 3

实现此目的的一种方法是在样式表中将图像作为jsf资源加载：

    <style type="text/css">
        .imageButton
        {
            background-image:url(#{resource['images/button.png']});
        }
    </style>

然后在xhtml中设置相关的commandButton styleClass：

    <h:commandButton value="Submit" styleClass="imageButton" action="#{...}"/>

将文件button.png放在资源文件夹下，即resources / images / button.png，并确保您的资源文件夹位于WEB-INF文件夹旁边

或者，如果您希望图像在commandButton中显示为文本旁边的图标，那么您可以稍微使用css：

        .imageButton
        {
            padding: ...
            border: ...
            color: ...
            background: [<'background-color'> || <'background-image'> || <'background-repeat'> || <'background-attachment'> || <'background-position'>] 
        }

Answer 4

以下JSF / CSS应该可以解决您的问题：

JSF（与你的第一个例子中的相同）：

<h:commandButton id="savesettings" styleClass="avesettings" value="Save Settings" action="#{GeneralController.updateDBSettings}" rendered="true" update="growl">
    <f:ajax render="@form" execute="@form"></f:ajax>
</h:commandButton>

CSS（改编）：

.avesettings {
    background: url('../images/small.png') no-repeat;
    cursor: pointer;
    width: 126px;
    height: 41px;
    border: none;
}

css的宽度和高度必须是图像的宽度和高度。我在外部css文件中也有css，而不是直接在JSF模板中。

如何使用图像和按钮标签实现JSF按钮

4 个答案: