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">

Panel1

</HeaderTemplate>

Content

</ContentTemplate>

</toolkit:TabPanel>

<toolkit:TabPanel runat="Server" ID="phlFlowLog">

panel2

</HeaderTemplate>

Panel2

</ContentTemplate>

</toolkit:TabPanel>

<toolkit:TabPanel runat="Server" ID="phlFlowFigure">

Panel3

</HeaderTemplate>

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 阅读(3029) 评论(1) 编辑收藏网摘所属分类: ASP.NET AJAX

与我联系

搜索

常用链接

留言簿

我参与的团队

随笔分类(4)

随笔档案(7)

最新评论

阅读排行榜