w2layout

by Serkan Yersen

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/w2ui/1.4.3/w2ui.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/w2ui/1.4.3/w2ui.min.js"></script>
<div id="layout" style="height: 90%;" name="layout" class="w2ui-layout">
</div>

CSS

body, html {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}

JavaScript

var pstyle = 'background-color: #F5F6F7; border: 1px solid #dfdfdf;';
$('#layout').w2layout({
  name: 'layout',
  panels: [
    { type: 'top',  size: 50, resizable: false, style: pstyle, content: '' },
    { type: 'left', size: 200, resizable: true, style: pstyle, content: '' },
    { type: 'main', style: pstyle, content: 'main' },
  ]
});

var pstyle = 'background-color: #F0F0C1; border: 1px solid #dfdfdf;';
$().w2layout({
  name: 'layout2',
  panels: [

    { type: 'main', style: pstyle, content: 'main' },
{ type: 'right', size: 80, resizable: true, style: pstyle, content: 'right' },
  ]
});

w2ui.layout.content('main', w2ui.layout2);
w2ui.layout2.content('main', 'fff')