设计一个 JSF 外部链接，使其看起来像一个按钮 [英] Styling one JSF external link to make it look like a button

问题描述

Primefaces 3.5，Omnifaces 1.6

Primefaces 3.5, Omnifaces 1.6

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

I have a group of buttons with icons. The buttons have an action to do on the page (such as delete or add new row in datatable). I want to add new "something" that looks exactly as buttons do, but with an external link. If I click on this new button, new tab/window have to be opened. For that purpose I am using p:commandButton and 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 can I achieve this ?

推荐答案

• 使用p:button，它的作用就像一个链接:

  • Use a p:button, which acts like a link:

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

  • 如果您想要一个空白目标并从 Primefaces 3.5.5 开始，有机会使用target 属性直接:

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

  • 当低于 PF 3.5.5 时，您可以一些 javascript 在空白目标中打开它:

  • When being below PF 3.5.5, you could do some javascript to open it in a blank target:

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

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

  • All of the choices above use javascript to change the browser's window location. In order to generate a bot-harvestable HTML link element, make use of a h:outputLink (or just a plain HTML a element), and style it using Primefaces' classes:

    <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 与点击锚点

  这篇关于设计一个 JSF 外部链接，使其看起来像一个按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！