In this post Asp.Net jQuery
UI Tab Mouse Over Tab Switching we shall on how to switch between the tabs
when the user hovers the mouse over the tab header.
The tab switching can be enabled on mouse over by setting the event property as follows.
$("
By default tab switching happens on the mouseclick event, the below script enables tab switching on mouseover.
$("#SimpleTab").tabs("option", "event", "mouseover");
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 Mouse Over button, this will change the tab switching event from mouseclick to mouseover, hover the mouse over the tab heading and notice that the tabs just switched.
<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 -
Mouse Over Tab Switching
$('#btnMouseOver').click(function(event)
{
event.preventDefault();
$("#SimpleTab").tabs("option", "event",
"mouseover");
});
});
</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 - MouseOver </td>
<td>
<asp:Button
ID="btnMouseOver"
runat="server"
Text="Mouse Over" />
</td>
</tr>
</table>
</form>
</body>
</html>
Related Posts
No comments:
Post a Comment