2

我想用图像和自定义标签实现 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');
}

这是结果：

在此处输入图像描述

我还测试了第二个代码：

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

我得到这个没有标签的结果：

在此处输入图像描述

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

4

4 回答 4

2

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

另见文档

因此，您最好的选择是对按钮使用高级样式技术，请参阅以下文章：

于 2012-08-19T20:19:52.357 回答
1

您是否尝试过他的 commandButton 标签的“图像”属性？

于 2012-08-19T15:15:44.837 回答
1

实现这一点的一种方法是将图像作为 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'>] 
        }
于 2012-08-24T08:25:45.283 回答
1

以下 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 模板中。

于 2012-08-24T09:20:31.837 回答