Lau*_*nce 4 javascript jquery jquery-ui
以下程序适用于早期版本的jQuery UI,但它在最新版本中不起作用.
select属性不会调用handleSelect变量中的函数.请参阅以下小提琴:工作标签程序
这是我的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>
请参阅jQuery UI 1.10 的升级指南
删除
select事件; 使用beforeActivate(#7154)该
select事件已被删除,有利于beforeActivate.有关完整详细信息,请参阅1.9弃用通知.
这里有一个 jsfiddle
更换
$("#myTabs").tabs({ select: handleSelect});
同
$("#myTabs").tabs({ beforeActivate: handleSelect});
编辑
只是注意到你的索引也不适用于1.10.更新了我的小提琴!参见文件.
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();
});
}