w2layout.set

set(type, panel)

指定したパネルを検索し、指定したオブジェクトでパネルを拡張します。

type: string

パネル名。

panel: object

追加するパネルプロパティ。

説明

第1引数のtypeは、パネルの名前を指定します。 名前は以下を指定することができます。

• top
• left
• main
• right
• preview
• bottom

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

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

パネルはobjectでは置き換わるのではなく、 $.ectend()で拡張されることに注意してください。 以下はパネルのオブジェクトを拡張する例です。

$('#layout').w2layout({
    name    : 'layout',
    panels  : [
        { type: 'top', size: 40 },
        { type: 'main', content: 'This is main panel' },
        { type: 'preview', size: 200, hidden: true }
    ]
});

w2ui['layout'].set('preview', { resizable: true, minSize: 100 });

デモ

レイアウトをクリックすると、previewパネルを拡張します。
previewパネルの高さが100pxになり、リサイズ可能になります。

JavaScript

$('#layout').w2layout({
    name    : 'mylayout',
    panels  : [
        { type: 'top', content: 'top', size: 40 },
        { type: 'main', content: 'This is main panel' },
        { type: 'preview', content: 'preview', size: 50 }
    ]
});
$('#layout').on('click', function() {
    w2ui['mylayout'].set('preview', { resizable: true, minSize: 100 });
});