JQuery UI 탭에서 아약스를 사용하여 문서 조각로드

JQuery UI 탭을 사용하고 있으며 생성 된 페이지에서 조각을로드하려고합니다. 그러나 전체 페이지가로드됩니다. 코드는 다음과 같습니다.JQuery UI 탭에서 아약스를 사용하여 문서 조각로드

<head> 
<script src="/js/jquery-ui-1.8.15.custom.min.js"></script> 
<script> 
    $(function() { 
     $("#tabs").tabs(); 
    }); 
</script> 
</head> 


<div id="tabs"> 
<ul > 
    <li><a href="/page #content">Tab Head</a></li> 
</ul> 
</div>

쉬운 방법이 있습니까? 또한, .load() 또는 .get() ajax 호출을 사용하는 탭 플러그인입니까?

출처

2011-09-16 kpentchev

좋은 질문 : HTML이 같이 보일 것이다

$('#tabs').tabs({ select: function(event, ui) { var $tabAnchor = $(ui.tab); if (ui.index == 0 && !$tabAnchor.data('completed')) { $($tabAnchor.attr('href')).load($tabAnchor.data('content-url'), function() { // indicate the content has been loaded $tabAnchor.data('completed', true); }); } } });

: 그래서, 그것과 같을 것입니다. HREF에서 공간을 제거하면 어떻게됩니까? – Blazemonger

원하는 탭을 가로 채서 내용을로드하여 직접 처리해야 할 수도 있습니다. 예를 들어 데이터 속성에 조각을로드 할 실제 URL (예 : data-content-url="/page #content")을 포함시키고 select 행사.

<div id="tabs"> 
    <ul> 
     <li><a href="#tabs1" data-content-url="/page #content">Tab Head</a></li> 
     <li><a href="#tabs2">Tab 2</a></li> 
    </ul> 

    <div id="tabs1"></div> 
    <div id="tabs2">...</div> 
</div>

출처

2011-09-18 01:11:46

고마워요! 아직도 이것을하기위한 더 일반적인 방법이 있어야한다고 생각합니다. 구현하기 쉬운 JQuery .load 사양을 보면 ... – kpentchev

로드 된 콘텐츠를 구문 분석/준비/편집하고 페이지 조각을 가져 오기 위해로드 이벤트 ("이 탭은 원격 탭의 콘텐츠가로드 된 후에 트리거됩니다.")를 사용할 수 있습니다.

출처

2011-09-16 13:38:11 Christian

JQuery UI 탭에서 아약스를 사용하여 문서 조각로드

답변

관련 문제