<!DOCTYPE html>
<html>
<head>
<title>吹泡泡的魚-主页</title>
<link rel="stylesheet" type="text/css" href="js/jquery-easyui/themes/gray/easyui.css">
<script type="text/javascript" src="js/jquery-easyui/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery-easyui/jquery.easyui.min.js"></script>
</head>
<body>
<h2>添加、删除、折叠、展开布局</h2>
<p>单击下面的按钮操作布局区域面板</p>
<div style="margin:20px 0;">
<span>选择区域面板:</span>
<select id="region">
<option value="north">North</option>
<option value="south">South</option>
<option value="east">East</option>
<option value="west">West</option>
</select>
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="addPanel()">添加</a>
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="removePanel()">删除</a>
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="collapseExpandPanel()">折叠/展开</a>
</div>
<div id="cc" class="easyui-layout" style="width:700px;height:350px;">
<div data-options="region:'north'" style="height:50px"></div>
<div data-options="region:'south',split:true" style="height:50px;"></div>
<div data-options="region:'east',split:true" title="East" style="width:100px;"></div>
<div data-options="region:'west',split:true" title="West" style="width:100px;"></div>
<div data-options="region:'center',title:'Center'"></div>
</div>
<script type="text/javascript">
function addPanel(){
var region = $('#region').val();
var options = {
region: region
};
if (region=='north' || region=='south'){
options.height = 50;
} else {
options.width = 100;
options.split = true;
options.title = $('#region option:selected').text();
}
$('#cc').layout('add', options);
}
function removePanel(){
$('#cc').layout('remove', $('#region').val());
}
function collapseExpandPanel(){
var p=$("#cc").layout("panel", $('#region').val())[0];
if(p){
p = p.clientWidth;
if (p > 0){
//折叠
$('#cc').layout('collapse', $('#region').val());
}else{
//展开
$('#cc').layout('expand', $('#region').val());
}
}else{
alert("此区域面板不存在");
}
}
</script>
</body>
</html>
