zoukankan html css js c++ java

Ajax tabcontainer Example/Sample in asp.net | Change the Style of Ajax tabContainer in asp.net

Here I will explain how to use Ajax Tabcontainer in asp.net and how to change the appearance of TabContainer using CSS styles in asp.net.
Description:
I have one web page that page contains lot of information about user like user profile details, job details and new user registration details because of that huge controls and data I was unable to maintain the webpage effectively.
At that time I decided to use Ajax Tabcontainer to use web page space effectively. Tab container contains set of tabs that can be used to organize the page content. Tab Container is a host for number of TabPanels. Each TabPanel defines its HeaderText or HeaderTemplate as well as a ContentTemplate that defines its content.
One more thing don't hesitate to learn the post completely after seen the length of the post because it's huge for looking but nothing is there just design only the page contains 3 TabPanels that's why code is more and it's very easy to work with TabContainer

Now we can see how we can use ajax tab container in our application First add AjaxControlToolkit reference to your application and add

<%@ Register Namespace="AjaxControlToolkit" Assembly="AjaxControlToolkit" tagPrefix="ajax" %>

To your aspx page and design your page likes this

<title>Ajax Tab Container</title>

</head>

<body>

<ajax:ToolkitScriptManager ID="scriptmanager1" runat="server">

</ajax:ToolkitScriptManager>

<ajax:TabContainer ID="TabContainer1" runat="server">

<ajax:TabPanel ID="tbpnluser" runat="server" >

New User

</HeaderTemplate>

<asp:Panel ID="UserReg" runat="server">

<tr>

</td>

<b>Registration Form</b>

</td>

</tr>

<tr>

UserName:

</td>

<td>

<asp:TextBox ID="txtuser" runat="server"></asp:TextBox>

</td>

</tr>

<tr>

Password:

</td>

<td>

<asp:TextBox ID="txtpwd" runat="server" TextMode="Password"></asp:TextBox>

</td>

</tr>

<tr>

FirstName:

</td>

<td>

<asp:TextBox ID="txtfname" runat="server"></asp:TextBox>

</td>

</tr>

<tr>

LastName:

</td>

<td>

<asp:TextBox ID="txtlname" runat="server"></asp:TextBox>

</td>

</tr>

<tr>

Email:

</td>

<td>

<asp:TextBox ID="txtEmail" runat="server"></asp:TextBox>

</td>

</tr>

<tr>

Phone No:

</td>

<td>

<asp:TextBox ID="txtphone" runat="server"></asp:TextBox>

</td>

</tr>

<tr>

Location:

</td>

<asp:TextBox ID="txtlocation" runat="server"></asp:TextBox>

</td>

</tr>

<tr>

</td>

</tr>

</table>

</asp:Panel>

</ContentTemplate>

</ajax:TabPanel>

<ajax:TabPanel ID="tbpnlusrdetails" runat="server" >

User Details

</HeaderTemplate>

<asp:Panel ID="Panel1" runat="server">

<tr>

</td>

<td>

<b>User Details</b>

</td>

</tr>

<tr>

UserName:

</td>

<td>

<b>Suresh Dasari</b>

</td>

</tr>

<tr>

FirstName:

</td>

<td>

<b>Suresh</b>

</td>

</tr>

<tr>

LastName:

</td>

<td>

<b>Dasari</b>

</td>

</tr>

<tr>

Email:

</td>

<td>

<b>sureshbabudasari@gmail.com</b>

</td>

</tr>

<tr>

Phone No:

</td>

<td>

</td>

</tr>

<tr>

Location:

</td>

<b>Hyderabad</b>

</td>

</tr>

</table>

</asp:Panel>

</ContentTemplate>

</ajax:TabPanel>

<ajax:TabPanel ID="tbpnljobdetails" runat="server" >

Job Details

</HeaderTemplate>

<asp:Panel ID="Panel2" runat="server">

<tr>

