Primefaces, how to collapse layoutUnit using some script or jquery function

问题

I've two buttons on which I need to perform p:layoutUnit Collapse & Expand respectively.

I tried onclick="layoutWdgt.toggle('west')", but it toggles the p:layoutUnit.

What I need is two different functions, one expand and other to collapse p:layoutUnit.

I want to do it on client side not server side so I don't want to use collapsed event.

I'm using primefaces 3.3.3.

Thanks.

回答1:

This is how i managed to solve the issue..

 <?xml version='1.0' encoding='UTF-8' ?>
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
  xmlns:p="http://primefaces.org/ui"
  xmlns:h="http://java.sun.com/jsf/html"
  xmlns:f="http://java.sun.com/jsf/core">
<f:view contentType="text/html">
    <h:head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <script type="text/javascript">
            var colapsed = false;
            function doCollapsed(){
                if(!colapsed){
                    layoutV.toggle('west');
                }
            }

            function doExpand(){
                if(colapsed){
                    layoutV.toggle('west');
                }
            }

            function toggleLayout(){
                if(colapsed){
                    colapsed = false;
                } else {
                    colapsed = true;
                }
            }
        </script>
    </h:head>

    <h:body  >

        <p:layout fullPage="true" styleClass="top" widgetVar="layoutV" id="layout">
            <p:ajax event="toggle" oncomplete="toggleLayout();" />

            <p:layoutUnit id="north" position="north" size="100" gutter="0" >
                <h:form id="layoutform-top" prependId="false">
                    Collapse and Expand layout using some script.
                </h:form>
            </p:layoutUnit>




            <p:layoutUnit   id="left" position="west" size="270"  header="Menu" resizable="false" gutter="0"  collapsible="true"  >

            </p:layoutUnit>


            <p:layoutUnit position="center"  gutter="0"  >
                <h:form id="layoutform-center" prependId="false">

                    <p:commandButton value="Expand West Layout" onclick="doExpand();"/>
                    <p:commandButton value="Collapse West Layout" onclick="doCollapsed();"/>

                </h:form>
            </p:layoutUnit>

        </p:layout>

    </h:body>

</f:view>

</html>

回答2:

Primefaces > 5

<script type="text/javascript">
            var colapsed = false;
            function doCollapsed(){
                if(!colapsed){
                	PF('layoutGeral').toggle('west');
                }
            }

            function doExpand(){
                if(colapsed){
                	PF('layoutGeral').toggle('west');
                }
            }

            function toggleLayout(){
                if(colapsed){
                    colapsed = false;
                } else {
                    colapsed = true;
                }
            }
     </script>

来源：https://stackoverflow.com/questions/16853308/primefaces-how-to-collapse-layoutunit-using-some-script-or-jquery-function

标签

jquery

jsf

primefaces