html - jsf html标签里面的值

Question

我有这个 commandButton，我需要使用 Bootstrap 3 添加一个图标。

<h:commandButton  id="logoutButton" action="#{loginController.logout()}" class="btn btn-primary" style="margin-top: 10px;margin-left: 10px;" value="Log Out"></h:commandButton>

出于 bootstrap 3 的原因，该图标位于 span 标记中，因此我尝试将其添加到命令按钮的 value 属性中，如下所示:

<h:commandButton  id="logoutButton" action="#{loginController.logout()}" class="btn btn-primary" style="margin-top: 10px;margin-left: 10px;" value="<span class="glyphicon glyphicon-log-out"></span>Log Out"></h:commandButton>

我有一个错误，我想我不能在 value 属性中添加 html 标签，有没有简单的方法可以做到这一点？

Answer 1

您不能将标记放在 value 中JSF 组件的属性。您应该像在普通 HTML 中一样将标记放在标记正文中。然而，这不受 <h:commandButton> 支持。 (原因很简单，因为它会生成一个 <input> 元素，任何子元素都将以无效的 HTML 结尾)。它将在生成的 <input> 之后 呈现。元素。

只需使用 <h:commandLink>反而。虽然它会生成一个 <a>元素，Bootstrap CSS 也只是 supports它以及btn样式类。

<h:commandLink id="logoutButton" action="#{loginController.logout}" styleClass="btn btn-primary">
    <span class="glyphicon glyphicon-log-out"></span>Log Out
</h:commandLink>

(请注意，我将错误的 class 属性修复为 styleClass )