2010-04-03 7 views
1

현재 선택된 탭과 그 내용을 대체하는 가장 좋은 방법은 무엇입니까? 콘텐츠는 URL을 통해로드되지 않고 jquery로 동적으로 생성됩니다.JQuery UI 탭 - 탭과 내용 바꾸기

모든 탭 코드 또는 탭 이벤트 처리기 (표시, 추가 등)의 외부에서이 작업을 수행해야합니다. 어떻게해야 페이지에 다른 링크가 클릭 한 경우 다음

  • 변경 탭의 제목
  • 변경 탭의 클래스 명
  • 지우기 밖으로 tabcontent div의
  • 변경 tabcontent의 모든 요소 DIV의 클래스 이름은 tabcontent div의

참고 유일한 기준이 링크의 C 그 내부에 새로운 콘텐츠를 생성

  • lick() 핸들러는 JQuery 탭 객체 ($ Tabs)에있다. 선택한 탭을 $Tabs.tabs('option','selected')으로 가져올 수 있습니다. 하지만 선택한 탭의 탭과 패널에 대한 참조를 얻으려면 어떻게해야합니까? jquery 탭 처리기 (표시, 추가 등)의 내부에서 ui.tabui.panel에 액세스 할 수 있지만 탭 옵션에서 가져 오는 방법이 있습니까?

    현재 선택된 탭을 제거한 다음 동일한 인덱스 위치에 새 탭을 추가하는 것이 더 좋습니까? 내가 생각하는 add() 핸들러에 탭 내용을 생성하는 코드를 넣어야합니다.

    편집 : 나는 아무도 어떤 제안이 없다는 사실에 놀랐습니다. 현재 선택된 탭을 제거한 다음 동일한 위치에 새 탭을 추가하여 작업하고 있습니다. 빠른 브라우저에서는 괜찮은 솔루션이지만 자바 스크립트가 느린 브라우저에서는 실제로 탭이 사라진 것을 볼 수 있으며 새 탭이 표시됩니다. 작동하지만 실제로는 최적이 아닙니다.

  • 답변

    1

    FWIW - 동적으로 생성 된 탭 콘텐츠 div 컨테이너를 참조하여 내용을 수정하는 것과 동일한 문제가있었습니다. 나는 함께 DIV 컨테이너 "탭"의 내용을 참조 할 수 있었다 :

    컨테이너 내가 수정하는 데 필요한 아약스 탭의 인덱스를했다 1
    <p> 
    $("#ui-tabs-1").html 
    </p> 
    

    . 바라건대 그게 당신을 조금 도와줍니다.

    0

    tab-panel (=content) index이 0이 아닌 반면, 선택된 탭 색인은!

    '#ui-tabs-1'에 '1'이 있으므로 'ui.index' (= selected tab) + 1 값입니다!