내용로드 탭 켜기 Spry 사용

Question

처음에 모든 탭의 모든 내용을로드하는 대신 탭을 열 때 Spry 탭의 내용을로드 할 수 있습니까?

iframe을 사용하지 않고이 작업을 수행하는 것이 더 좋습니다.

Answer 1

페이지를로드하는 것을 제외하고는 빈 콘텐츠로 모든 탭을 시작하는 것이 간단한 방법 일 수 있습니다.

단순한보기 원본에서 본 것은이 구조를 가지고 있습니다.

<div class="TabbedPanels" id="tp1"> 
    <ul class="TabbedPanelsTabGroup"> 
    <li class="TabbedPanelsTab" tabindex="0">Tab 1</li> 
    <li class="TabbedPanelsTab" tabindex="0">Tab 2</li> 
    <li class="TabbedPanelsTab" tabindex="0">Tab 3</li> 
    <li class="TabbedPanelsTab" tabindex="0">Tab 4</li> 
    </ul> 
    <div class="TabbedPanelsContentGroup"> 
    <div class="TabbedPanelsContent"> Tab 1 Content </div> 
    <div class="TabbedPanelsContent"> Tab 2 Content </div> 
    <div class="TabbedPanelsContent"> 
     <p>Tab 3 Content </p> 
     <p>More Content</p> 
     <p>More Content</p> 
    </div> 
    <div class="TabbedPanelsContent"> Tab 4 Content</div> 
    </div> 
</div> 

# tp1.TabbedPanelsTab에서 onclick 이벤트 리스너를 첨부하고이를 ajax 요청에 연결하십시오. 사용자가 탭을 클릭하면 요청을 시작하고 양식을 채 웁니다.

특정 양식의 데이터를 가져올 위치를 참조하는 ID를 추가하는 것이 더 쉽습니다. 예를 들어 탭 하나의 ID는 "salesRecords"입니다. getContent.php에서 모든 데이터를 가져옵니다. 이제 사용자가 onclick 이벤트를 활성화하면 ajax 요청을 사용하여 url "getContent.php?id="+this.id에서 정보를 가져옵니다. 물론 쿼리 문자열을 사용하여 관련 정보를 반환합니다.