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

本文介绍了Primefaces，如何使用某些脚本或jquery函数折叠layoutUnit的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有两个按钮需要在其上执行p:layoutUnit Collapse&分别展开.

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

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

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

我需要两个不同的函数，一个扩展，另一个折叠p:layoutUnit.

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

我想在客户端而不是服务器端执行此操作，所以我不想使用 collapsed 事件.

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

我正在使用Primefaces 3.3.3

I'm using primefaces 3.3.3.

谢谢.

推荐答案

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

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>

这篇关于Primefaces，如何使用某些脚本或jquery函数折叠layoutUnit的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！