jsf html标签里面的值

Posted 2023-02-23

【中文标题】jsf html标签里面的值

【英文标题】：jsf html tag inside value

【发布时间】：2013-10-09 09:40:34

【问题描述】：

我有这个命令按钮，我需要使用 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 标签，有没有简单的方法可以做到这一点？

【参考方案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）

【参考方案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 组件，但不幸的是它不适合您的需求，因为它们已经包含了自己的内容和样式。

primefaces 中感兴趣的类别：

Button component（第 3.5 节） Button renderer

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

【讨论】：

您的代码有效，但我想要按钮内的图标，文本注销所在的位置，我知道这可以通过 html 代码实现，但对于 JSF，我需要值内的跨度，其中按钮的文本是，如您在引导程序中的此示例中所见：link