This article will show you how you can create tab control in
asp.net using jQuery. In this I will show example of three tab with different
tab name.
Some of my previous articles are as follows: Validation
for Accepting Terms and Conditions Checkbox in Asp.Net MVC Using jQuery, Disable
jQuery UI DatePicker Calendar On Button Click In Asp.Net, Draggable
GridView Using jQuery in Asp.Net, jQuery
Datepicker Calendar With Multiple Months in Asp.net, Autocomplete
Textbox Using jQuery In Asp.Net and C#.Net, jQuery
Datepicker Calendar Open On Image Button Click in Asp.net, jQuery
Datepicker Calendar With Restrict Date Range in Asp.net.
So for this article first I I will create a new asp.net
application and add the below jQuery library reference in page header.
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
|
Now add the bellow code into header of the page to create a
tab.
<script>
$(function
() {
$("#countrytabs").tabs();
});
</script>
|
Now check the below complete code to show tab control.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication1.WebForm1"
%>
<!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>How to
Create Tab Control Using jQuery In Asp.Net</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<style>
body
{
font-size: 11px;
}
</style>
<script>
$(function
() {
$("#countrytabs").tabs();
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="countrytabs">
<ul>
<li><a href="#countrytabs-1">India</a></li>
<li><a href="#countrytabs-2">Pakistan</a></li>
<li><a href="#countrytabs-3">America</a></li>
</ul>
<div id="countrytabs-1">
<p>
<h2> Tab 1
Example using jQuery</h2>
</p>
</div>
<div id="countrytabs-2">
<p>
<h2> Tab 2
Example using jQuery</h2>
</p>
</div>
<div id="countrytabs-3">
<p>
<h2> Tab 3
Example using jQuery</h2>
</p>
</div>
</div>
</form>
</body>
</html>
|
In above code I have created li control with div assign, the
tab value. Now we have done run the application to check the output.
About the Author
How i can edit this style?
ReplyDeleteHi Please check the links
Deletehttp://stackoverflow.com/questions/17018540/adding-custom-styles-to-jquery-ui-tabs
http://keith-wood.name/uitabs.html
http://stackoverflow.com/questions/21162824/change-css-of-jquery-ui-tabs