9

我有这个命令按钮，我需要使用 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 的原因，该图标位于跨度标记中，因此我尝试将其添加到命令按钮中的 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 标签，有没有简单的方法可以做到这一点？

4

2 回答 2

19

您不能将标记放在valueJSF 组件的属性中。您应该像在普通 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）

于 2013-10-04T17:25:06.160 回答
1

我假设你得到一个解析错误。这是因为该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>

更新

<button>Bootstrap显然要求你有一个。它不会使用 正确设置样式<input type=button>，因此您必须创建一个自定义组件以将 a 添加<button>到 JSF 树中，因为 JSF 默认不提供这样的组件。您可以利用在 primefaces 中生成的代码。它们提供了一个button组件，但不幸的是它不适合您的需求，因为它们已经包含了自己的内容和样式。

primefaces中感兴趣的类别：

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

于 2013-10-03T10:06:44.590 回答