随笔-20  评论-5  文章-0  trackbacks-0

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 阅读(4099) 评论(2) 编辑 收藏

评论:
#1楼 2009-01-12 10:29 | 一个无名的小兵[未注册用户]
博主,你好。请问你最后所提到的注意事项怎么才能避免呢?我正好碰到这个头疼的问题。切换到初始不显示的tab的时候他的高度自动设置为0了。
 回复 引用   
大家一起讨论ASP.Net AJAX ... 吧~
昵称:MOZO
园龄:5年11个月
粉丝:0
关注:0

搜索

 
 

常用链接

随笔分类(4)

随笔档案(7)

最新评论

阅读排行榜

推荐排行榜