DFS

Here's an implementation of jQuery tabs in an asp.net 2.0 application, the hurdles I faced and how it all works together.

Tabs make it easy on the end-user, two or more relevant content areas can be displayed in their separate containers on the same page without the user having to navigate multiple pages or scroll up and down.

There are multiple ways to do this. You may use panels in asp.net and control which panel is displayed using server side code when a user clicks on a tab or link. This can get really slow with panels making the page heavy in some situations - this is what happened in my case. Client side code can also be used to switch between multiple tabs, there are quite a few JavaScript solutions, but this can be cumbersome to maintain if you need to rewrite the code for multiple page. And then there is jQuery :)

Requirements:
Get jQuery along with Tabs widget and link to the appropriate js files from your page. Assuming you are working on an aspx page, I am only listing the relevant code here:

jQuery code:

<script type="text/javascript">
$(document).ready(function(){

//tabs setup
$(".tabClass").tabs({ selected: activTab, fxFade: true, fxSpeed: 'fast' });

// Set focus to first input FIELD if one exists
$(".tabClass a.tabLnk").click(function(){
var getID = $(this).attr("href");
//setting Timeout since asp.net fiddles with default focus
setTimeout("$('" + getID + " :input:visible:enabled:first').focus()",100);
});

});
</script>

Fairly simple code. Tabs setup is the only line of code you need. Setting focus to the first input(text/select box/dropdown) is optional. I implemented this because our tab areas contained search parameters. Try playing around with options such as selected, fxFade and fxSpeed and watch the magic unfold

HTML:

<div id="tabArea" class="tabClass">
<ul>
<li><a class="tabLnk" href="#Tab1" >
<asp:Label runat="server" ID="tabLbl1">Tab 1</asp:Label></a></li>
<li><a class="tabLnk" href="#Tab2">
<asp:Label runat="server" ID="tabLbl2">Tab 2</asp:Label></a></li>
</ul>
<asp:Panel ID="Tab1" cssclass="tabContent" runat="Server" DefaultButton="Button1">
....
....
Your first tab's content goes in here
....
....
</asp:Panel>
<asp:Panel ID="Tab2" cssclass="tabContent" runat="Server" DefaultButton="Button2">
....
....
Your second tab's content goes in here
....
....
</asp:Panel>
</div>


Again, fairly simple. We setup a div to hold all tabs. <ul> and <li> links are used to setup the tabs. <asp:Panel> is used to hold your tab's content. For design of tabs and basic setup of implementation with html, check this nice demo. I do not want to repeat code already available.

All code above is required except for "DefaultButton" which is optional. Asp.net sets the focus to the first button on pageload. This was a hurdle in our case where we had search buttons on every tab and if the user hit "enter key" on the second tab, the search button on the first tab would fire. So I used asp.net 2.0's DefaultButton property wherein the default button can be set on a form or panel level. The value of DefaultButton(Button1 and Button2) are the ids' of the search button that I needed to fire when the user hits enter. This is optional as I said, and you can infact replace the "asp:Panel" with "div" or some other container if you do not need this Default Button property.

Hope this helps and as always, you may leave me feedback on this article below :)