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

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

这是结果:

我还测试了第二个代码:

<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 按钮吗？

Answer 1

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

另见 documentation

所以最好的办法是对按钮使用高级样式技术，请参阅以下文章:

• http://coding.smashingmagazine.com/2009/11/18/designing-css-buttons-techniques-and-resources/
• http://www.tyssendesign.com.au/articles/css/styling-form-buttons/