javascript - jquery ui tabs select doesn't seem to work in 1.10.3

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>

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>

Share Improve this question edited May 5, 2013 at 14:08 Jesse 8,7597 gold badges49 silver badges57 bronze badges asked May 5, 2013 at 13:53 Laurence 8793 gold badges13 silver badges21 bronze badges

Add a ment |

1 Answer 1

Sorted by: Reset to default 7

See the upgrade guide for jQuery UI 1.10

Removed select event; use beforeActivate

(#7154) The select event has been removed in favor of beforeActivate. 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();
        });
}

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - jquery ui tabs select doesn't seem to work in 1.10.3 - Stack Overflow

1 Answer 1

与本文相关的文章

评论列表(0)