如何在 Rich: 弹出面板窗口中添加最小化和最大化按钮答案

【问题标题】：How to add minimize and maximize button in rich: popup panel window如何在 Rich: 弹出面板窗口中添加最小化和最大化按钮
【发布时间】：2012-01-25 12:22:00
【问题描述】：

如下图，如何在richface弹出面板的页面右上角添加最小化和最大化按钮？

使用下面的代码，我们可以在右上角添加“X”，点击它，弹出窗口就会关闭。

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

请给我建议。

【问题讨论】：

标签： jsf-2 richfaces popuppanel

【解决方案1】：

可以使用两个自定义函数来扩展 jQuery，这些函数将执行最大化/最小化。

(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);

你可以将它与richfaces 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。这是为了引用 jQuery 对象本身，因此可以访问新函数。

上面提供的功能只是概念证明，因此您必须扩展它们才能恢复到原始大小等。

【讨论】：

嘿，谢谢，但我们现在不应该使用 JQuery。是否有任何其他方式，如 javascript 或 JSF 函数可以带来这些选项。
@JaikratSingh 如果您使用 Richfaces，那么您就拥有开箱即用的 jQuery。否则，您可以创建与将 cdiv 作为参数的常规 js 函数相同的函数。 cdiv 将是一个 Jquery 对象，因此您必须从中提取 DOM 对象。请参阅 jQuery 文档了解如何操作。