Question

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>

我怎样才能做到这一点？

Answer 1

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

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

如果您想要一个空白目标并从Primefaces 3.5.5开始，there's the chance使用 target直接属性：
```
<p:button target="_blank" href="http://www.stackoverflow.com" value="Go to SO" />
```
当低于PF 3.5.5时，你could do使用一些javascript在空白目标中打开它：
```
<p:button value="Go to SO" onclick="window.open('http://www.stackoverflow.com')" />
```
上面的所有选项使用javascript 来更改浏览器窗口位置。要生成 bot-harvestable HTML link元素，请使用h:outputLink（或仅仅是纯HTML a元素），并使用Primefaces的类来设置它的样式：
```
<h:outputLink value="http://www.stackoverflow.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

设置一个JSF外部链接以使其看起来像一个按钮

1 个答案: