概略

更新日: 2018-09-07

w2layoutオブジェクトは、リサイズ可能なパネルを最大6個まで使用して、レイアウトを生成することができます。パネルはtop、left、main、preview、right、bottomがあります。デフォルトでは全てのパネルを生成しますが、定義したパネルだけが表示されます。 mainパネルは常に表示されます。

例

HTML

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="http://w2ui.com/src/w2ui-1.4.min.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script type="text/javascript" src="http://w2ui.com/src/w2ui-1.4.min.js"></script>
</head>
<body>
    <div id="myLayout" style="height: 400px"></div>
</body>
<script>
$(function () {
    $('#myLayout').w2layout({
        name: 'mylayout',
        panels: [
            { type: 'top', size: 60 },
            { type: 'left', size: 150, resizable: true },
            { type: 'right', size: 150, resizable: true }
        ]
    });
});
</script>
</html>

パネルを追加したり、削除するのは簡単です。 HTML等を表示することができます。 w2layoutオブジェクトはウィンドウのresizeイベントを追加し、ボックスに合わせて自動的にパネルの高さと幅を変更します。

w2ui['mylayout'].show('right');

デモ

Layoutを表示します。

JavaScript

$('#layout').w2layout({
    name: 'mylayout',
    panels: [
        { type: 'top', content: 'top', size: 60 },
        { type: 'left', content: 'left', size: 150, resizable: true },
        { type: 'right', content: 'right', size: 150, resizable: true }
    ]
});

HTML

<div id="layout" style="height: 400px"></div>

このコンテンツはvitmalinaによるw2ui.layoutドキュメントを翻訳/改変したものです。