w2layout.toggleTabs

toggleTabs(type)

パネルのタブの表示/非表示を切り替えます。

type: string

パネル名。

説明

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

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

パネルのタブが隠れている時に.toggleTabs()を呼び出すと.showTabs()メソッドを呼び出し、 表示されている時に.toggleTabs()を呼び出すと、.hideTabs()メソッドを呼び出します。

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

$('#layout').w2layout({
    name    : 'layout',
    panels  : [
        { type: 'top', size: 40 },
        { type: 'main', content: 'This is main panel', 
            tabs: {
                active: 'tab2',
                tabs: [
                    { id: 'tab1', caption: 'Tab 1' },
                    { id: 'tab2', caption: 'Tab 2' },
                    { id: 'tab3', caption: 'Tab 3' }
                ],
                onClick: function (event) {
                    console.log('event');
                }
            } 
        },
        { type: 'preview', size: 200 }
    ]
});

タブの表示/非表示を切り替えます。

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

デモ

レイアウトをクリックする度に、mainパネルのタブを表示/非表示します。

JavaScript

$('#layout').w2layout({
    name    : 'mylayout',
    panels  : [
        { type: 'top', content: 'top', size: 40 },
        { type: 'main', content: 'This is main panel',
            tabs: {
                active: 'tab2',
                tabs: [
                    { id: 'tab1', caption: 'Tab 1', },
                    { id: 'tab2', caption: 'Tab 2', },
                    { id: 'tab3', caption: 'Tab 3', }
                ],
            },
        },
    ]
});
$('#layout').on('click', function() {
    w2ui['mylayout'].toggleTabs('main');
});