Cấp bậc tác giả:

DOTNET

CSS kết hợp với Ajax TabContainer Control trong asp.net

Được viết bởi QuangIT ngày 17/06/2012 lúc 10:11 PM
Đ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.
  • 0
  • 1806
Tải tệp tin: Click ở đây

CSS kết hợp với Ajax TabContainer Control trong asp.net


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

Nguồn bài viết: DNGAZ

BÌNH LUẬN BÀI VIẾT

Bài viết mới nhất

LIKE BOX

Bài viết được xem nhiều nhất

HỌC HTML