w2layout.assignToolbar

assignToolbar(panel, toolbar)

パネルにw2toolbarを割り当てます。

panel: string

パネル名。

toolbar: string, object

割り当てるツールバー。

説明

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

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

オブジェクト作成時にToolbarオブジェクトをパネルに設定するには、 以下のように指定します。

$('#layout').w2layout({
    name    : 'layout',
    panels  : [
        { type: 'top', size: 40 },
        { type: 'main', content: 'This is main panel',
            toolbar: {
                items: [
                    { type: 'button', caption: 'Some button'}
                ],
                onClick: function (event) {
                    ...
                }
            }
        },
        { type: 'preview', size: 200 }
    ]
});

しかし、既にw2toolbarを生成済みの場合、 assignToolbarメソッドを使ってパネルに割り当てることができます。 もし第2引数のtoolbarが文字列の場合、 グローバルのw2uiオブジェクトからToolbarを探します。

w2ui['layout'].assignToolbar('main', 'myToolbar');

デモ

mainパネルに追加されたツールバーのボタンをクリックすると、 押されたボタンに応じてconsole.logを出力します。

JavaScript

$('#layout').w2layout({
    name    : 'mylayout',
    panels  : [
        { type: 'top', size: 40 },
        { type: 'main', content: 'This is main panel',
            toolbar: {
                items: [
                    { type: 'button', caption: '1st button'},
                    { type: 'button', caption: '2nd button'},
                    { type: 'button', caption: '3rd button'}
                ],
                onClick: function (event) {
                    console.log(event.item.text + ' is clicked')
                }
            }
        },
    ]
});