YUI3 - Modification of Tabs

305 Views Asked by At

I am experimenting with the YUI3 TabView component. Using this example, how is it possible to disable one of the tabs (maybe using the Tab object)? I tried to find different examples but the only few that I found only showed how to actually create the tabs.

UPDATE:

I tried the following:

tabview.item(1).disable();

but the tab is still clickable and stays in normal state although the class 'yui-tab-disabled' is added to the li-element.

UPDATE 2:

I managed to disable the second tab by using the following code:

tabview.item(1)
    .disable()
    .on('selectedChange', function () {
        return false;
    });

The question now is: How to enable the tab again?

1

There are 1 best solutions below

0
On

Solved! In order for the disabling and enabling of fields to work, one must include the following code snippet after the TabView declaration:

tabview.on('tab:click', function (e) {
    //  Prevent the browser from navigating to the URL specified by the 
    //  anchor's href attribute.
    if (e.target.get('disabled')) {
        e.preventDefault();
        e.domEvent.preventDefault();
    }
});

A full example can be viewed here.