W3ui 레이아웃 예제

1 개요

jQuery 플러그인 w3ui 레이아웃 예제

jQuery 플러그인 w3ui 시작하기

<link rel="stylesheet" href="//w2ui.com/src/w2ui-1.3.min.css" />
<script src="//code.jquery.com/jquery-latest.min.js"></script>
<script src="//w2ui.com/src/w2ui-1.3.min.js"></script>
<script>
$(function () {
    var pstyle = 'background-color: #F5F6F7; border: 1px solid #dfdfdf; padding: 5px;';
    $('#layout').w2layout({
        name: 'layout',
        panels: [
            { type: 'top',  size: 50, resizable: true, style: pstyle, content: '상단' },
            { type: 'left', size: 200, resizable: true, style: pstyle, content: '왼쪽' },
            { type: 'main', style: pstyle, content: '메인' },
            { type: 'preview', size: '50%', resizable: true, style: pstyle, content: '미리보기' },
            { type: 'right', size: 200, resizable: true, style: pstyle, content: '오른쪽' },
            { type: 'bottom', size: 50, resizable: true, style: pstyle, content: '하단' }
        ]
    });
});
</script>
 
<div id="layout" style="height: 400px;"></div>

2 같이 보기

• jQuery 플러그인 UI Layout

3 참고

• http://w2ui.com/web/demo