ASP.NET AJAX Tabs 控件 样式控制
ASPX
注意事项:
1、tab控件在UpdatePanel中时,如果tab在页面初始时不显示,则会出现小BUG
<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