Question

我正在使用jQuery 1.8.2＆amp; jQuery UI 1.9.0。

以下是来自jQuery UI Tabs Demo page的可排序演示的扩展，其中包含两组标签+可排序，彼此连接http://jsfiddle.net/sujay/cUDLF/。

移动工作正常，但即使在refresh之后，标签也无法按预期工作。

要重现此问题，请尝试将未选中的标签从顶部设置移动到底部设置，然后选择它。

你会看到标签＆amp;面板都已移动到底部（底部设置选择将被取消选中）。但在选择时，顶部选项卡未被选中。

更新

我现在能够让它发挥作用。检查http://jsfiddle.net/cUDLF/6/。

但正弦接收事件只获取绝对位置而不是索引。这个位置丢失了。它总是附加到选项卡列表的末尾。

如果有办法找到索引，问题就会解决。

Answer 1

替换：

tabs.tabs( "refresh" );

使用：

tabs.tabs('destroy');
tabs.tabs();

Answer 2

我终于找到了解决这个问题的方法。

可以在http://jsfiddle.net/cUDLF/12/找到工作解决方案。

感谢this answer提示。

接收代码段似乎

            receive: function (event, ui) {
            var receiver = $(this).parent(),
                sender = $(ui.sender[0]).parent(),
                tab = ui.item[0],
                tab$ = $(ui.item[0]),
            // Find the id of the associated panel
                panelId = tab$.attr( "aria-controls" ),
                insertBefore = document.elementFromPoint(event.pageX,event.pageY);

            tab$ = $(tab$.removeAttr($.makeArray(tab.attributes).
                          map(function(item){ return item.name;}).
                          join(' ')).remove());
            tab$.find('a').removeAttr('id tabindex role class');
            if(insertBefore.parentElement == tab){
                insertBefore = document.elementFromPoint(event.pageX + insertBefore.offsetWidth, event.pageY);
            }
            insertBefore = $(insertBefore).closest('li[role="tab"]').get(0);
            if(insertBefore)
                tab$.insertBefore(insertBefore);
            else
                $(this).append(tab$);

            $($( "#" + panelId ).remove()).appendTo(receiver);
            tabs.tabs('refresh');
        }

如果您发现此方法存在任何问题，请与我们联系。

Answer 3

以下是工作示例：http://jsfiddle.net/5qY5B/

如果newTab和oldTab来自不同的标签容器，解决方法是阻止标签更改上的事件：）

示例：

注意到这一点：

var tabs = $( "#tabs_1, #tabs_2" ).tabs();

使用此功能（更新）：

var tabs = $( "#tabs_1, #tabs_2" ).tabs({
        beforeActivate : function( event, ui ) {        
            if(ui.oldTab.parent().parent().attr("id") != ui.newTab.parent().parent().attr("id")) {
                if( $( this ).tabs( "option", "active") == -1) $( this ).tabs( "option", "active", 0); // NEW
                return false;
            }        
        }    
    });

Answer 4

这似乎适用于接收：

            tabs.tabs("destroy");
            $( "#" + panelId ).appendTo(receiver);
            tabs.tabs();

在这里演示http://jsfiddle.net/nxtwrld/yxgUR/1/

多个jQuery UI选项卡+已连接的Sortables无法按预期工作

4 个答案: