In this blog I explain that how to initialize the contents
of a tab from the HTML return by the server.
1. Create Content
I create a web form Content.aspx to content
for a tab initialization.
<%@ Page
Language="C#"
AutoEventWireup="true"
CodeBehind="Content.aspx.cs"
Inherits="JQueryExample.Content"
%>
<!DOCTYPE html
PUBLIC "-//W3C//DTD
XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
It is blog section.
</div>
</form>
</body>
</html>
2.
Create function for Initialize
<script type="text/javascript">
$(document).ready(function()
{
$("#tabs").tabs({
fx:{opacity:"toggle"},
}).tabs("url",1,"Content.aspx").tabs("load",0);
});
</script>
Above code has a inbuilt
tab() function that tab() function has three argument. url is action. index 1
presents tab index means second tab will be initialize by content and
Content.aspx is web form that content will be call. “laod” is a action for load
content.
3. Entire Code
<%@ Page
Language="C#"
AutoEventWireup="true"
CodeBehind="TabAjax.aspx.cs"
Inherits="JQueryExample.TabAjax"
%>
<!DOCTYPE html
PUBLIC "-//W3C//DTD
XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
<script src="jquery/js/jquery-1.8.3.js"
type="text/javascript"></script>
<script src="jquery/js/jquery-ui-1.9.2.custom.min.js"
type="text/javascript"></script>
<link href="jqueryui/css/smoothness/jquery-ui-1.9.2.custom.min.css"
rel="stylesheet"
type="text/css"
/>
<script type="text/javascript">
$(document).ready(function()
{
$("#tabs").tabs({
fx:{opacity:"toggle"},
}).tabs("url",1,"Content.aspx").tabs("load",0);
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="tabs">
<ul>
<li><a href="#tabArticle">Article</a></li>
<li><a href="#tabBlog">Blog</a></li>
</ul>
<div id="tabArticle">
It is Article Section.
</div>
<div id="tabBlog">
Blog Section
</div>
</div>
</form>
</body>
</html>
4.
Output
![ajaxtab.PNG]()
Here uses css and jquery/js file form article Create Tabs
Using jQuery and CSS