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>

出于引导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

您不能将标记放在JSF组件的value属性中。 您应该像普通HTML一样将标记放入标记主体中。 但是， <h:commandButton>不支持此功能（出于非常简单的原因，因为它会生成一个<input>元素，并且任何子代都将以无效的HTML结尾）。 它会在生成的<input>元素之后呈现。

只需使用<h:commandLink> 。 尽管它生成一个<a>元素，但Bootstrap CSS也仅支持它以及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 ）

Answer 2

我假设您收到解析错误。 之所以如此，是因为value属性不希望包含任何html代码。 而是通过如下按钮将您的引导程序代码包装起来：

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

生成html输出（不验证，请参见下面的注释）：

<input id="j_idt5:logoutButton" type="submit" name="j_idt5:logoutButton" value="Log Out" style="margin-top: 10px;margin-left: 10px;" class="btn btn-primary">
    <span class="glyphicon glyphicon-log-out"></span>
</input>

更新

Bootstrap显然要求您有一个<button> 。 不能使用<input type=button>正确设置其样式，因此您必须创建一个自定义组件以将<button>添加到JSF树中，因为JSF默认情况下不提供此类组件。 您可以利用素数内部生成的代码。 它们提供了button组件，但不幸的是，由于它们已经包含了自己的内容和样式，因此无法满足您的需求。

素类的兴趣类别：

• 按钮组件 （v。3.5）
• 按钮渲染器

注意：实际上，我检查了输入元素的规格 ，它可能不包含内容。 为了有效（在这种情况下，其样式正确），您需要一个<button> 。