3.2.0

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.)
June 28,

This topic is archived.

See also:


Back to support forum