Contents

 
Home
ASPRunner Professional 8.1 manual
Prev Page Next Page
 
 

How to work with tabs

 

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:

// disable second tab

var tab = "New_tab1",

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

  selectedPanelClass = "yui3-tab-panel-selected";

 

myTabs.item(1).disable();  

 

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

if ( e.newVal.get('disabled') ) {

     $(e.newVal.get("srcNode").getDOMNode()).closest('li').removeClass('selected');

      myTabs.selectChild( e.prevVal.get('index') );

 

      setTimeout( function(){

         $(e.newVal.get("panelNode").getDOMNode()).removeClass(selectedPanelClass);

      }, 0);    

  }

});

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

Converted from CHM to HTML with chm2web Standard 2.85 (unicode)