Easyui 生成layout
var $tabs;
var $body;
var $south;
function appendLayout(title, href) {
if (!$body)
$body = $(document.body);
if (!$body.hasClass('layout')) {
var $centerHtml = $("<div>", {
"id": "center",
"style": "height:'100%',overflow:auto",
"data-options": "region:'center',split:true,collapsible:true"
});
$body.children().wrapAll($centerHtml); // 页面上的内容用 easyui layout center 包住
$tabs = $("<div>", {
"id": 'tabs',
"data-options": "tools:'#tab-tools'"
});
$south = $("<div>", {
"id": "south",
"style": "height:280px;",
"data-options": "region:'south',split:true"
}).append($tabs);
var aBtn = $("<a>", {
'style': '',
"href": "javascript:void(0);",
'class': 'layout-button-down'
});
var tools = $("<div>", {
'id': 'tab-tools',
'class': 'panel-tool'
}).append(aBtn);
$body.append($south).append(tools).layout();
aBtn.on('click', function () {
closeLayout(true);
});
$tabs.tabs({
fit: true,
border: false,
onClose: function (title, index) {
var num = $(this).tabs('tabs').length;
if (num == 0)//所有的tab 都关闭时隐藏面板
{
closeLayout();
}
}
});
$south.data('isExpand', true);
}
addTab(title, 1, href, null);
}
function addTab(title, id, href, text) {
if (!$south.data('isExpand')) {
openLayout();
}
var key = title + "<a style='display:none'>" + id + "</a>"
if ($tabs.tabs('exists', key)) {
$tabs.tabs('select', key);
}
else {
var html;
if (text) {
html = text;
}
else {
html = '<iframe id="zlifm-' + id + '" src="' + href + '" width="100%" height="100%" class="main-content-itme" frameborder="0" style="border:0px; margin-bottom:-20px" />';
}
$tabs.tabs("add", { title: key, content: html, closable: true });
}
}
function closeAllTab() {
var tts = $tabs.tabs("tabs");
var arr = new Array();
for (var i = 0; i < tts.length; i++) {
arr.push(tts[i].panel("options").title);
}
for (var i = 0; i < arr.length; i++) {
$tabs.tabs("close", arr[i]);
}
}
//打开面板
function openLayout() {
if (!$south.data('isExpand'))
$body.layout('expand', 'south');
$south.data('isExpand', true);
}
//关闭面板
function closeLayout(close) {
var isExpand = $south.data('isExpand') || !!close;
if (isExpand)
$body.layout('collapse', 'south');
$south.data('isExpand', !isExpand);
}