PDA

View Full Version : Two-level (nested) tabs with integrated style



liberte
29 Feb 2008, 11:41 AM
After writing a longish description of how I built my nested tabs, I hit Ctrl-W accidently (Emacs bindings in my fingers) and closed the window. :( I don't want to write it again, but the attached image will give you and idea what I was up to, and you can ask if interested.

MarkB
29 Feb 2008, 3:27 PM
Very nice looking. Are you going to put up the source code for it?

Also, quick question, does it support 2nd tier scrolling icons?

tof
1 Mar 2008, 10:51 AM
Good, indeed I'm interested :)

liberte
1 Mar 2008, 3:21 PM
I don't know how the scrolling icons would look without the usual background.

The way I did the two levels of tabs is very specific to our application, so you'll probably need to make adjustments. But for all the top-level tabs, I use the following html, and apply the subtab panel to the span with given id.




tabSpec.html =
'<table class="" style="margin:0px 0em; border:0px">\n' +
' <tr><td style="height:4px"></td></tr>\n' + // spacer row
' <tr>' +
' <td><span id="' + tabData.id + '_extSubTabs' + '"></span></td>' +
' </tr>\n' +
'</table>\n';


The main trick is simply to add a class to each level of tabs (with e.g. cls: (topLevel ? 'ssExtTab' : 'ssExtSubTab') ) and specify the appropriate styles for each. Below are all the style changes. (Sorry about the lack of indentation - this editor doesn't know how to preserve what I pasted in.) There are two tabs-sprite.gif used for the inactive top level (blue) and active sub level (white), that are attached.




/*=====================================*/
/* ExtJS tabs
* Override also for second level style
*/
.ssExtTab
{
height: 54px; /* Critical sizing, shouldnt be needed. */
}



.ssExtTab .x-tab-panel-header
{
border-color: transparent;
background-color: transparent;
border-bottom-color: #DEECFD; /* #EAEAEA; */
border: 0px;
padding-bottom:0px;
height:23px;
}


.ssExtTab .x-panel-body
{
border: 0px;
background-color: #DEECFD;


}


.ssExtTab ul.x-tab-strip-top
{
background: none;
}


.ssExtTab .x-tab-strip-spacer
{
border:0px;
height:0px;
}


.ssExtTab .x-tab-panel-body
{
border: 0px;
height:auto;
}
.ssExtTab .x-tab-strip-top span.x-tab-strip-text
{
color:#FFFFFF;
text-decoration: none;
}


.ssExtTab .x-tab-strip-active span.x-tab-strip-text
{
color:#15428b; /* from ExtJS */
text-decoration: none;
}


/* inactive tabs, turn on borders */
.ssExtTab .x-tab-strip-top .x-tab-right

{

background: transparent url(dhtml/extjs/ScanScout/tabs-sprite-blue.gif) no-repeat 0 -51px;

padding-left:10px;
}
.ssExtTab .x-tab-strip-top .x-tab-left


{


background: transparent url(dhtml/extjs/ScanScout/tabs-sprite-blue.gif) no-repeat right -351px;

padding-right:10px;
}
.ssExtTab .x-tab-strip-top .x-tab-strip-inner


{


background: transparent url(dhtml/extjs/ScanScout/tabs-sprite-blue.gif) repeat-x 0 -201px;

}





.ssExtTab .x-tab-strip-top .x-tab-strip-active .x-tab-right

{


background: transparent url(dhtml/extjs/resources/images/default/tabs/tabs-sprite.gif) no-repeat 0 -51px;

padding-left:10px;
}





.ssExtTab .x-tab-strip-top .x-tab-strip-active .x-tab-left

{


background: transparent url(dhtml/extjs/resources/images/default/tabs/tabs-sprite.gif) no-repeat right -351px;

padding-right:10px;
}





.ssExtTab .x-tab-strip-top .x-tab-strip-active .x-tab-strip-inner

{


background: transparent url(dhtml/extjs/resources/images/default/tabs/tabs-sprite.gif) repeat-x 0 -201px;

}





.ssExtTab .x-tab-strip-top .x-tab-strip-active .x-tab-right

{


background-position: 0 0;

}





.ssExtTab .x-tab-strip-top .x-tab-strip-active .x-tab-left

{


background-position: right -301px;

}





.ssExtTab .x-tab-strip-top .x-tab-strip-active .x-tab-strip-inner

{


background-position: 0 -151px;

}






.ssExtSubTab .x-panel-body

{
background-color: #0082bd; /* #EAEAEA; */
border-top: 0px;
}





.ssExtSubTab ul.x-tab-strip-top

{
border-color: #0082bd; /* #d0d0d0; */
/* #dbdbdb url(dhtml/extjs/resources/images/gray/tabs/tab-strip-bg.gif) repeat-x left top;*/
padding-bottom:0px;
}





.ssExtSubTab .x-tab-panel-header

{
background-color: transparent;
border: 0px;
border-color: #0082bd; /* #d0d0d0; */
padding-top: 0px;
}






.ssExtSubTab .x-tab-strip-spacer

{
border:0px;
height:0px;
}





.ssExtSubTab .x-tab-strip-top span.x-tab-strip-text

{
color:#15428b; /* from ExtJS */
}

/* when mousing over tabs , underline inactive tabs */
.ssExtSubTab .x-tab-strip-over span.x-tab-strip-text
{
color:#010101;
text-decoration: underline;
}





.ssExtSubTab .x-tab-strip-active span.x-tab-strip-text

{
color:#15428b; /* from ExtJS */
text-decoration: none;
}






/* inactive tabs, turn off borders */

.ssExtSubTab .x-tab-strip-top .x-tab-right


{


background: transparent;

padding-left:10px;
}
.ssExtSubTab .x-tab-strip-top .x-tab-left


{


background: transparent;

padding-right:10px;
}
.ssExtSubTab .x-tab-strip-top .x-tab-strip-inner


{


background: transparent;

}





/* active tabs, turn on borders */

.ssExtSubTab .x-tab-strip-top .x-tab-strip-active .x-tab-right


{


background: transparent url(dhtml/extjs/ScanScout/tabs-sprite-white.gif) no-repeat 0 -51px;

padding-left:10px;
}
.ssExtSubTab .x-tab-strip-top .x-tab-strip-active .x-tab-left


{


background: transparent url(dhtml/extjs/ScanScout/tabs-sprite-white.gif) no-repeat right -351px;

padding-right:10px;
}
.ssExtSubTab .x-tab-strip-top .x-tab-strip-active .x-tab-strip-inner


{


background: transparent url(dhtml/extjs/ScanScout/tabs-sprite-white.gif) repeat-x 0 -201px;

}

anacab
17 Nov 2010, 1:40 PM
Can you also post example code? I would greatly appreciate it. Thanks.