two level tabs auto-resizing with changeable tab contents

Suite and Optimus Suite 5
#1

Hi Guys,
I am very glad to share my solution to implement two level tabs auto-resizing with changeable tab contents.
As we know ,we can make the one level tabs auto-resizing with the help of the JS library DHMLX using it’s method enableAutoSize().But the method just supports resizing the tab which only has the static contents and there must be one level of tabs .There are the following main troubles :

  1. If there are two level tabs , we will meet the issue that auto-resizing ability of the inside tabs is ineffective.
    For example , if there are 3 tabs tab1,tab2,tab3 inside, the height of each tab is 100pt ,200pt, 300pt. When we select the tab2 and then switch to the outside tab ,then switch back to the inside , we will find we can see the tab2 and tab1 well as before , but we can just see part of the tab3.
    The reason:
    As the auto-resizing of the two level tabs has been opened , when we check the tab2 and switch to outside tab, the outside tab will try to auto-resize the height of itself , it will think the inside tabs have the height 200pt , so when we switch back to the inside ,we can only see the whole context of the tab 1 and tab2 , only part context of tab3.
    The solution:
    We can switch again to outside tab and switch back to inside ,we can see the whole context of the tab3.
  2. If there are changeable contents in the inside tab .(Let’s name the tab A).
    The Solution:
    When the content changes have been finished , we should switch other tab of the inside tabs and then switch back to A ,then switch to the outside , switch back to inside again. After all the operations we can see updated contents of tab A.
  3. In order to avoid the ineffective of ‘onblur’ event in IE when we trigger the click event on the tab , I add a hidden tag which is used to record the current active inside tag’s id .
    When the click event of the tab occurs , I will check whether we click the same tab , if yes , the actions switch outside and switch inside won’t happen , if no , the according actions will happen . The reason is that I find switch outside and inside will let the onblur event ineffective in IE but ok in FX .

If needed , i will attach my code here . Very glad to communicate with you guys.
Hope my solution will contributes to the DHTMLX lib.
I wish in future , we can see the effections will be added to the new release version .
Thanks!

#2

Hi,

You may also try to use the following solution to autosize the parent tab when a tab in an inner tab is selected:

... var tabbarChild = tabbarParent.cells("a1").attachTabbar(); ... tabbarChild.attachEvent("onSelect",function(id){ window.setTimeout(function(){ tabbarParent.cells("a1").autoSize(); },1) return true; })

#3

Tab a Tab b
|
Tab b1 Tab b2 Tab b3

If i first select Tab b1 , if there are changeable contents in the tab , we can select Tab b2 ,then select tab b1 , Tab a, Tab b. After that ,we can see the whole updated contents of tab b1.
The code:
innnerTabbar.setTabActive(b2);
innnerTabbar.setTabActive(b1);
outerTabbar.setTabActive(a);
outerTabbar.setTabActive(b);

If we meet the issue we can’t see the whole contents of the tab (b1/b2/b3). We can just select a ,then select b .After the switch ,we can see the whole content of the tab(tab1/tab2/tab3).

The code:
parentTabbar.setActiveTab(a).
parentTabbar.setActiveTab(b).

All the above operations are coming from the situations:
I have let the inner and outer tabbar auto resize the height (both use the method enableAutoSize(true,false) to make them auto-resizing the height) but unluckily , the effect can’t satisfy the situations there are changeable cotents in the inner tab or the inner tabs have different height.

If in future ,the method enableAutoSize() can become stronger to let us coding easy .
Thanks