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

我有两个按钮需要执行p:分别扩大。

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

我需要的是两个不同的函数，一个用于展开，另一个用于折叠p:layoutUnit。

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

我使用的是primefaces 3.3.3.

谢谢。

我就是这样解决这个问题的

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

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>

相关内容

最新更新

热门标签：