Menu
The following program works in earlier releases of jQuery UI, but it does not work in the Latest release though.
The select property does not call the function in the handleSelect variable. See the following fiddle: working tabs program
Here is my code for jQuery UI 1.10.3
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Tabs</title>
<link rel="stylesheet" href="css/smoothness/jquery-ui-1.10.2.custom.css">
<link rel="stylesheet" href="css/tabSelect.css">
</head>
<body>
<div id="myTabs">
<ul>
<li><a href="#a">Tab 1</a></li>
<li><a href="#b">Tab 2</a></li>
</ul>
<div id="a">This is the content panel linked to the first tab, it is shown by default.</div>
<div id="b">This is the content panel linked to the second tab, it is shown when its tab is clicked.</div>
</div>
<script type="text/javascript" src="development-bundle/jquery-1.9.1.js"></script>
<script type="text/javascript" src="development-bundle/ui/jquery.ui.core.js"></script>
<script type="text/javascript" src="development-bundle/ui/jquery.ui.widget.js"></script>
<script type="text/javascript" src="development-bundle/ui/jquery.ui.tabs.js"></script>
<script type="text/javascript" src="development-bundle/ui/jquery.ui.effect.js"></script>
<script type="text/javascript" src="development-bundle/ui/jquery.ui.effect-blind.js"></script>
<script type="text/javascript">
(function($) {
var handleSelect = function(e, tab) {
$("<p></p>", {
text: "Tab at index " + tab.index + " selected",
"class": "status-message ui-corner-all"
}).appendTo(".ui-tabs-nav", "#myTabs").fadeOut(5000, function(){
$(this).remove();
});
},
tabOpts = {
select : handleSelect
};
$("#myTabs").tabs({ select: handleSelect});
})(jQuery);
</script>
</body>
</html>
644
See the upgrade guide for jQuery UI 1.10
Removed
selectevent; usebeforeActivate(#7154) The
selectevent has been removed in favor ofbeforeActivate. See the 1.9 deprecation notice for full details.
Here is a jsfiddle
Replaced
$("#myTabs").tabs({ select: handleSelect});
with
$("#myTabs").tabs({ beforeActivate: handleSelect});
EDIT
Just noticed that your indexes won't work with 1.10 either. Updated my fiddle! See the docu.
var handleSelect = function(e, tab) {
$("<p></p>", {
//this is new
text: "Tab at index " + tab.newTab.index() + " selected",
"class": "status-message ui-corner-all"
}).appendTo(".ui-tabs-nav", "#myTabs").fadeOut(5000, function(){
$(this).remove();
});
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
