2012-10-04 5 views
1

나는 쇼케이스에서 다음 예제를 따르겠습니다. http://showcase.richfaces.org/richfaces/component-sample.jsf?demo=popup&sample=login&skin=blueSky 링크를 클릭하여 popupPanel을 열고 해당 패널을 링크의 동일한 위치에 추가하는 방법을 보여줍니다. 그러나 다시 클릭하면 패널을 닫을 수 있기를 바랍니다. 누구든지 그 달성 방법을 알고 있습니까? 여기에 내 코드rich : 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> 

답변

0

이 richfaces 4 잘 알고 아니지만, modalpanel이 사업부를 렌더링, 가시성은 간단한 JS로 제어 할 수 있습니다

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

당신은 다음과 같이 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();"을 추가하는 것입니다).

관련 문제