Only 3 simple steps to create jQuery UI tabs content navigation in your ASP.NET Website
jQuery is definitely the most popular JavaScript library in the web.
Together with jQuery, the jQuery UI library becomes very popular too. The reasons why jQuery UI library is popular are that its still lightweight, and with almost no coding you get astonishing features.
One of the features that you may often see in the websites is the tabs-based content navigation. In one of my recent projects, I’ve had a requirement to implement tabbing system and since the project is based on ASP.NET WebForms and jQuery, I considered going with the jQuery UI tabs.
YOU NEED TO TAKE ONLY THREE STEPS TO MAKE IT WORKING!
- Reference necessary scripts and css files
- Create HTML/ASPX content that will follow the rules for a tabs-based content navigation feature
- Add one line jQuery Script Code
1. Reference necessary scripts and css files
All the scripts we need are in the Microsoft CDN (Content Delivery Network)
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.4.4.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.min.js"></script>
The first link is the theme I’ve chosen from the available themes in the Microsoft Ajax CDN jQuery UI Themes.
The scripts are the jQuery 1.4.4 library and the jQuery UI 1.8.9 minified.
2. Create HTML/ASPX content that will follow the rules for a tabs-based content navigation feature
The main HTML structure is
3. Add one line jQuery Script Code
I think this is the most difficult part
$(function () {
$("#myTabs").tabs();
});
</script>
Now you see why :).
So, here is a complete example:
<html lang="en">
<head id="Head1" runat="server">
<title>jQuery UI Tabs - Default functionality</title>
<link type="text/css" href="http://ajax.microsoft.com/ajax/jquery.ui/1.8.9/themes/blitzer/jquery-ui.css"
rel="Stylesheet" />
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.4.4.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.min.js"></script>
<script type="text/javascript">
$(function () {
$("#myTabs").tabs();
});
</script>
</head>
<body>
<div class="content">
<div id="myTabs" style="width:500px;">
<ul>
<li><a href="#tab-1">Title 1</a></li>
<li><a href="#tab-2">Title 2</a></li>
<li><a href="#tab-3">Title 3</a></li>
</ul>
<div id="tab-1">
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.<br />
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when
an unknown printer took a galley of type and scrambled it to make a type specimen
book.
<br />
It has survived not only five centuries, but also the leap into electronic typesetting,
remaining essentially unchanged.
</p>
</div>
<div id="tab-2">
<p>
It is a long established fact that a reader will be distracted by the readable content
of a page when looking at its layout.
<br />
The point of using Lorem Ipsum is that it has a more-or-less normal distribution
of letters, as opposed to using 'Content here, content here', making it look like
readable English.
<ul>
<li>List Item 1</li>
<li>List Item 2</li>
</ul>
</p>
</div>
<div id="tab-3">
<p>
There are many variations of passages of Lorem Ipsum available, but the majority
have suffered alteration in some form,<br />
by injected humour, or randomised words which don't look even slightly believable.
</p>
</div>
</div>
</div>
</body>
</html>
And the result is:
If you want to make the tab navigation a bit more fancy, add fx option in the following way:
If you use multiple ASP.NET Panels <asp:Panel /> on a page, you can easily make tabs out of these panels
For example, your panel will be in the following way:
My Panel here
</asp:Panel>
In client side, it generates:
My Panel here
</div>
The rest you know :).
Hope this was helpful.
Please do let me know your feedback.