Переместить вкладки jQuery-UI в другой набор - PullRequest
Новая
       32

Переместить вкладки jQuery-UI в другой набор

2 голосов
/ 26 августа 2011

У меня есть 2 набора (set1, set2) вкладок (все они созданы методом add). У меня также есть оба набора для сортировки и использование опции подключаемого списка сортируемого, я сделал возможным перемещение вкладок из набора 1 в набор 2 и наоборот.

Но это не перемещает div, содержащий содержимое вкладки. Итак, я написал следующую функцию для перемещения div (вызывается, когда запускается событие over sortable 

    migrateTabDiv:function(e,ui){
        console.log( ui.item.find("a").attr("href") );
        console.log( $(this).parent() );
        var relatedContentDiv=$( ui.item.find("a").attr("href") );

        console.log(relatedContentDiv);
        $(this).parent().append( relatedContentDiv[0] );
    }

Этот код перемещает Div в правильный набор, но теперь, когда я пытаюсь сделать вкладку активной, я получаю следующую ошибку

Uncaught jQuery UI Tabs: Mismatching fragment identifier.

Из этого я понимаю, что вкладки пользовательского интерфейса также используют какое-то внутреннее представление, которое связывает содержимое вкладок с набором.

Основная функциональность, которую я пытаюсь достичь, - это возможность перетаскивать вкладки из одного набора вкладок в другой набор вкладок. Как я могу сделать это возможным?

1 Ответ

0 голосов
/ 26 августа 2011

Я взломал работу вокруг. Это не самый эффективный метод, но он работает 

migrateTabDiv:function(e,ui){

    var oldIndex=ui.item.data('originIndex');
    var label=ui.item.find("a").text();
    var id=ui.item.find("a").attr("href");
    var currentIndex = ui.item.index()+1;


    var jRelatedTabContentDiv=$( id ).find(".tabContent").detach(); //detach and keep the old content

    ui.sender.parent().find( id ).remove(); // remove the old div 
    ui.item.remove(); // remove the tab li that is appended by the sortable in the new set


    $(this).parent().sortable( "refresh" ).tabs("add", id , label, currentIndex);  //add a similar tab
    $(this).parent().find( id ).append( jRelatedTabContentDiv );  //add teh old content
}

И инициализация вкладок идет как 

$("#fileTabsMain").tabs().find( ".ui-tabs-nav" ).sortable({
         connectWith: "#fileTabsVSplit .ui-tabs-nav",
         placeholder: "ui-state-highlight",
         forcePlaceholderSize:true,
         receive:interfaceView.migrateTabDiv,
         start: function(event, ui) {
                    ui.item.data('originIndex', ui.item.index());
                 },
         });

И аналогичная инициализация для #fileTabsVSplit также.

...