 |
In this example Iam Going to explain how to create HTML Tab Container .
If you want to create HTML Tab container You have add 3 javascript file references on top.
<script src="../js/ver_tabs.js" type="text/javascript"></script>
<script src="../js/jquery.min.js"
type="text/javascript"></script>
<script src="../js/jquery.tabify.js"
type="text/javascript"></script>
and also you have to add javascript for this
<script type="text/javascript">
$(document).ready(function () {
//UL class id
$('#Details').tabify();
});
</script>
Your Aspx Page Should be like this:
<head runat="server">
<title>HTML Tab Container</title>
<script src="../js/ver_tabs.js"
type="text/javascript"></script>
<script src="../js/jquery.min.js"
type="text/javascript"></script>
<script src="../js/jquery.tabify.js"
type="text/javascript"></script>
<style type="text/css">
.viewTabs
{
padding: 0;
clear: both;
}
.viewTabs li
{
display: inline;
}
.viewTabs li a
{
background: #FFF;
margin: 0 5px 0 0;
padding: 10px;
float: left;
border: 1px solid #DDD;
border-bottom: none;
text-decoration: none;
color: #000;
font-weight: bold;
font-size: 12px;
}
.viewTabs li.active
a
{
background: #15acdb;
color: #FFF;
}
.content
{
float: left;
clear: both;
border: 1px solid #DDD;
background: #fff;
padding: 1% 2%;
width: 100%;
}
</style>
<script type="text/javascript">
$(document).ready(function () {
//UL class id
$('#Details').tabify();
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<ul id="Details"
class="viewTabs">
<li class="active"><a href="#Tab1">Tab1</a></li>
<li><a href="#Tab2">Tab2</a></li>
<li><a href="#Tab3">Tab3</a></li>
<li><a href="#Tab4">Tab4</a></li>
</ul>
<div id="Tab1" class="content">
<table style="width: 50%; border: none;">
<tr>
<td>
First Name:
</td>
<td>
<asp:TextBox ID="txtFirstName" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td>
Second Name:
</td>
<td>
<asp:TextBox ID="txtSecondName" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td>
City:
</td>
<td>
<asp:TextBox ID="txtCity" runat="server"></asp:TextBox>
</td>
</tr>
</table>
</div>
<div id="Tab2" class="content"
runat="server">
<table style="width: 50%; border: none;">
<tr>
<td>
First Name:
</td>
<td>
Ram
</td>
</tr>
<tr>
<td>
Second Name:
</td>
<td>
Sai
</td>
</tr>
<tr>
<td>
City:
</td>
<td>
Hyderabad
</td>
</tr>
</table>
</div>
<div id="Tab3" class="content"
runat="server">
This Information is belongs to Tab3
</div>
<div id="Tab4" class="content"
runat="server">
This Information is belongs to Tab4
</div>
</div>
</form>
</body>
</html>
<script type="text/javascript">
<head runat="server">
<title>HTML Tab Container</title>
<script src="../js/ver_tabs.js"
type="text/javascript"></script>
<script src="../js/jquery.min.js"
type="text/javascript"></script>
<script src="../js/jquery.tabify.js"
type="text/javascript"></script>
<style type="text/css">
.viewTabs
{
padding: 0;
clear: both;
}
.viewTabs li
{
display: inline;
}
.viewTabs li a
{
background: #FFF;
margin: 0 5px 0 0;
padding: 10px;
float: left;
border: 1px solid #DDD;
border-bottom: none;
text-decoration: none;
color: #000;
font-weight: bold;
font-size: 12px;
}
.viewTabs li.active
a
{
background: #15acdb;
color: #FFF;
}
.content
{
float: left;
clear: both;
border: 1px solid #DDD;
background: #fff;
padding: 1% 2%;
width: 100%;
}
</style>
<script type="text/javascript">
$(document).ready(function () {
//UL class id
$('#Details').tabify();
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<ul id="Details"
class="viewTabs">
<li class="active"><a href="#Tab1">Tab1</a></li>
<li><a href="#Tab2">Tab2</a></li>
<li><a href="#Tab3">Tab3</a></li>
<li><a href="#Tab4">Tab4</a></li>
</ul>
<div id="Tab1" class="content">
<table style="width: 50%; border: none;">
<tr>
<td>
First Name:
</td>
<td>
<asp:TextBox ID="txtFirstName" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td>
Second Name:
</td>
<td>
<asp:TextBox ID="txtSecondName" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td>
City:
</td>
<td>
<asp:TextBox ID="txtCity" runat="server"></asp:TextBox>
</td>
</tr>
</table>
</div>
<div id="Tab2" class="content"
runat="server">
<table style="width: 50%; border: none;">
<tr>
<td>
First Name:
</td>
<td>
Ram
</td>
</tr>
<tr>
<td>
Second Name:
</td>
<td>
Sai
</td>
</tr>
<tr>
<td>
City:
</td>
<td>
Hyderabad
</td>
</tr>
</table>
</div>
<div id="Tab3" class="content"
runat="server">
This Information is belongs to Tab3
</div>
<div id="Tab4" class="content"
runat="server">
This Information is belongs to Tab4
</div>
</div>
</form>
</body>
</html>
No comments:
Post a Comment