2015-03-15 2 views
0

Краткая информация:
Я работаю над чат-системой на основе веб-карт. Для дизайна я использую вкладки пользовательского интерфейса jQuery. Они будут использоваться для общения в разных чатах и ​​чатах. Вкладки динамически создаются при открытии новой комнаты или частного чата. Идея заключается в том, что пользователи могут их закрыть.Удалить не выбранные динамические jQuery ui tabs

Проблема:
Я вполне способен создавать вкладки динамически. Но проблема возникает, когда пользователь хочет закрыть их снова. Как-то мне нужна кнопка закрытия, чтобы отправить правильный индекс вкладки в функцию удаления вкладки. Если пользователь имеет выбранную вкладку, получить индекс легко. Но если пользователь закрывает вкладку, а другой выбирается, не так много. Итак, как я могу решить эту проблему?

код У меня до сих пор (упрощенно):

var tabs; 
var tabCounter = 1; 

$(document).ready(function() { 
    tabs = $("#tabs").tabs(); 
    var ul = tabs.find("#tabs-ul"); 

    $("<li><a href='#newTab'>New Tab</a><a href='#' onclick=\"closeTab('"+id+"')\"><img class='imgCenter' src='layout/images/system/tabClose.png'></a></li>").appendTo(ul); 
    $("<div id='newTab'>Name :<input type='text'></input></div>").appendTo(tabs); 
    tabs.tabs("refresh"); 
}); 

function closeTabs(id){ 
    var getID = tabs.tabs('option', 'active'); 
    tabs.tabs("remove", getID); 
} 

Как вы можете видеть, я уже получил это работает в случае, если выбрана вкладка. Я подготовил функцию closeTabs() с параметром id, чтобы вместо того, чтобы искать индекс, когда вкладка будет закрыта, она уже существует при ее создании. Я просто не знаю, как это сделать?

Дополнительная проблема:
Я заподозрить индексы изменяются при удалении одного из них. Если это произойдет, моя идея, подобная этой, столкнется с серьезными проблемами. Можно ли предотвратить изменение индексов? Или мне нужно использовать совершенно другой подход?

ответ

0

После того, как выяснилось, что tabs("remove", id) устарел, я решил проблему довольно легко. Во-первых, я добавил атрибут данных в список вкладок:

<li data-user='uniqueID'>...</li> 

Следующая я просто изменил мою closeTabs() функцию в:

function closeTab(id){ 
    $("li[data-user='" + id + "']").remove(); 
    $("#"+id).remove(); 
    tabs.tabs("refresh"); 
} 

Проблема решена. Работает как шарм!