Question

我有这个命令按钮，我需要使用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>

图标在span标签中是出于引导3的原因，所以我试图将它添加到命令按钮中的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也只是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）

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默认情况下不提供此类组件。您可以利用primefaces内部生成的代码。它们提供button组件，但不幸的是它不适合您的需要，因为它们已经包含了自己的内容和样式。

关于素数的兴趣类：

Button component（v.5.5）
Button renderer

注意：实际上我检查了input element specification，但它可能没有托管内容。为了有效（在这种情况下正确设置样式），您需要<button>。

jsf html标签里面的值

2 个答案:

更新