@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<script src="~/Scripts/jquery-3.3.1.min.js"></script>
<script src="~/Scripts/jquery.easyui.min.js"></script>
<script src="~/Scripts/easyui-lang-zh_CN.js"></script>
<link href="~/Content/EasyUI/themes/icon.css" rel="stylesheet" />
<link href="~/Content/EasyUI/themes/default/easyui.css" rel="stylesheet" />
</head>
<body>
<h2>Add and Remove Layout</h2>
<p>Click the buttons below to add or remove region panel of layout.</p>
<div style="margin:20px 0;">
<span>Select Region Panel:</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" οnclick="addPanel()">Add</a>
<a href="javascript:void(0)" class="easyui-linkbutton" οnclick="removePanel()">Remove</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());
}
</script>
</body>
</html>
扫一扫
1157
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
