<
toolkit:TabContainer
CssClass
="ajax__tab_Default"
runat
="server"
ID
="Tabs"
>
< toolkit:TabPanel EnableTheming ="false" runat ="Server" Width ="300px" ID ="phlInfo" >
< HeaderTemplate >
< span class ="btnNormal" > Panel1 </ span >
</ HeaderTemplate >
< ContentTemplate >
Content
</ ContentTemplate >
</ toolkit:TabPanel >
< toolkit:TabPanel runat ="Server" ID ="phlFlowLog" >
< HeaderTemplate >
< span class ="btnNormal" > panel2 </ span >
</ HeaderTemplate >
< ContentTemplate >
Panel2
</ ContentTemplate >
</ toolkit:TabPanel >
< toolkit:TabPanel runat ="Server" ID ="phlFlowFigure" >
< HeaderTemplate >
< span class ="btnNormal" > Panel3 </ span >
</ HeaderTemplate >
< ContentTemplate >
panel3
</ ContentTemplate >
</ toolkit:TabPanel >
</ toolkit:TabContainer >
CSS:
< toolkit:TabPanel EnableTheming ="false" runat ="Server" Width ="300px" ID ="phlInfo" >
< HeaderTemplate >
< span class ="btnNormal" > Panel1 </ span >
</ HeaderTemplate >
< ContentTemplate >
Content
</ ContentTemplate >
</ toolkit:TabPanel >
< toolkit:TabPanel runat ="Server" ID ="phlFlowLog" >
< HeaderTemplate >
< span class ="btnNormal" > panel2 </ span >
</ HeaderTemplate >
< ContentTemplate >
Panel2
</ ContentTemplate >
</ toolkit:TabPanel >
< toolkit:TabPanel runat ="Server" ID ="phlFlowFigure" >
< HeaderTemplate >
< span class ="btnNormal" > Panel3 </ span >
</ HeaderTemplate >
< ContentTemplate >
panel3
</ ContentTemplate >
</ toolkit:TabPanel >
</ toolkit:TabContainer >
.ajax__tab_Default .ajax__tab_header
{
padding : 12px 0 0 0px ;
height : 20px ;
background : #EDEDED url(Icons/TabLine.gif) repeat-x bottom ;
}
.ajax__tab_Default .ajax__tab_outer
{
}
.ajax__tab_Default .ajax__tab_inner
{
}
.ajax__tab_Default .ajax__tab_tab
{
margin-left : 10px ;
text-align : center ;
padding : 5px 5px 3px 10px ;
font-size : 12px ;
width : 100px ;
cursor : pointer ;
}
.ajax__tab_Default .ajax__tab_hover .ajax__tab_outer ,.ajax__tab_Default .ajax__tab_active .ajax__tab_outer
{
}
.ajax__tab_Default .ajax__tab_hover .ajax__tab_inner ,.ajax__tab_Default .ajax__tab_active .ajax__tab_inner
{
}
.ajax__tab_Default .ajax__tab_active .ajax__tab_tab , .ajax__tab_Default .ajax__tab_hover .ajax__tab_tab
{
margin-left : 10px ;
text-align : center ;
padding : 5px 5px 3px 10px ;
font-size : 12px ;
border : solid 1px #9FACB5 ;
background-color : #fff ;
cursor : pointer ;
}
.ajax__tab_Default .ajax__tab_active .ajax__tab_tab
{
border-bottom : solid 1px #FFF ;
}
.ajax__tab_Default .ajax__tab_hover .ajax__tab_tab span , .ajax__tab_Default .ajax__tab_active .ajax__tab_tab span
{
color : #B82400 ;
}
.ajax__tab_Default .ajax__tab_body
{
}
{
padding : 12px 0 0 0px ;
height : 20px ;
background : #EDEDED url(Icons/TabLine.gif) repeat-x bottom ;
}
.ajax__tab_Default .ajax__tab_outer
{
}
.ajax__tab_Default .ajax__tab_inner
{
}
.ajax__tab_Default .ajax__tab_tab
{
margin-left : 10px ;
text-align : center ;
padding : 5px 5px 3px 10px ;
font-size : 12px ;
width : 100px ;
cursor : pointer ;
}
.ajax__tab_Default .ajax__tab_hover .ajax__tab_outer ,.ajax__tab_Default .ajax__tab_active .ajax__tab_outer
{
}
.ajax__tab_Default .ajax__tab_hover .ajax__tab_inner ,.ajax__tab_Default .ajax__tab_active .ajax__tab_inner
{
}
.ajax__tab_Default .ajax__tab_active .ajax__tab_tab , .ajax__tab_Default .ajax__tab_hover .ajax__tab_tab
{
margin-left : 10px ;
text-align : center ;
padding : 5px 5px 3px 10px ;
font-size : 12px ;
border : solid 1px #9FACB5 ;
background-color : #fff ;
cursor : pointer ;
}
.ajax__tab_Default .ajax__tab_active .ajax__tab_tab
{
border-bottom : solid 1px #FFF ;
}
.ajax__tab_Default .ajax__tab_hover .ajax__tab_tab span , .ajax__tab_Default .ajax__tab_active .ajax__tab_tab span
{
color : #B82400 ;
}
.ajax__tab_Default .ajax__tab_body
{
}
注意事项:
1、tab控件在UpdatePanel中时,如果tab在页面初始时不显示,则会出现小BUG