ASP.NET AJAX Tabs 控件 样式控制

ASPX
<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:
.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
{
}

注意事项:
1、tab控件在UpdatePanel中时,如果tab在页面初始时不显示,则会出现小BUG
posted on 2007-03-08 15:53  MOZO  阅读(5442)  评论(2编辑  收藏  举报