How would you rate this article?
Rating:
3 user(s) have rated this article
Posted by:
retro
Date:
25/08/2009
Category:
Web Development
Views:
this article has been read 2254 times
Recent Articles
(26/06/2010)
Nochex merchant accounts provide you with everything you need to accept payments on your web site. With no monthly fees and support for a number of ecommerce solutions, including nopCommerce, it has never been easier to start selling online!
|
(25/05/2010)
Check out our latest project for community interest company S.C.A.
|
(25/05/2010)
We are pleased to announce support for version 4.0 of the .NET Framework on all of our hosting plans.
|
(11/02/2010)
We have just completed development of a new web site for UK based Aerial Spares.
|
(11/02/2010)
Today sees the release of the official nopCommerce user guide. It explains every part of the application in detail and includes a getting started guide so you can get up and running quickly.
|
read more
We are very much in love with jQuery at the moment and have replaced many of the controls from the ASP.NET AJAX Control Toolkit with jQuery equivalents. One of these is the ACT Tab Container. One thing that we need to do is persist the currently selected tab index across page postbacks.
To do this using the ACT tab container control we added a method like below to the base class of the pages using the control:
protected string GetActiveTabID(TabContainer tabContainer)
{
if (tabContainer == null)
throw new ArgumentNullException("tabContainer");
if (tabContainer.ActiveTab != null)
return tabContainer.ActiveTab.ID;
return string.Empty;
}
Then in the event that would cause the postback we would redirect back to the same page and append the selected tab index as a querystring parameter. We could then use a SelectTab function to get the correct tab:
protected void SelectTab(TabContainer tabContainer, string TabID)
{
if (tabContainer == null)
throw new ArgumentNullException("tabContainer");
if (!String.IsNullOrEmpty(TabID))
{
AjaxControlToolkit.TabPanel tab = tabContainer.FindControl(TabID) as AjaxControlToolkit.TabPanel;
if (tab != null)
{
tabContainer.ActiveTab = tab;
}
}
}
With jQuery, things are a little different. Certainly the markup is alot lighter, using just standard html elements:
<div id="tabPanel">
<ul>
<li><a href="#Panel1"><span>One</span></a></li>
<li><a href="#Panel2"><span>Two</span></a></li>
<li><a href="#Panel3"><span>Three</span></a></li>
<li><a href="#Panel4"><span>Four</span></a></li>
</ul>
<div id="Panel1">
Panel 1
</div>
<div id="Panel2">
Panel 2
</div>
<div id="Panel3">
Panel 3
</div>
<div id="Panel4">
Panel 4
</div>
</div>
The only javascript required to create the tabs (one references to jquery, ui.core and ui.tabs have been added) is:
<script type="text/javascript">
$(function() {
$("#tabPanel").tabs();
});
</script>
In order to save the index of the currently selected tab across postbacks we need to do three things.
- Find somewhere to store the index
- Save the index when a new tab is selected
- Check the stored value when the page loads and activate the relevant tab.
The following code does that. I am using an asp.net hidden field to store the index. I create an event handler for the tabselected event and store the value in the hidden field. On page load we check to see if a index has been saved and if one exists, activates the correct tab.
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="Scripts/jquery-1.3.2.js" type="text/javascript"></script>
<script src="Scripts/ui.core.js" type="text/javascript"></script>
<script src="Scripts/ui.tabs.js" type="text/javascript"></script>
<link href="CSS/ui.core.css" rel="stylesheet" type="text/css" />
<link href="CSS/ui.tabs.css" rel="stylesheet" type="text/css" />
<link href="CSS/ui.theme.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(function() {
var currTab = $("#<%= currTab.ClientID %>");
$("#tabPanel").tabs();
$('#tabPanel').bind('tabsselect', function(event, ui) {
currTab.val(ui.index + 1);
});
if (currTab.val() != '') {
$('#tabPanel').tabs('select', currTab.val());
}
});
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:HiddenField runat="server" ID="currTab" />
<div id="tabPanel">
<ul>
<li><a href="#Panel1"><span>One</span></a></li>
<li><a href="#Panel2"><span>Two</span></a></li>
<li><a href="#Panel3"><span>Three</span></a></li>
<li><a href="#Panel4"><span>Four</span></a></li>
</ul>
<div id="Panel1">
Panel 1
</div>
<div id="Panel2">
Panel 2
<asp:Button runat="server" ID="btnPostback" Text="Post Back" />
</div>
<div id="Panel3">
Panel 3
</div>
<div id="Panel4">
Panel 4
</div>
</div>
</form>
</body>
</html>
This is another example of how things can be made so much simpler with jQuery.
Enjoy.