1

我有两个按钮，我需要分别执行 p:layoutUnit Collapse & Expand 。

我试过onclick="layoutWdgt.toggle('west')"，但它切换了 p:layoutUnit。

我需要的是两个不同的功能，一个是展开，另一个是折叠 p:layoutUnit。

我想在客户端而不是服务器端这样做，所以我不想使用折叠事件。

我正在使用 primefaces 3.3.3。

谢谢。

4

2 回答 2

2

这就是我设法解决问题的方法..

 <?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>
于 2013-06-05T12:46:31.097 回答
0

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>

于 2017-01-18T11:51:56.600 回答