Array of panel objects.
Array, default = []
The code below shows the structure of the panel object: panel: { type : null, // type of the panel can be: left, right, top, bottom, preview title : '', // title for the panel size : 100, // width or height of the panel depending on panel type minSize : 20, // minimum size of the panel in px when it is resized maxSize : false, // if a number, then it defined maximum size of the panel hidden : false, // indicates if panel is hidden resizable : false, // indicates if panel is resizable overflow : 'auto', // overflow property of the panel, can have same values as similar CSS property style : '', // additional css styles for the panel content : '', // content of the pane, can be a string or an object with .render(box) method width : null, // width of the panel, read only height : null, // height of the panel, read only tabs : null, // w2tabs object for the panel toolbar : null, // w2toolbar object for the panel show : { // indicates what sections are shown tabs : false, toolbar : false }, // events onRefresh : null, // refresh event for the panel onResizing : null, // resizing event for the panel onShow : null, // show event for the panel onHide : null // hide event for the panel } If you change this array during run-time you will need to call .refresh() method to update layout on the screen. It is not recommended to change this array after the object has been created. You should use .set() method to change panels dynamically, which will refresh the panel you changed. $('#layout').w2layout({ name : 'layout', panels : [ { type: 'top', size: 40 }, { type: 'preview', size: 200 } ] }); w2ui['layout'].set('top', { size: 50 }); As of version 1.2+ you can add w2tabs or/and w2toolbar object at the top of the panel. $('#layout').w2layout({ name : 'layout', panels : [ { type: 'top', size: 40 }, { type: 'main', tabs: { active: 'tab1', tabs: [ { id: 'tab1', caption: 'Tab 1' }, { id: 'tab2', caption: 'Tab 2' }, { id: 'tab3', caption: 'Tab 3' }, { id: 'tab4', caption: 'Tab 4' } ], onClick: function (id, data) { console.log(id); } } }, { type: 'preview', size: 200 } ] }); As of version 1.5+ you can set negative size of left and right panel. If size is negative, the panel will take all available size minus the size you specified. In other words the size of the panel (only left or right) will be 100% of available size - defined size of the panel.