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

Question

我在展示中关注这个例子:http: //showcase.richfaces.org/richfaces/component-sample.jsf？demo = pop&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>

Answer 1

您可以扩展PopupPanel原型,如下所示:

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

之后,您可以operation="toggle"在componentControl 中使用(替代方法是onclick="#{rich:component('sb-dd-pp')}.toggle();"在链接上添加).