How to add a tab control in asp .net page using jQuery?

Pgayath
Posted by Pgayath under jQuery category on | Points: 40 | Views : 4600
<html xmlns="http://www.w3.org/1999/xhtml" > 
<head runat="server">
<title>JQuery Demo</title>
<link href="jquery-ui-1.8.1.custom.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js" type="text/javascript"></script>

<script type="text/javascript">
$(function() {
$("#tabContainer").tabs();
});
</script>

</head>
<body>
<form id="form1" runat="server">
<div id="tabContainer">
<ul>
<li><a href="#tab0"><span>FIRST</span></a></li>
<li><a href="#tab1"><span>SECOND</span></a></li>
<li><a href="#tab2"><span>THIRD</span></a></li>
</ul>

<div id="tab0" >
<asp:Button ID="Button1" runat="server"
Text="First Tab Button" />
</div>
<div id="tab1">
<asp:Button ID="Button2" runat="server"
Text="Second Tab Button" />
</div>
<div id="tab2">
<asp:Button ID="Button3" runat="server"
Text="Third Tab Button" />
</div>
</div>
</form>
</body>
</html>

Comments or Responses

Posted by: Kumaran1987 on: 2/12/2013 Level:Starter | Status: [Member] | Points: 10
see this link http://www.kumaran198726.com/2013/02/how-to-maintain-or-retain-tabs-in-same.html

Here I've used in same Tab;

But you will change it Code behind ; because I have used Enum operations to make a tab positions in default.aspx.cs page

so hopefully you can change Enum values as according to your requirements

Login to post response