自定义模拟easyui的layout面板的折叠或者展开

如图:右上角加了一个伸缩的图标,点击该按钮会自动控制中部面板以自定义的高度显示:

效果:点击向上按钮,因为中部面板的高度是自动计算的,所以这里增加了south南部面板的高度,于是中部面板的高度自动缩小,这里中部面板完全隐藏不见:

点击向下按钮则回复原样.

html代码:

在"操作"按钮的后面增加如下代码:

<div id="tabsTool" >
	<!-- width 表示距离右侧的宽度 -->
	<div style="width:10px;text-align: right;line-height: 24px;position:absolute;left: 85px">
		<div class="panel-tool">
			<a class="panel-tool-collapse" href="javascript:void(0)" style="display: none;"></a>
			<a href="javascript:void(0)" class="layout-button-up" id="upBtnTree" ></a>
			<a href="javascript:void(0)" class="layout-button-down" id="downBtnTree" style="display: none;"></a>
		</div>
	</div>
</div>

JS代码:

$(function({
   $('#downBtnTree').click(function(){
		 $('#downBtnTree').hide();
		 $('#upBtnTree').show();
		 setHeight('240','#jgxxLayout','south');//jgxxLayout表示整个页面所在的layout
  });
  $('#upBtnTree').click(function(){
		 $('#downBtnTree').show();
		 $('#upBtnTree').hide();
		 setHeight('480','#jgxxLayout','south');
  });
}))

function setHeight(num,layoutId,p){
    var layout = $(layoutId);
    var panel = layout.layout('panel',p);  //get the north panel
    var oldHeight = panel.panel('panel').outerHeight(); //获得north panel 的原高度
    panel.panel('resize',{height:num}); //设置north panel 新高度
    var newHeight=panel.panel('panel').outerHeight();
    layout.layout('resize',{height:layout.height()+newHeight-oldHeight});  //重新设置整个布局的高度
}