w2layout.toggleToolbar

toggleToolbar(type)

パネルのツールバーの表示/非表示を切り替えます。

type: string

パネル名。

説明

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

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

パネルのツールバーが隠れている時に.toggleToolbar()を呼び出すと.showToolbar()メソッドを呼び出し、 表示されている時に.toggleToolbar()を呼び出すと、.hideToolbar()メソッドを呼び出します。

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

$('#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'].toggleToolbar('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() {
    w2ui['mylayout'].toggleToolbar('main');
});