:: Forum >>

Disabled Tabs

Expanding more on Jim Hunter's code (http://www.activewidgets.com/javascript.forum.11050.10/disabling-tabs.html)

The keyboard arrows can be used to activate the tabs and this code will handle the missing enhancements.

Styles:
.aw-extension-tabs-enabled {color:black;}
.aw-extension-tabs-disabled {color:gray; background-position: 100% 0px!important;}
.aw-extension-tabs-disabled .aw-item-box {color:gray; background-position: 0px -50px!important;}


Code:
AW.UI.TabsEnhanced = AW.UI.Tabs.subclass();
AW.UI.TabsEnhanced.create = function() {
var obj = this.prototype;
obj.isEnabled = function(col) {
if (typeof this.getItemTemplate(col).getAttribute('isEnabled') == 'undefined')
return true
else
return (this.getItemTemplate(col).getAttribute('isEnabled'))
}
obj.setTabEnabled = function(tabIndex, enabled) {
if (enabled == true) {
this.getItemTemplate(tabIndex).setAttribute('isEnabled', true);
this.getItemTemplate(tabIndex).setClass("extension", "tabs-enabled")
} else {
this.getItemTemplate(tabIndex).setAttribute('isEnabled', false);
this.getItemTemplate(tabIndex).setClass("extension", "tabs-disabled")
}
}
obj.onItemClicked = function(event, index) {
if (this.isEnabled(index) == false)
return true;
}
obj.onKeyRight = function(event) {
    if (this.isEnabled(Number(this.getSelectedItems())+1) == false)
return true;
}
obj.onKeyLeft = function(event) {
    if (this.isEnabled(Number(this.getSelectedItems())-1) == false)
return true;
}
}


Usage:
a = new AW.UI.TabsEnhanced;
a.setItemText(["one","two","three"]);
a.setItemCount(3);
a.setTabEnabled(1, false);
document.write(a);
Miki (AMoo-Miki Inc.)
Thursday, June 28, 2007

This topic is archived.


Back to support forum

Forum search