Question

我正在使用JQuery UI Tabs来构建用户界面。我的所有标签内容都是通过ajax加载的。但是我遇到了一个问题：当用户选择一个标签时，必须保存上一个选定标签的内容（通过ajax），我没有看到任何类似“离开当前”标签的事件（或类似这样的事件））触发我的“保存”功能。编辑：一些剪切代码（我如何构建我的标签）：

var id_p = "a value";
$( "#dialog-confirm" ).dialog({
    show: { effect: 'drop', direction: "up"},
    resizable: false,
    height:140,
    modal: true,
    buttons: {
        Yes: function() {
            var dlg = $( this );
            url = "/product/edit.php?id="+id_p;
            $.post(url, function(data) {
                data = $.parseJSON(data);
                loadUrl = data.loadUrl;
                title = data.title;
                tabIndex = data.tabIndex;
                $("#product_tabs").tabs("add",loadUrl,title);
                $("#product_tabs").tabs("select", tabIndex);
                initButtons();
                //document.location.reload();
                $( "#dialog-confirm" ).dialog( "close" );
            });
        },
        No: function() {
            $( this ).dialog( "close" );
        }
    }
});

Answer 1

我认为你想使用activate事件和ui.oldPanel来保存信息

$("#tabs").tabs({
    activate: function(event, ui) {
        //do ajax stuff with ui.oldPanel
    }
 });

然而，看起来您可能正在使用不同版本的jQuery UI，因为此版本似乎没有“添加”或“选择”方法。如果您可以确认您使用的是哪个版本，我可以提供更好的答案。

适用于jQuery UI 1.8.16

较旧版本的jQuery没有activate事件，但您可以使用select事件模仿上述功能。

$("#tabs").tabs();
var previousTab = 0; //init to what tab is selected at start
$( "#tabs" ).on( "tabsselect", function( event, ui ) {
    var previousPanel = $(this).data("tabs").panels[previousTab];
    //save tab info
    previousTab = ui.index; //store new previous tab
});

你可以在这个小提琴上看到一个例子http://jsfiddle.net/pw4y6/

Answer 2

请检查此页面，您可以使用 ui.oldTab 条件来检查哪个标签离开，

http://api.jqueryui.com/tabs/#event-activate

Jquery ui标签“onLeave”事件？

2 个答案: