JQuery와 UI 탭 - AJAX 탭의 컨텐츠

모든, 나는 JQuery와 UI를 중첩 탭을 사용하고JQuery와 UI 탭 - AJAX 탭의 컨텐츠

를로드합니다. 다음과 같은 구조를 생각해보십시오. Animals, Birds라는 두 개의 기본 탭이 있습니다. 동물 아래에는 두 개의 탭 "고양이", "개"가 있습니다. 문제는

<div id="fragment-1"> 
    <ul> 
     <li><a href="/public/catstab" title="Cats"><span>Cats</span></a></li> 
     <li><a href="/public/dogstab" title="Dogs"><span>Dogs</span></a></li> 
    </ul> 
</div> 

<script type="text/javascript"> 
$(document).ready(function() 
{ 
    $("#tabs-loading-message").show(); 
    $('#fragment-1').tabs({cache:false, spinner:''}); 
}); 
</script>

, 나는로드 공통 사업부를 유지하려면 : 그래서, 그들에 대한 코드는 다음과 같이 선택하면 두 탭 "고양이"와 "개는".. AJAX를 통해로드해야한다입니다 AJAX URL. 예 : 고양이 또는 개를 클릭하면 해당 탭의 콘텐츠는 "cats" div 및 "dogs" div로 이동하는 대신 "<div id='commonDiv'></div>으로 이동해야합니다. 탭 안의 어느 곳에서든지 reload("Dogs")을 호출하면로드가 재사용 될 수 있으므로 "dogs" 탭 내용을 다시로드해야합니다.

어떻게하면됩니까?

출처

2010-02-03 Jake

어떻게 끝내셨습니까? jquery-tabs를 사용 했습니까? 아니면 자신 만의 아약트 하이재킹을 했습니까 (그렇게 열심히하지는 않았지만 여전히 답변이 언급 된대로 CSS가 필요합니다 ...) –

나는 그것을 작동시키지 못했습니다. – Jake

문서를 살펴보면, 어떻게하는지에 대한 알림이 뜹니다. 그러나 탭 위젯을 사용하지 않고 기본 탭 기능에 대한 고유 한 클릭 이벤트를 정의하는 것은 쉽습니다.

<div id="fragment-1"> 
    <ul> 
     <li><a href="/public/catstab" title="Cats"><span>Cats</span></a></li> 
     <li><a href="/public/dogstab" title="Dogs"><span>Dogs</span></a></li> 
    </ul> 
    <div id="commonDiv"></div> 
</div> 

$(document).ready(function(){ 
    $('#fragment-1 a').click(function(){ 
     $('#commonDiv').load($(this).attr('href')); 
    }); 
}):

탭 위젯이 사용자를 대신하여 사용자 지정 CSS 스타일을 정의해야합니다.

출처

2010-02-03 21:15:17 munch

잘 모르겠습니까? 모든 탭에 똑같은 표제를 부여하면 UI는 모든 탭에 대해 새 표제를 만들고 필요에 따라 숨기거나 표시하는 대신 동일한 DIV를 다시 사용하여 콘텐츠를로드합니다. 좋은 점은 브라우저가 많은 DIVS가로드되었지만 숨겨져있어 무거운 가중치를 얻지 못했기 때문입니다.

출처

2010-05-08 14:47:05

JQuery와 UI 탭 - AJAX 탭의 컨텐츠

답변

관련 문제