为一个 JSF 外部链接设置样式，使其看起来像一个按钮

Posted 2023-02-23

【中文标题】为一个 JSF 外部链接设置样式，使其看起来像一个按钮

【英文标题】：Styling one JSF external link to make it look like a button

【发布时间】：2013-09-25 19:58:13

【问题描述】：

Primefaces 3.5、Omnifaces 1.6

我有一组带有图标的按钮。这些按钮在页面上有一个动作（例如删除或在数据表中添加新行）。我想添加看起来与按钮完全一样的新“东西”，但带有外部链接。如果我单击这个新按钮，则必须打开新选项卡/窗口。为此，我使用p:commandButton 和h:outputLink。

<p:commandButton action="#bean.do1" icon= ...>
<p:commandButton action="#bean.do2" icon= ...>

<h:outputLink value="#bean.url" target="_blank"> 
  <i class="icon-external-link"></i> 
</h:outputLink>

我怎样才能做到这一点？

【问题讨论】：

相关：How to create an html button that acts like a link?

【参考方案1】：

使用p:button，其作用类似于链接：

<p:button href="http://www.***.com" value="Go to SO" />

如果您想要一个空白目标并从 Primefaces 3.5.5 开始，there's the chance 使用 target属性直接：

<p:button target="_blank" href="http://www.***.com" value="Go to SO" />

当低于 PF 3.5.5 时，你 could do 一些 javascript 在空白目标中打开它：

<p:button value="Go to SO" onclick="window.open('http://www.***.com')" />

以上所有选择使用javascript来改变浏览器的 窗口位置。为了生成 bot-harvestable HTML link 元素，请使用 h:outputLink（或者只是一个普通的 HTML a 元素）， 并使用 Primefaces 的类对其进行样式设置：

<h:outputLink value="http://www.***.com"
    styleClass="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only">
    <span class="ui-button-text">Go to SO</span>
</h:outputLink>

另请参阅：

window.location.href vs clicking on an Anchor

【讨论】：

<p:button> 本身已经支持target 属性。应该注意的是，这一切都在幕后使用 JS，这与链接本身不可搜索机器人索引相反。

@BalusC 哪个 PF 版本？在 3.5 中不适合我 :-(

抱歉，我没有真正意识到，我的游乐场项目中不知何故 4.0 RC1。这在 3.5 中确实没有。

@XtremeBiker 谢谢你的回答！我已经使用了你的建议。但在 PF 3.5.14 中，“目标”属性可用，所以我可以实际使用它！

@BalusC 您的评论也帮助了我，因为在 PF 3.5.14 中“目标”属性可用。还要感谢您在 OF1.6 中提供的出色 CDI 功能。