jquery ui选项卡选择似乎不工作在1.10.3

问题描述：

下面的程序在早期版本的jQuery UI中起作用，但它在最新版本中不起作用。jquery ui选项卡选择似乎不工作在1.10.3

select属性不调用handleSelect变量中的函数。请参阅下面的小提琴：working tabs program

这里是我的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>

答

代码见upgrade guide的jQuery UI 1.10

删除select事件;使用beforeActivate

（＃7154）select事件已被删除，转而使用beforeActivate。 See the 1.9 deprecation notice的全部细节。

这里是一个jsfiddle

与

$("#myTabs").tabs({ beforeActivate: handleSelect});

编辑内容取代

$("#myTabs").tabs({ select: handleSelect});

只是注意到你的索引也不能用于1.10。更新我的小提琴！查看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(); 
     }); 
}

谢谢SirDerpington你说的对吧 – Laurence 2013-05-05 16:51:49

不客气！升级前检查升级指南始终是个好主意。 :)感谢您接受我的答案 – SirDerpington 2013-05-05 16:53:52

jquery ui选项卡选择似乎不工作在1.10.3

相关推荐