Introduction
This article solves the deactivation of the active tab of the jQuery tab plugin after postback in ASP.NET.
Using the code
Create a new website in Visual Studio. Add the page defaualt.aspx.
Add the following code to default.aspx:
<head>
<title></title>
<script src="js/jquery-1.9.1.js" type="text/javascript"></script>
<link href="css/custom-theme/jquery-ui-1.10.1.custom.min.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-ui-1.10.1.custom.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function () {
$('#tabs').tabs({
activate: function () {
var newIdx = $('#tabs').tabs('option', 'active');
$('#<%=hidLastTab.ClientID%>').val(newIdx);
}, heightStyle: "auto",
active: previouslySelectedTab,
show: { effect: "fadeIn", duration: 1000 }
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div style="width:900px; margin:0 auto">
<div id="tabs" style="margin:0 auto; margin-bottom:2px;">
<ul>
<li><a href="#tabs-1">STATE TRACKING</a></li>
<li><a href="#tabs-2">ICONS</a></li>
<li><a href="#tabs-3">Effects</a></li>
</ul>
<div id="tabs-1">
<strong>STATE TRACKING</strong>
<p>
At any point in time, various parts of widget or interaction elements may be in various
states. jQuery UI tracks these states, and applies appropriate visual styling to them, via
a set of classes that begin with ui-state. These states include ui-state-default, uistate-
active, ui-state-focus, ui-state-highlight, ui-state-error, ui-statedisabled,
and ui-state-hover.
We can use these names in our own scripts or CSS to track state or affect the styling
of elements in the various states.</p>
</div>
<div id="tabs-2">
<strong>ICONS</strong><p>
jQuery UI defines a large number of icons that can be used by various widgets. For
example, icon indicators on the tab elements of the Tab widget, or icons directly on
Button widgets. Each icon is identified by a class name beginning with ui-icon; for
example, ui-icon-person, ui-icon-print, and ui-icon-arrowthick-1-sw.</p><p>
jQuery UI is very clever regarding how it handles icons. All the individual icon
images are defined in a grid on a single image—an icon sheet, if you will. That way,
once this image has been downloaded and cached by the browser, no further trips to
the server are needed to display any of the available icons—and there are a lot of
them (173 as this is being written). The icon class definitions merely identify how to
move the origin of this sheet image as a background image, causing the desired icon
to appear as the background of an element.</p>
</div>
<div id="tabs-3">
<strong> The jQuery UI effects</strong><p>
All of the effects that jQuery UI provides can be used on their own—without other
methods—via the effect() method. This method launches the effect on the elements
of the wrapped set.</p>
</div>
</div>
<asp:Button ID="btnSubmit" runat="server" Text="submit" />
<asp:HiddenField ID="hidLastTab" Value="0" runat="server" />
</div>
</form>
</body>
/////////////////// code to be added in the default.aspx.cs
protected void Page_Load(object sender, EventArgs e)
{
String hiddenFieldValue = hidLastTab.Value;
StringBuilder js = new StringBuilder();
js.Append("<script type='text/javascript'>");
js.Append("var previouslySelectedTab = ");
js.Append(hiddenFieldValue);
js.Append(";</script>");
Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "acttab", js.ToString());
//this.Header.Controls.Add(new LiteralControl(js.ToString()));
}
i am working in asp.net since 2007. My favorite is c#.
Email: zafar.kust@gmail.com
skype: zafarali5
General 
News 
Suggestion 
Question 
Bug 
Answer 
Joke 
Praise 
Rant 
Admin 
Submit an article or tip
