ASPrunnerPro32x32     ASPRunnerPro manual


How to work with tabs

<< Click to Display Table of Contents >>

Navigation:  Advanced topics > Programming topics > Javascript API > Examples >

ASPrunnerPro32x32     ASPRunnerPro manual


How to work with tabs

 

yellowbulbNote: The following example works with old, non-Bootstrap layouts. For Bootstrap layouts use Tabs/Sections API
 
To manipulate a tab, you need to know the tab group name. To find this name proceed to the Visual Editor page, select the page with tab, make tab group selected and switch to the HTML mode. Tab group name will be highlighted (e.g. {$TabGroup New_tab1}). Here New_tab1 is the tab group name. Now paste it to the code below.

Besides the tab group name you need to know the tab index. Tab index is zero based: 0 - the first tab, 1 - the second tab etc. Now you can use one of the following code samples.

yellowbulbNote: Change the values listed in red to match your specific needs.

1. To make the tab selected, use the following code in Javascript OnLoad event:

// make second tab selected

var tab = "New_tab1",

  myTabs = pageObj.tabs['tabGroup_'+tab];

 

myTabs.selectChild(1);

2. To make the tab disabled, use the following code in Javascript OnLoad event:

var tab = "New_tab1",

  prevSelected = 0,    

  myTabs = pageObj.tabs["tabGroup_" + tab];

 

myTabs.item(1).disable();  

 

myTabs.on('click', function(e) {

  if ( this.get("selection").get("disabled") ) {

     myTabs.selectChild( prevSelected );

  }

});

 

myTabs.on('selectionChange', function(e) {

  prevSelected = e.prevVal.get('index');

});

3. To remove the tab, use the following code in Javascript OnLoad event:

var tab = "New_tab1",

  myTabs = pageObj.tabs['tabGroup_'+tab],

  tabIndex = 1,   // 0 means first tab, 1 means second tab etc

  savedTab;

 

if ( myTabs.item(tabIndex) ) {    

  savedTab = myTabs.item(tabIndex).getAttrs();

  myTabs.remove(tabIndex);

}

4. To hide the tab, use the following code in Javascript OnLoad event:

var tab = "New_tab1",

  myTabs = pageObj.tabs['tabGroup_'+tab],

  tabIndex = 1,   // 0 means first tab, 1 means second tab etc

  tabToHide = myTabs.item( tabIndex ),

  siblingTab;

 

tabToHide.get("boundingBox").hide();

tabToHide.hide();

 

if ( tabToHide.get('selection') ) {

  siblingTab = tabToHide.next() || tabToHide.previous()

 

  if ( siblingTab && siblingTab.get('visible') ) {

     myTabs.selectChild( siblingTab.get("index") );

  } else {

     tabToHide.set('selection', 0);

  }

}

5. To show the hidden tab, use the following code in Javascript OnLoad event:

var tab = "New_tab1",

  myTabs = pageObj.tabs['tabGroup_' + tab],

  tabIndex = 1,   // 0 means first tab, 1 means second tab etc

  tabToShow = myTabs.item( tabIndex );

 

tabToShow .get("boundingBox").show();

myTabs.selectChild( tabIndex );

See also

Javascript API