Primefaces，如何使用某些脚本或jquery函数折叠layoutUnit [英] Primefaces, how to collapse layoutUnit using some script or jquery function
本文介绍了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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