</td>

<td>

<b>Job Details</b>

</td>

</tr>

<tr>

Job Type:

</td>

<td>

<b>Software</b>

</td>

</tr>

<tr>

Industry:

</td>

<td>

</td>

</tr>

<tr>

Designation:

</td>

<td>

<b>Software Engineer</b>

</td>

</tr>

<tr>

Company:

</td>

<td>

<b>aspdotnet-suresh</b>

</td>

</tr>

<tr>

Phone No:

</td>

<td>

</td>

</tr>

<tr>

Location:

</td>

<b>Hyderabad</b>

</td>

</tr>

</table>

</asp:Panel>

</ContentTemplate>

</ajax:TabPanel>

</ajax:TabContainer>

</div>

</form>

</body>

</html>

After completion of our page design run application and see the output that should be like this

This is normal tab container we can change the appearance of tab container by using CSSClass properties. Here I will explain list of available CSS classes for Tab.

.ajax__tab_header: By using this CSS class we can set the style for header of tab.

.ajax__tab_outer: This CSS class is used to set the left-side background image of the tab.

.ajax__tab_inner: This CSS class is used to set the right-side image of the tab.

.ajax__tab_tab: An element of the tab that contains the text content.

.ajax__tab_body: This CSS class is used to apply style for container of TabPanel.

ajax__tab_hover . This is CSS class is used to apply style for a tab when the mouse is hovering over.

.ajax__tab_active: This CSS class is used to apply style for currently selected tab.

Here we need to use all the CSSclasses like this format .fancy-green .ajax__tab_header

If we declare the CSS class like this we can assign CssClass="fancy-green" to Tabcontainer automatically all the css classes applied for tab container.

Now again here I am designing the ajaxtab container with CSS class check the code

<title>Ajax Tab Container</title>

.fancy-green .ajax__tab_header

{

background: url(green_bg_Tab.gif) repeat-x;

cursor:pointer;

}

.fancy-green .ajax__tab_hover .ajax__tab_outer, .fancy-green .ajax__tab_active .ajax__tab_outer

{

background: url(green_left_Tab.gif) no-repeat left top;

}

.fancy-green .ajax__tab_hover .ajax__tab_inner, .fancy-green .ajax__tab_active .ajax__tab_inner

{

background: url(green_right_Tab.gif) no-repeat right top;

}

.fancy .ajax__tab_header

{

font-size: 13px;

font-weight: bold;

color: #000;

font-family: sans-serif;

}

.fancy .ajax__tab_active .ajax__tab_outer, .fancy .ajax__tab_header .ajax__tab_outer, .fancy .ajax__tab_hover .ajax__tab_outer

{

height: 46px;

}

.fancy .ajax__tab_active .ajax__tab_inner, .fancy .ajax__tab_header .ajax__tab_inner, .fancy .ajax__tab_hover .ajax__tab_inner

{

height: 46px;

margin-left: 16px; /* offset the width of the left image */

}

.fancy .ajax__tab_active .ajax__tab_tab, .fancy .ajax__tab_hover .ajax__tab_tab, .fancy .ajax__tab_header .ajax__tab_tab

{

margin: 16px 16px 0px 0px;

}

.fancy .ajax__tab_hover .ajax__tab_tab, .fancy .ajax__tab_active .ajax__tab_tab

{

color: #fff;

}

.fancy .ajax__tab_body

{

font-family: Arial;

font-size: 10pt;

border-top: 0;

border:1px solid #999999;

padding: 8px;

background-color: #ffffff;

}

</style>

</head>

<body>

<ajax:ToolkitScriptManager ID="scriptmanager1" runat="server">

</ajax:ToolkitScriptManager>

<ajax:TabContainer ID="TabContainer1" runat="server" CssClass="fancy fancy-green">

<ajax:TabPanel ID="tbpnluser" runat="server" >

New User

</HeaderTemplate>

