Как добавить кнопку сворачивания и сворачивания в rich: всплывающее окно панели - PullRequest
Новая
       21

Как добавить кнопку сворачивания и сворачивания в rich: всплывающее окно панели

0 голосов
/ 25 января 2012

Как показано ниже, как мы можем добавить кнопку минимизации и максимизации в правом верхнем углу страницы во всплывающей панели richface?

Используя приведенный ниже код, мы можем добавить 'X' в верхний правый угол, и при щелчке по нему всплывающее окно закрывается. 

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

Пожалуйста, предложите мне.

1 Ответ

0 голосов
/ 25 января 2012

Можно расширить 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, чтобы можно было получить доступ к новым функциям.

Функции, представленные выше, являются лишь подтверждением концепции, поэтому вам придется расширить их, чтобы иметь возможность восстановить исходный размер и т. Д.

...