0

我正在使用 JQuery UI 选项卡来构建用户界面。我所有的标签内容都是通过 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" );
        }
    }
});
4

2 回答 2

1

我想你想使用激活事件和 ui.oldPanel 来保存信息

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

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

对于 jQuery UI 1.8.16

旧版本的 jQuery 没有激活事件，但是您可以通过使用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/看到一个例子

于 2013-07-25T12:23:47.020 回答
0

请检查此页面，您可以使用ui.oldTab条件检查哪个选项卡离开，

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

于 2013-07-25T12:33:57.457 回答