In this post Asp.Net jQuery
UI Tab Event Handler we shall on how to handle
the tab events.
Tab events like create, select, etc can be handled by adding appropriate handlers to the tab control as follows.
$("#SimpleTab").tabs(
{
select: function(event,
ui)
{
…
}
});
Example
$("#SimpleTab").tabs(
{
select:
function(event, ui)
{
alert('Tab '
+ ui.index + ' Selected');
}
});
Full Example
Add a DIV tag SimpleTab to
the page, and add the below jQuery script. Change the
references of the jQuery library files to map to your local path.
Click the Event Handler button, this will add event handlers to the tab, now switch tabs and notice that the select event is handled, and a message box displays the selected tab index.
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>jQuery UI Tabs</title>
<link type="text/css"
href="css/smoothness/jquery-ui-1.8.21.custom.css"
rel="Stylesheet" />
<script
type="text/javascript"
src="JavaScript/jquery-1.7.2.js"></script>
<script
type="text/javascript"
src="JavaScript/jquery-ui-1.8.21.custom.min.js"></script>
<link
type="text/css"
href="Stylesheet.css" // Add your own .css file (Optional)
rel="Stylesheet" />
<script type="text/javascript">
$(document).ready(function() {
//
// Simple Tab
$("#SimpleTab").tabs({ collapsible: true });
//
// Tabs -
Event Handler
$('#btnEventHandler').click(function(event) {
event.preventDefault();
$("#SimpleTab").tabs(
{
select: function(event, ui)
{
alert('Tab ' + ui.index + '
Selected');
}
});
//
//
Binding event after initializing the Tab
$("#SimpleTab").bind("tabsload", function(e,
tab) {
alert("The tab at index " + tab.index + " was loaded");
});
});
});
</script>
</script>
</head>
<body>
<form id="frmAccordion" runat="server">
<table>
<tr valign="top">
<td>Simple Tab: </td>
<td>
<div id="SimpleTab">
<ul>
<li><a href="#tab1">Tab-1</a></li>
<li><a href="#tab2">Tab-2</a></li>
<li><a href="#tab3">Tab-3</a></li>
</ul>
<div id="tab1">
Tab-1 Content goes here.
</div>
<div id="tab2">
Tab-2 Content goes here.
</div>
<div id="tab3">
Tab-3 Content goes here.
</div>
</div>
</td>
<tr valign="top">
<td>Tabs - Event Handlers </td>
<td>
<asp:Button
ID="btnEventHandler"
runat="server"
Text="Event Handler" />
</td>
</tr>
</table>
</form>
</body>
</html>
Related Posts
No comments:
Post a Comment