Question

我希望单个控件显示一个rich：popupPanel（如果它不可见），如果它已经可见则隐藏它。

通过教程和代码示例，我想出了：

<h:outputLink value="#" id="loginLink">Login
    <rich:componentControl event="click"  operation="show" target="loginPane" >
        <a4j:param name="event" value="event" noEscape="true" />
        ... more params for positioning ...
    </rich:componentControl>
</h:outputLink>

<rich:popupPanel id="loginPane" autosized="true" modal="false" moveable="false" resizeable="false" followByScroll="false" onshow="#{rich:element('userName')}.focus()" >
    <h:form>
   ...
    </h:form>
</rich:popupPanel>

这显示了我的popupPanel和后续表单。我只是无法识别一种方法来重载outputLink的componentControl以隐藏和显示。自然地“切换”不是一个关键字 - 这太简单了:)我对JSF和javascript很新，并且已经尝试了今天更好的部分。任何人都可以推荐一些东西让我朝着正确的方向前进吗？

Answer 1

对我来说，以下解决方案有效，而confirmPanel是弹出窗口中包含更新数据的面板。

<rich:column>
    <a4j:commandButton value="Delete" render="confirmPanel"
        oncomplete="#{rich:component('confirmPane')}.show()"
        ajaxSingle="true">
        <a4j:param value="#{record.id}" assignTo="#{showActivitiesAsTableView.selectedActivityId}" />
    </a4j:commandButton>
</rich:column>

Answer 2

最后，我最终选择了懒惰的路线：

我编辑了内联页面的css以使rf-p-shade样式不影响alpha并制作了一个onmaskclick事件来关闭弹出窗口。我无法通过javascript或jsf表示法复制“Toggle”行为。

Answer 3

我只是偶然发现了这一点。希望经过这么长时间，有人会发现我相对简单的解决方案很有用：

<h:form id="myForm">

  <h:outputScript>
    var popupVisible = false;

    function toggleComponent(component, currentVisibility) {
      if (!currentVisibility) {
        component.show();
      } else {
        component.hide();
      }
    }
  </h:outputScript>

  <rich:popupPanel id="myPopup" domElementAttachment="form" modal="false"
                   onshow="popupVisible = true;"
                   onhide="popupVisible = false;">
    <!-- popup content here -->
  </rich:popupPanel>

  <a4j:commandLink onclick="toggleComponent( #{rich:component('myPopup')}, popupVisible );">
    <h:graphicImage value="/images/some_fancy_icon.jpg" />
  </a4j:commandLink>

</h:form>

请注意：：它仅适用于非模式面板。

您甚至可以具有多个弹出窗口，并且在一个弹出窗口的onshow（）上，您可以关闭所有其他弹出窗口。当然，您每个人都需要一个单独的... Visible变量。

Richfaces componentControl切换弹出窗口

3 个答案: