w2layout.panels

パネルオブジェクトの配列です。

Array, default = []

パネルオブジェクトの構造は以下の通りです。

panel: {
    type        : null,    // パネルのタイプ(left、right、top、bottom、previewを指定することができます。)
    title       : '',      // パネルのタイトル
    size        : 100,     // 幅または高さ。パネルのタイプによって変わります。
    minSize     : 20,      // リサイズした時の最小サイズ(px)
    maxSize     : false,   // 数値の場合は、パネルの最大サイズ
    hidden      : false,   // パネルを非表示にするかどうかを指定します。
    resizable   : false,   // パネルのリサイズの可否を指定します。
    overflow    : 'auto',  // CSSのoverflowに似たプロパティです。overflowと同じ値を指定することができます。
    style       : '',      // パネルに追加CSSを指定します。
    content     : '',      // パネル内に表示する文字または .render(box) を持ったオブジェクトを指定することができます。
    width       : null,    // パネルの幅。読み取り専用。
    height      : null,    // パネルの高さ。読み取り専用。
    tabs        : null,    // パネルにw2tabsを指定します。
    toolbar     : null,    // パネルにw2toolbarを指定します。
    show : {               // 表示されている項目を示します。
        tabs    : false,
        toolbar : false
    },
    // events
    onRefresh   : null,    // パネルの更新イベントです。
    onResizing  : null,    // パネルのリサイズイベントです。
    onShow      : null,    // パネルの表示イベントです。
    onHide      : null     // パネルの非表示イベントです。
}

この配列をランタイムで変更する場合、w2utils.refresh()メソッドを呼び出して、更新する必要があります。 オブジェクト生成後にこの配列の変更はお勧めしません。 パネルを動的に変更するには、.set()メソッドを使うことで、変更したパネルが更新されます。

$('#layout').w2layout({
    name    : 'layout',
    panels  : [
        { type: 'top', size: 40 },
        { type: 'preview', size: 200 }
    ]
});

w2ui['layout'].set('top', { size: 50 });

ver1.2以上の場合、パネルの上部にw2tabsやw2toolbarを含めることができます。

$('#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 }
    ]
});

ver1.5以上の場合、leftパネルとrightパネルには マイナスサイズを指定することができます。 サイズがマイナスの場合、全体のサイズから指定したマイナス分を引いた値がサイズになります。 即ち、「100% - 定義したサイズ」(leftパネルかrightパネルのどちらか一方のみ)になります。

デモ

leftパネルのサイズにマイナス値を入れています。

JavaScript

$('#layout').w2layout({
    name    : 'mylayout',
    panels  : [
        { type: 'top', size: 40 },
        { type: 'preview', size: 200 },
        { type: 'left', size: '-800' },
    ]
});

デモ2

mainパネルにw2tabを入れています。

JavaScript

$('#layout').w2layout({
    name    : 'mylayout',
    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 }
    ]
});