4

以下程序适用于早期版本的 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>
4

1 回答 1

7

请参阅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();
        });
}
于 2013-05-05T14:01:22.710 回答