4

jQuery1.8.2とjQueryUI1.9.0を使用しています。

これは、 jQuery UIタブデモページからのソート可能なデモの拡張であり、2セットのタブ+ソート可能で、相互に接続されていますhttp://jsfiddle.net/sujay/cUDLF/。

移動は正常に機能refreshしますが、タブが期待どおりに機能しなかった後でも。

問題を再現するには、選択されていないタブをトップセットからボトムセットに移動してから選択してみてください。

タブとパネルの両方がボトムセットに移動したことがわかります（ボトムセットの選択は選択解除されます）。ただし、選択すると、トップセットのタブが選択解除されます。

アップデート

私は今それを機能させることができます。http://jsfiddle.net/cUDLF/6/を確認してください。

ただし、正弦波の受信イベントは絶対位置のみを取得し、インデックスは取得しません。位置が失われます。常にタブリストの最後に追加されます。

インデックスを見つける方法があれば、問題は解決されます。

4

4 に答える 4

1

交換：

tabs.tabs( "refresh" );

と：

tabs.tabs('destroy');
tabs.tabs();
于 2012-10-30T10:00:08.480 に答える
1

私はついにこの問題を解決する方法を見つけました。

実用的なソリューションはhttp://jsfiddle.net/cUDLF/12/にあります。

この回答のヒントに感謝します。

受信スニペットは次のようになります

            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');
        }

このアプローチで問題が見つかった場合はお知らせください。

于 2012-11-26T16:10:54.513 に答える
0

これは受信で機能するようです：

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

デモはこちらhttp://jsfiddle.net/nxtwrld/yxgUR/1/

于 2012-11-01T10:57:04.727 に答える
0

これが実際の例です: 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;
            }        
        }    
    });
于 2012-10-31T09:59:43.223 に答える