Question

我需要执行两个按钮p：layoutUnit Collapse＆amp;分别展开。

我尝试了 onclick =“layoutWdgt.toggle（'west'）”，但它切换了p：layoutUnit。

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

我想在客户端而非服务器端执行此操作，因此我不想使用折叠事件。

我正在使用primefaces 3.3.3。

感谢。

Answer 1

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

 <?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>

Answer 2

Primefaces＆gt; 5

＆＃13;

<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>

＆＃13;

Primefaces，如何使用一些脚本或jquery函数来折叠layoutUnit

2 个答案: