单击命令按钮时如何在 PrimeFaces 灯箱中打开页面？

Question

PrimeFaces 展示上的这个示例演示了 (iFrame) 的用法<p:lightBox>。<h:outputLink>单击时会打开一个页面。

<p:commandButton>当单击a 时，我想要同样的结果。当按下<p:lightBox>a 时，应在 中打开一个页面。<p:commandButton>

我有以下内容。

<p:lightBox iframe="true" height="90%" width="800px" widgetVar="lightBoxWidget">
    <h:outputLink value="page.jsf" style="width: 93%; text-align: left;text-align: left; height: 22px;padding: 6px 0px 0px 12px;" styleClass="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" onmouseover="$(this).addClass('ui-state-hover');" onmouseout="$(this).removeClass('ui-state-hover');">
        <h:outputText value="Text"/>
        <f:param name="id" value="#{bean.id}"/>
    </h:outputLink>
</p:lightBox>

我怎样才能替换<h:outputLink>为<p:commandButton>？这里使用的样式只是让链接看起来像一个按钮。

实际上，我想在打开<p:dataTable>之前更新<p:lightBox>，以便可以将选定的行设置为关联的托管 bean。为此，a<p:commandButton>非常适合代替<h:outputLink>。

Answer 1

这似乎没有得到官方支持。所以你需要一个技巧。

根据PrimeFaces.widget.LightBox中的定义lightbox.js，灯箱使用 的href第一个<a>元素src的<iframe>。

setupIframe: function () {
    // ...
    this.links.click(function (b) {
        if (!a.iframeLoaded) {
            // ...
            a.iframe.on("load", function () {
                // ...
            }).attr("src", a.links.eq(0).attr("href")) // <-- Here.

因此，只需在.txt 文件旁边放置一个不可见链接（只需应用 CSS display:none）就足够了。<p:lightbox><p:commandButton>

<p:lightBox iframe="true" height="90%" width="800px" widgetVar="lightBoxWidget">
    <h:outputLink value="page.jsf" style="display:none;">
        <f:param name="id" value="#{bean.id}"/>
    </h:outputLink>
    <p:commandButton value="Text" update="..." />
</p:lightBox>

确保<p:commandButton update>不会覆盖其<p:lightBox>本身，否则可能会失败。