Saturday, November 14, 2009

Disabling Tabs in a dijit.layout.TabContainer

I've started using tab containers a little more recently. Looking through the dojocampus articles and dojo api docs, it looks like there isn't an API for disabling clicks on a particular tab. I'm not sure why this is the case - perhaps it has something to do with accessibility (I've always had intentions of learning more about accessibility on the web, but I've never really had the time)

At any rate, here's a quick and simple solution to disabling tabs in a tab container:
dojo.forEach(dijit.byId("myTabContainer").tablist.getChildren(), dojo.hitch(this, function(item, index, array) {
dojo.attr(item, "disabled", true);
item.onClick = function() {};
}));

Unfortunately, there doesn't seem to be a simple way to re-enable these clicks. Also, it'd be really sweet if you could simply hide some of the tabs in a tab container, but it sounds like you can only add/remove them.

4 comments:

  1. HI SEAN,
    Though i completely agree with your soultion and also understand that there are currently no support available for dojo release 1.3.2 for disabled tab container, but you may still have a look around this solution which proved to be handy

    ReplyDelete
  2. http://old.nabble.com/How-to-disable-a-tab-in-a-tabcontainer-td28975935.html

    ReplyDelete
  3. Thanks for the heads up @dev - must take a look at that solution as an alternative.

    ReplyDelete
  4. again, thanks for saving my day,. i created additional line to buffer the original onclick event before replace it with customized - disabled handler - which is an empty function, so we can restore it back on re enabling the tab button :

    if (!tabbtn.get('buffonclick')) {
    tabbtn.set('buffonclick', tabbtn.onClick);
    }

    p.s
    tabbtn - the tab button
    'buffonclick' = buffer on click

    ReplyDelete