0

Estoy intentando hacer que los Splitter de Primefaces se puedan colapsar y expandir como si fueran el componente AccordionPanel ya que este último componente sólo permite colapsar hacia arriba y hacia abajo, no permite montarlo para que se colapse hacia los laterales, y yo necesito una estructura como la que pongo en el código en la que se puede redimensionar los paneles hacia los lados o hacia arriba y hacia abajo, además de que se puedan colapsar o expandir.

He estado mirando la documentación de Primefaces del componente Splitter y sólo he encontrado que tiene un evento ajax que es resizeEnd pero no sé cómo me podría ayudar ese evento, he hecho búsquedas por internet y no he encontrado nada que me pueda ayudar.

Cualquier ayuda se agradece

<div class="card">
    <h5>Nested</h5>
    <p:splitter style="height: 700px; padding:5px;" class="ui-g-12" styleClass="p-mb-5">
        <p:splitterPanel id="sp_filtro" styleClass="p-d-flex p-ai-center p-jc-center" size="12" style="overflow: auto;">
            Filtros
        </p:splitterPanel>
        <p:splitterPanel size="88"  minSize="88" style="overflow: auto;">
            <p:splitter layout="vertical">
                <p:splitterPanel id="sp_botones" styleClass="p-d-flex p-ai-center p-jc-center" size="11" style="overflow: auto;">
                    Botones
                </p:splitterPanel>
                <p:splitterPanel size="89" minSize="83" style="overflow: auto;">
                    <p:splitter>
                        <p:splitterPanel id="sp_envios" styleClass="p-d-flex p-ai-center p-jc-center" style="overflow: auto;">
                            Tabla 1
                        </p:splitterPanel>
                        <p:splitterPanel id="sp_contenedores" styleClass="p-d-flex p-ai-center p-jc-center" style="overflow: auto;">
                            Tabla 2
                        </p:splitterPanel>
                    </p:splitter>
                </p:splitterPanel>
            </p:splitter>
        </p:splitterPanel>
    </p:splitter>
</div>  

                

1 respuesta 1

0

Después de probar algunas cosas he conseguido hacer el comportamiento que necesitaba, al final he tenido que recurrir a jQuery para conseguirlo.

Para ello he tenido que añadir la funcionalidad de doble click a la clase .ui-splitter-gutter que es la clase de las barras separadoras del Splitter y obtener el panel a colapsar o expandir mediante la función prev().

Una vez obtenido el panel correspondiente mediante la función toggle() expandirá o colapsara dicho panel, además también he puesto que se muestren tooltips según el estado para saber que ocurrirá al hacer el doble click.

Esperaba conseguirlo mediante primefaces pero es la única solución a la que he podido llegar, espero que le sirva a alguien de ayuda y si a alguien se le ocurre otra forma bienvenida es.

$(document).ready(function () 
{   
    $(".ui-splitter-gutter").attr('title', 'ocultar con doble click');
    $(".ui-splitter-gutter").on('dblclick', function(event){ 
        var $panel =$(event.currentTarget).prev();
    
        var visible = $panel.toggle().is(":visible");
        
        if(visible){
            $(event.currentTarget).attr('title', 'ocultar con doble click');
        }
        else{
            $(event.currentTarget).attr('title', 'mostrar con doble click');
        }
    });
});

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.