jQuery UI 탭에서 URL/페이지를 직접로드하는 방법은 무엇입니까?

Question

필자는 href가 탭을 선택할 때로드 할 URL 인 탭 집합을 가지고 있습니다.

문서에 이어 다음 선택 옵션을 추가했습니다.

$('#example').tabs({ 
select: function(event, ui) { 
var url = $.data(ui.tab, 'load.tabs'); 
if(url) { 
location.href = url; 
return false; 
} 
return true; 
} 
}); 

<script> 태그 (ASP.NET 마스터 페이지)의 맨 위에 있습니다.

페이지가로드되지만 시각적으로 탭이 선택되지 않습니다. 즉, 탭 # 3 콘텐츠가 표시되는 경우에도 첫 번째 탭이 항상 선택됩니다.

위의 스크립트를 FireBug에서 추적 할 때 location.href=url이 실행되면 새 페이지가로드되고 return 문은 실행되지 않습니다. 이게 문제 야?

감사

정보 그냥 내가 아약스를 통해 탭의 내용을로드하는 것을 시도하고 있지 않다 명확히하지만 다시 게시 할 필요 싶었다 추가. 다시 게시와 함께 클릭 한 탭을 선택한 탭이되게하고 싶습니다. 위의 예제는 jQueryUI/Tabs 페이지의 3.6 절에서 나온 것입니다. 방화범 위의 스크립트를 추적에서

Answer 1

는 같이 location.href 일단 = URL이 실행 새로운 페이지를로드하고 복귀 문은 실행되지 않습니다. 이것이 문제입니까?

location.href=url을 수행하면 페이지를 종료하고 현재 코드 실행이 중지됩니다.

코드에서 현재 선택할 수있는 페이지를 알 수 없습니다. AJAX를 통해 콘텐츠를 표시하거나로드하는 현재 요소에 CSS 선택기를 추가해야합니다.

---

은 현재 탭을 선택합니다 : 당신이 알아야 할

우선은 탭에 해당하는 페이지입니다. 이러한 정보를 제공하지 않았으므로 URL에 tab의 선택한 탭을 정의하는 매개 변수가 있다고 가정합니다.

당신은 ASPX에 currenttab의 인덱스를 제공해야합니다 (잭 : QueryString을을 검증) : 그러나

$('#example').tabs({ 
    selected: currentTab || 0, 
    select: function(event, ui) { 
    var url = $.data(ui.tab, 'load.tabs'); 
    if(url) { 
     location.href = url + "?tab=" + ui.index; 
     return false; 
    } 
    return true; 
    } 
}); 

하십시오 :이 코드를 사용

<%= string.Format("var currentTab = {0};", Request.QueryString["tab"]) => 

를 그리고 자바 스크립트에

을

새 창의 탭을 여는 것이 예기치 않은 경우입니다. 예 : 사용 불능 문제가있는 일관되지 않은 동작 (http://www.useit.com/alertbox/tabs.html).당신이 jQuery를 워드 프로세서에 게시 된 코드를 찾을 수있는 곳

는 나도 몰라,하지만 그건 잘못된 하나입니다

---

는 탭을 통해 AJAX를로드합니다. docs에 따르면

:

탭은 눈에 거슬리지 방식으로 Ajax를 통해로드 탭의 컨텐츠를 지원합니다.

당신이 필요로하는 HTML은 약간 정적 탭에 대한 을 사용하는 것과 다른 입니다 : (내용이로드되는 에서) 기존의 자원을 가리키는 링크 의 목록없이 추가 컨테이너에서 모두 (눈에 거슬리지!).

는 그래서 HTML이 있어야한다 : 테이너 '마크 업 는 즉석에서 만들어 질 것입니다

<div id="example"> 
    <ul> 
     <li><a href="ahah_1.html"><span>Content 1</span></a></li> 
     <li><a href="ahah_2.html"><span>Content 2</span></a></li> 
     <li><a href="ahah_3.html"><span>Content 3</span></a></li> 
    </ul> 
</div> 

및 자바 스크립트가 있어야한다 : [정보] 드미트리에 대한

$(function() { 
    $("#example").tabs(); 
});