如图:右上角加了一个伸缩的图标,点击该按钮会自动控制中部面板以自定义的高度显示:
效果:点击向上按钮,因为中部面板的高度是自动计算的,所以这里增加了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}); //重新设置整个布局的高度
}