リッチで最小化と最大化ボタンを追加する方法：ポップアップパネルウィンドウ

Question

以下のように、リッチポップアップポップアップパネルのページの右上に最小化と最大化ボタンを追加するにはどうすればよいですか？

次のコードを使用して、右上隅に「X」を追加し、クリックするとポップアップウィンドウが閉じます。

<f:facet name="controls"> 
    <h:outputLink value="#" 
     onclick="#{rich:component('simplePopup2')}.hide(); return false;"> 
      X 
    </h:outputLink> 
</f:facet> 

お願いします。

Answer 1

jQueryを最大化/最小化を行う2つのカスタム関数で拡張することは可能です。あなたが最大化/最小化関数を呼び出す前にpopupPanel

<rich:popupPanel id="window"> 
    <f:facet name="controls"> 
     <h:outputLink value="#" onclick="#{rich:component('window')}.cdiv.minimize(); return false;"> 
      <h:outputText value="Minimize"/> 
     </h:outputLink> 
     <h:outputText value=" | "/> 
     <h:outputLink value="#" onclick="#{rich:component('window')}.cdiv.maximize(); return false;"> 
      <h:outputText value="Maximize"/> 
     </h:outputLink> 
     <h:outputText value=" | "/>   
     <h:outputLink value="#" onclick="#{rich:component('window')}.hide(); return false;"> 
      <h:outputText value="Close"/> 
     </h:outputLink>    
    </f:facet>  
    <h:outputText value="Window"/> 
</rich:popupPanel> 

は注意.cdiv RichFacesのとそれを使用することができるよりも

(function($) { 
    $.fn.maximize = function() { 
     var $this = $(this); 
     var viewport = $(window); 
     var bt = $this.css('border-top-width'); 
     var br = $this.css('border-right-width'); 
     var bb = $this.css('border-bottom-width'); 
     var bl = $this.css('border-top-width'); 
     bt = bt ? parseInt(bt) : 0; 
     br = br ? parseInt(br) : 0; 
     bb = bb ? parseInt(bb) : 0; 
     bl = bl ? parseInt(bl) : 0; 

     $this.css({ 
      width: (viewport.width() - (bl + br)) + 'px', 
      height: (viewport.height() - (bt + bb)) + 'px', 
      top: 0, 
      left: 0 
     }); 

     $this.find('div.rf-pp-cnt-scrlr').css({ 
      width: 100 + '%', 
      height: 100 + '%' 
     }); 
    } 

    $.fn.minimize = function() { 
     var $this = $(this); 
     var viewport = $(window); 

     $this.css({ 
      width: '170px', 
      height: '20px', 
      top: (viewport.height() - 20), 
      left: 0 
     }); 

     $this.find('div.rf-pp-shdw').hide(); 
     $this.find('div.rf-pp-cnt-scrlr').hide(); 
    }    
})(jQuery); 

。これはjQueryオブジェクト自体を参照するためのもので、新しい関数にアクセスすることが可能です。

あなたがなど元のサイズに復元することができるようにするためにそれらを拡張する必要がありますので、上記提供される機能は、コンセプトだけの証拠..です