如何打开和关闭rich:popupPanel 来自同一链接答案

【问题标题】：How to open and close rich:popupPanel from the same link如何打开和关闭rich:popupPanel 来自同一链接
【发布时间】：2012-09-26 01:14:12
【问题描述】：

我按照展示中的这个例子：http://showcase.richfaces.org/richfaces/component-sample.jsf?demo=popup&sample=login&skin=blueSky 它显示了我如何单击链接以打开 popupPanel 并将该面板附加到该链接的相同位置。但我希望如果我再次单击，它将关闭面板。有人知道如何实现吗？这是我的代码

    <h:outputLink value="#" id="sb-dd-ol" >
        <rich:componentControl event="click" operation="show" target="sb-dd-pp">
            <a4j:param noEscape="true" value="event"/>
            <rich:hashParam>
                <a4j:param noEscape="true" name="top"
                           value="jQuery(#{rich:element('sb-dd-ol')}.parentNode).offset().top + 
                                  jQuery(#{rich:element('sb-dd-ol')}.parentNode).height()" />
                <a4j:param noEscape="true" name="left" 
                           value="jQuery(#{rich:element('sb-dd-ol')}.parentNode).offset().left" />
            </rich:hashParam>
        </rich:componentControl>
        Test
    </h:outputLink>
    <rich:popupPanel id="sb-dd-pp" autosized="true" modal="false" 
                     moveable="false" resizeable="false" followByScroll="false">
        This is a test
    </rich:popupPanel>

【问题讨论】：

标签： jquery jsf jsf-2 richfaces

【解决方案1】：

不太了解richfaces 4，但是modalpanel渲染了div，可以用简单的js来控制它的可见性：

var isShown = false;
function onlinkclick() {
  if(isShown) {
      hideElement();
  } else {
      showElement();
  }
  isShown = !isShown;
}

【讨论】：

【解决方案2】：

你可以像这样扩展 PopupPanel 原型：

jQuery.extend(RichFaces.ui.PopupPanel.prototype, {
    toggle: function(event, opts) {
        if (this.shown) {
            this.hide(event, opts);
        } else {
            this.show(event, opts);
        }
    }
}

之后你可以在componentControl中使用operation="toggle"（或者在链接上添加onclick="#{rich:component('sb-dd-pp')}.toggle();"）。

【讨论】：