Question

PrimeFaces展示中的

This示例演示了<p:lightBox>（iFrame）的用法。单击<h:outputLink>时会打开一个页面。

点击<p:commandButton>时，我想要相同。 <p:lightBox>时，页面应该在<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。为此，<p:commandButton>非常适合代替<h:outputLink>。

Answer 1

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

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

<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.旁边的display:none中添加一个不可见的链接（只需应用CSS <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>本身，否则可能会失败。

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

1 个答案: