웹 응용 프로그램을 만들고 있는데 Tabs 위젯을 사용하여 대부분의 웹 브라우저에서 찾은 탭 기능을 복제하려고합니다. 사용자가 탭을 이동 (정렬)하고 탭을 동적으로 만들고 탭을 동적으로 닫을 수 있기를 바랍니다.Dynamic JQuery UI 탭 제거
옮겨진 탭을 삭제하는 데 문제가 있습니다.
하나, 둘, 셋 :
라는 세 개의 탭이있다 말할 수 있습니다.
내가 탭이 같은 있습니다 "한"그래서 이동하는 경우 :
둘, 셋과
내가 2의 인덱스가 "하나"를 삭제 한 탭을 "3"이 삭제됩니다. 탭은 이제 다음과 같습니다.
2 개 중 하나입니다.
많은 시나리오를 테스트했으며 탭을 제거하면 나에게 나타납니다. JQueryUI는 처음에는 인덱스 값이있는 잘못된 탭을 제거하고 현재 인덱스 값이있는 탭은 제거합니다.
순서를 변경할 때 탭에서 이전 인덱스 값을 유지하므로 제거하려고하면 예기치 않은 동작이 발생할 수 있습니다. 당신과 같이, 삭제하기 전에 탭을 다시 초기화하여 인덱스를 업데이트하도록 강요 할 수있는 탭이 DOM에 li 요소의 위치에 따라 설정 될 때 인덱스가 생성되기 때문에
$('#tabs').tabs('destroy').tabs();
$('#tabs').tabs('remove', 2);
이 작동합니다. 탭을 옮길 때 li 위치는 탭 플러그 인에서 색인 값이 변경되지 않더라도 DOM에서 업데이트됩니다.
물론 매우 복잡한 설정을 사용하는 경우 성능에 부정적인 영향을 미칠 수 있습니다.이 경우 탭 인덱스를 업데이트하는 다른 방법을 찾아 낼 수도 있고 원래 인덱스를 다음과 같이 매핑하는 배열을 유지할 수도 있습니다. 현재의 인덱스 성가 시게
.click(function(e) {
$tab.tabs('remove',$tab.tabs('option','selected'));
});
나는 일시적으로 이러한 방식으로 문제를 해결했다. 이제 탭과 패널 자체를 렌더링하는 HTML을 제거하고 탭을 새로 고쳐야합니다 :
function removeTab(tabId) {
var tabIdStr = "#tabs-" + tabId
// Remove the panel
$(tabIdStr).remove();
// Refresh the tabs widget
tabs.tabs("refresh");
// Remove the tab
var hrefStr = "a[href='" + tabIdStr + "']"
$(hrefStr).closest("li").remove()
}
더 이상 jQueryUI tab API에 제거하지 :
jQuery를 UI가 탭에 대한 ID를뿐만 아니라 인덱스를 사용하지 않는 이유는 아무 생각이 방법은 저희를위한 두통의 전체 슬루 또한 또한 이끌어 냈습니다. –