w2layout.showToolbar

showToolbar(type)

パネルのツールバーを表示します。

type: string

パネル名。

説明

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

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

レイアウトを以下のように指定した場合、

$('#layout').w2layout({
    name    : 'layout',
    panels  : [
        { type: 'top', size: 40 },
        { type: 'main', content: 'This is main panel', 
            toolbar: {
                items: [
                    { id: 'bt1', type: 'button', caption: 'Button 1', img: 'icon-page' },
                    { id: 'bt2', type: 'button', caption: 'Button 2', img: 'icon-page' },
                    { id: 'bt3', type: 'button', caption: 'Button 3', img: 'icon-page' }
                ],
                onClick: function (event) {
                    console.log('event');
                }
            } 
        },
        { type: 'preview', size: 200 }
    ]
});

ツールバーを隠します。

w2ui['layout'].hideToolbar('main');

または、ツールバーを表示します。

w2ui['layout'].showToolbar('main');

デモ

レイアウトをクリックすると、mainパネルのツールバーが隠れます。

JavaScript

$('#layout').w2layout({
    name    : 'mylayout',
    panels  : [
        { type: 'top', content: 'top', size: 40 },
        { type: 'main', content: 'This is main panel',
            hidden: true,
            toolbar: {
                items: [
                    { id: 'bt1', type: 'button', caption: 'Button 1', img: 'icon-page' },
                    { id: 'bt2', type: 'button', caption: 'Button 2', img: 'icon-page' },
                    { id: 'bt3', type: 'button', caption: 'Button 3', img: 'icon-page' }
                ],
            }
        },
    ]
});
$('#layout').on('click', function() {
    if (w2ui['mylayout'].get('main').show.toolbar) {
      w2ui['mylayout'].hideToolbar('main');
    } else {
      w2ui['mylayout'].showToolbar('main');
    }
});