<asp:Panel ID="UserReg" runat="server">

<tr>

</td>

<b>Registration Form</b>

</td>

</tr>

<tr>

UserName:

</td>

<td>

<asp:TextBox ID="txtuser" runat="server"></asp:TextBox>

</td>

</tr>

<tr>

Password:

</td>

<td>

<asp:TextBox ID="txtpwd" runat="server" TextMode="Password"></asp:TextBox>

</td>

</tr>

<tr>

FirstName:

</td>

<td>

<asp:TextBox ID="txtfname" runat="server"></asp:TextBox>

</td>

</tr>

<tr>

LastName:

</td>

<td>

<asp:TextBox ID="txtlname" runat="server"></asp:TextBox>

</td>

</tr>

<tr>

Email:

</td>

<td>

<asp:TextBox ID="txtEmail" runat="server"></asp:TextBox>

</td>

</tr>

<tr>

Phone No:

</td>

<td>

<asp:TextBox ID="txtphone" runat="server"></asp:TextBox>

</td>

</tr>

<tr>

Location:

</td>

<asp:TextBox ID="txtlocation" runat="server"></asp:TextBox>

</td>

</tr>

<tr>

</td>

</tr>

</table>

</asp:Panel>

</ContentTemplate>

</ajax:TabPanel>

<ajax:TabPanel ID="tbpnlusrdetails" runat="server" >

User Details

</HeaderTemplate>

<asp:Panel ID="Panel1" runat="server">

<tr>

</td>

<td>

<b>User Details</b>

</td>

</tr>

<tr>

UserName:

</td>

<td>

<b>Suresh Dasari</b>

</td>

</tr>

<tr>

FirstName:

</td>

<td>

<b>Suresh</b>

</td>

</tr>

<tr>

LastName:

</td>

<td>

<b>Dasari</b>

</td>

</tr>

<tr>

Email:

</td>

<td>

<b>sureshbabudasari@gmail.com</b>

</td>

</tr>

<tr>

Phone No:

</td>

<td>

</td>

</tr>

<tr>

Location:

</td>

<b>Hyderabad</b>

</td>

</tr>

</table>

</asp:Panel>

</ContentTemplate>

</ajax:TabPanel>

<ajax:TabPanel ID="tbpnljobdetails" runat="server" >

Job Details

</HeaderTemplate>

<asp:Panel ID="Panel2" runat="server">

<tr>

</td>

<td>

<b>Job Details</b>

</td>

</tr>

<tr>

Job Type:

</td>

<td>

<b>Software</b>

</td>

</tr>

<tr>

Industry:

</td>

<td>

</td>

</tr>

<tr>

Designation:

</td>

<td>

<b>Software Engineer</b>

</td>

</tr>

<tr>

Company:

</td>

<td>

<b>aspdotnet-suresh</b>

</td>

</tr>

<tr>

Phone No:

</td>

<td>

</td>

</tr>

<tr>

Location:

</td>

<b>Hyderabad</b>

</td>

</tr>

</table>

</asp:Panel>

</ContentTemplate>

</ajax:TabPanel>

</ajax:TabContainer>

</div>

</form>

</body>

</html>

Aftercompletion this page check the tab how it look like it’s looking very nice

Demo

Download sample code attached

查看全文

相关阅读:
有用数据结构---图的操作和算法
 Jackson 框架，轻易转换JSON
移动Web开发实践
 Spring官方文档翻译——15.1 介绍Spring Web MVC框架
 面向对象五大原则_1.单一职责原则&2.里氏替换原则
 ZOJ 3792 Romantic Value 最小割（最小费用下最小边数)
Yii学习笔记之二（使用gii生成一个简单的样例）
一个令人蛋疼的NDK链接错误
 Android 阅读器架构图，网上收集，留做存货
 Xcode 6 打包ipa文件

原文地址：https://www.cnblogs.com/happy-Chen/p/3640463.html