Điều này giải thích cho chúng ta làm thế nào để tạo ra phong cách riêng của css cho Ajax TabContainer Control.
1> Đầu tiên tạo 1 ASP.NET AjaxEnabled Website.
2> Kéo và thả TabContainer Control từ Toolkit đến web form.
3> Nhấn đúp TabContainer Control để chuyển sang trang xử lý .CS
Chép code này vào:
<cc1:TabContainer ID="TabContainer1" runat="server" ActiveTabIndex="0" >
<cc1:TabPanel ID="TabPanel1" runat="server" HeaderText="Quang.IT">
<ContentTemplate>
<asp:TextBox ID="TextBox1" Text="Test by Quang" runat="server"></asp:TextBox>
</ContentTemplate>
</cc1:TabPanel>
<cc1:TabPanel ID="TabPanel2" runat="server" HeaderText="Storm">
<ContentTemplate>
<asp:Label ID="Label1" runat="server" Text="Admin 4rum DNGAZ"></asp:Label>
</ContentTemplate>
</cc1:TabPanel>
<cc1:TabPanel ID="TabPanel3" runat="server" HeaderText="Diễn đàn Đà Nẵng">
<ContentTemplate>
<asp:Button ID="Button1" PostBackUrl="http://dngaz.com" runat="server" Text="Nhấn vào liên kết" />
</ContentTemplate>
</cc1:TabPanel>
</cc1:TabContainer>
Lưu ý: Phải có ScriptManager thì mới hoạt động được Ajax nhé.
4> Bây giờ cùng tạo file CSS. Đặt tên là: Tab.css
/*Header*/
.Tab .ajax__tab_header
{
color: #4682b4;
font-family:Calibri;
font-size: 14px;
font-weight: bold;
background-color: #ffffff;
margin-left: 0px;
}
/*Body*/
.Tab .ajax__tab_body
{
border:1px solid #b4cbdf;
padding-top:0px;
}
/*Tab Active*/
.Tab .ajax__tab_active .ajax__tab_tab
{
color: #ffffff;
background:url("tab_active.gif") repeat-x;
height:20px;
}
.Tab .ajax__tab_active .ajax__tab_inner
{
color: #ffffff;
background:url("tab_left_active.gif") no-repeat left;
padding-left:10px;
}
.Tab .ajax__tab_active .ajax__tab_outer
{
color: #ffffff;
background:url("tab_right_active.gif") no-repeat right;
padding-right:6px;
}
/*Tab Hover*/
.Tab .ajax__tab_hover .ajax__tab_tab
{
color: #000000;
background:url("tab_hover.gif") repeat-x;
height:20px;
}
.Tab .ajax__tab_hover .ajax__tab_inner
{
color: #000000;
background:url("tab_left_hover.gif") no-repeat left;
padding-left:10px;
}
.Tab .ajax__tab_hover .ajax__tab_outer
{
color: #000000;
background:url("tab_right_hover.gif") no-repeat right;
padding-right:6px;
}
/*Tab Inactive*/
.Tab .ajax__tab_tab
{
color: #666666;
background:url("tab_Inactive.gif") repeat-x;
height:20px;
}
.Tab .ajax__tab_inner
{
color: #666666;
background:url("tab_left_inactive.gif") no-repeat left;
padding-left:10px;
}
.Tab .ajax__tab_outer
{
color: #666666;
background:url("tab_right_inactive.gif") no-repeat right;
padding-right:6px;
margin-right: 2px;
}
5> Bây giờ thêm CssClass="Tab" đến TabContainer:
<cc1:TabContainer ID="TabContainer1" runat="server" ActiveTabIndex="0" CssClass="Tab" >