Start Building Professional
Web Apps Today


 
Categories Question details Back To List
Question  posted by alterity on Mar 03, 2009 13:49
open dhtmlx forum
creating a direct link to tab

I am sorry I have lost the answer to this most basic question but I cannot remember the proper construction.

How do I construct a link that navigates directly to the content of a particular tab?

Would you please either direct me to the answer in the documentation or give me an example here? Thank you very much.
Answer posted by Alex (support) on Mar 04, 2009 02:01

If you don't you iframe-based loading mode, the tab content are elements of the page and available by document.getElementById(id) method.

In case of iframes loading mode, the window of tab content can be got using the tabWindow(tab_id) method. 

Answer posted by follow up to creating direct link to tab on Mar 04, 2009 07:18
Thanks but I need a sample, I think, because I can't quite see how to construct an event on a different page that will move to the page with the tabbar and start with a particular tab open that may or may not be the active tab.

Here's the code that constructs the tabbar:

  <div id="a_tabbar" class="tab"></div>
  <script> 
tabbar=new dhtmlXTabBar("a_tabbar","top"); //top,bottom,left,right 
tabbar.setHrefMode("ajax-html"); 
tabbar.setStyle("modern"); //winDFLT, modern, sliver
tabbar.setImagePath("/scripts/tabbar/imgs/"); 
tabbar.setSkinColors("#ffffff","#F4F3EE"); 
tabbar.enableAutoSize(true,false); 
tabbar.enableAutoReSize(true); 
tabbar.preventIECashing(true);
tabbar.setAlign("left"); //left,rigth,top,bottom 
tabbar.setMargin("1px"); //space between tabs
tabbar.setOffset("5px"); //indent of first tab
tabbar.addTab("a1","Standard Postcard","150px"); 
tabbar.addTab("a2","Jumbo Postcard","150px"); 
tabbar.addTab("a3","Colossal Postcard","150px"); 
tabbar.setContentHref("a1","item1.php");
tabbar.setContentHref("a2","item2.php");
tabbar.setContentHref("a3","item3.php");
tabbar.setContentHref("a4","item4.php");
tabbar.setContentHref("a5","item5.php");
tabbar.setTabActive("a1"); 

    </script>
Now, for example, I have a link on the homepage that links to the page with the above tabbar. I want the link to move to this page and start with the content of the a3 tab to be active. I am sure this needs to be an onclick event but I am not sure how to achieve this.

What would the script look like and how would the onclick be constructed?

I have tried many variations and they have all failed.

Thanks very much.
Answer posted by Alex (support) on Mar 04, 2009 08:04

What onclick do you mean ? 

Unfortunately, the provided description is not clear enough.

If you mean tab onclick,  tabbar provides onselect event whcih can be used. It occurs when tab selection changes:

tabbar.setOnSelectHandler(function(tab_id,prev_tab_id){

...

return true

}) 

In case of ajax mode the content of the tab is only available after loading. setOnTabContentLoaded method allows to set function which will be called after tab content loaded (it gets tab id as a parameter).

Answer posted by Thanks very much on Mar 04, 2009 08:41
Thank you. Your comment helped provoke my thinking to achieve a solution. I appreciate it very much.