oa.page = {
layout: $('<div></div>').appendTo(oa.dom.tabs.tabPanel),
layoutCenter: null,
/*layout布局*/
initLayout: function () {
this.layout.layout({
fit: true
});
this.layout.layout('add', {
border: false,
region: 'center'
});
oa.page.layoutCenter = this.layout.layout('panel', 'center');
this.layoutCenter.css({position: 'relative'});
},
initPanels: function () {
var panelData = [
{id: 'ct', col: 1, cls: 'theme-panel-green', hidden: false, title: '春光明媚'},
{id: 'xt', col: 2, cls: 'theme-panel-red', hidden: false, title: '夏日炎炎'},
{id: 'qt', col: 1, cls: 'theme-panel-blue', hidden: false, title: '秋高气爽'},
{id: 'dt', col: 1, cls: 'theme-panel-orange', hidden: false, title: '冬雪皑皑'}
];
var panelOpts = {height: 260, width: 30, left: 2.5, top: 0, col: 0};
var $panel;
$.each(panelData, function (idx, data) {
if (!data.hidden) {
/*当超过3列就换行*/
panelOpts.col += data.col;
/*panel面板的宽*/
var width = data.col * panelOpts.width + (data.col - 1) * 2.5;
$panel = $('<div></div>').appendTo(oa.page.layoutCenter)
.panel({
border: true,
cls: data.cls,
col: data.col,
height: panelOpts.height,
width: width + '%',
hidden: data.hidden,
id: data.id,
style: {position: 'absolute', left: panelOpts.left + '%', top: panelOpts.top},
title: data.title
});
panelOpts.left = panelOpts.col % 3 === 0 ? 2.5 : width + panelOpts.left + 2.5;
panelOpts.top += panelOpts.col % 3 === 0 ? panelOpts.height + 25 : 0;
}
});
}
};
oa.page.initLayout();
oa.page.initPanels();
布局展示