File: example/tabs.js

/*
*   @requires     http://api.webfan.de/api-d/4/js-api/library.js
*   @see          https://github.com/frdl/-Flow/tree/master/api-d/4/js-api/library.js
*/

var _id = Guid.newGuid(), html = '';
var Tabs = frdl.tabs.init({
		 outerDiv : 'window_main_' +  _id,
	     idUL : 'wd-ac-main-tabs-ul' +  _id,
	     keyDataTab : 'data-tab',
	     
	     /* div tab class e.g. */
	     classTab : 'wd-tab',
	     
	     /* div links class e.g. */	     
	     classLink : 'wd-role-tabs-link'
});

/*
 * clear tabs
 */
    	Tabs.delTabs();
    	
    	html += '<div id="' + Tabs.o.outerDiv + '">';
   
   /*
   * Open
   */
   	Tabs.addTab('#', 'Test TAB-1', 'Tabs.o.outerDiv' + '-' + _id + '-tab1', false);
 
    	html += '<div id="' + Tabs.o.outerDiv + '-' + _id + '-tab1" class="wd-tab">';
    	 	html += 'Test-Tab-<strong>1</strong>-Content';
    	html += '</div>';

   /*
   * Collapsed
   */    
    THIS.Tabs.addTab('#', 'Test TAB-2', Tabs.o.outerDiv + '-' + _id + '-tab2', true);
  
  
    	html += '<div id="' + Tabs.o.outerDiv + '-' + _id + '-tab2" class="wd-tab">';
     	html += 'Test-Tab-<strong>2</strong>-Content';
      html += '</div>';    	
      
      html += '</div>';
      
    $('body').append(html);
    
    /*
    * Render Tab Links
    */
    Tabs.render();

/*
* Open Tab 2 (and close the others)
*/
    Tabs.openTab(Tabs.o.outerDiv + '-' + _id + '-tab2');