TabContainer样式代码,Asp.Net代码库,德仔网

代码语言

代码分类

【Asp.Net】 TabContainer样式

作者:Dezai.CN / 发布于2013/2/21/ 671

，ASP.net里AJAX - Container已为我们提供了选项卡功能，但默认样式比较难看,使用的背景图片在附件中

Aspx文件：

<asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>

<cc1:TabContainer ID="smenu" runat="server" ActiveTabIndex="3" 
            CssClass="ajax_tab_menu"> //把默认样式改为自定义的CSS样式样
        <cc1:TabPanel runat="server" HeaderText="已通过申核" ID="TabPanel1">
        </cc1:TabPanel>
        <cc1:TabPanel ID="TabPanel2" runat="server" HeaderText="申核中...">
        </cc1:TabPanel>
        <cc1:TabPanel ID="TabPanel3" runat="server" HeaderText="未通过审核">
        </cc1:TabPanel>
        <cc1:TabPanel ID="TabPanel4" runat="server" HeaderText="过期信息">
        </cc1:TabPanel>
        </cc1:TabContainer>

/* CSS样式 */

.ajax_tab_menu .ajax__tab_header /*整体按钮底样式*/
{
font-family:宋体;
height:28px;
font-size:12px;
background:url("images/Tab_Option_bg.gif") repeat-x bottom;
}

.ajax_tab_menu .ajax__tab_body /*资料区*/
{
font-family:宋体;
font-size:12px;
border:0px solid #999999;
border-top:0;
background-color:#ffffff;}

.ajax_tab_menu .ajax__tab_tab /*预设样式*/
{
background:url("images/Tab_Option_bg_OFF.gif") repeat-x;
width:78px;
height:28px;
line-height:28px;
text-align:center;
margin-right:4px;
margin:0;
}
.ajax_tab_menu .ajax__tab_hover .ajax__tab_tab /*鼠标经过样式*/
{
background:url("images/Tab_Option_bg_ON.gif") repeat-x;
width:78px;
height:28px;
color:#FFFFFF;
line-height:28px;
text-align:center;
}

.ajax_tab_menu .ajax__tab_active .ajax__tab_tab /*当前使用中样式*/
{
background:url("images/Tab_Option_bg_ON.gif") repeat-x;
width:78px;
height:28px;
line-height:28px;
text-align:center;
color:#FFFFFF;
}

试试其它关键字

　TabContainer　

同语言下

可能有用的

Dezai.CN贡献的其它代码(4037)