jQuery Tabs - 클릭했을 때만 내용로드

Question

jQuery 및 웹 개발에 비교적 익숙합니다.

jQuery UI 탭을 사용하여 탭을 만듭니다.

하지만 특정 탭을 선택했을 때만 내용을로드하고 싶습니다.

Answer 1

좋아, 사용자가 탭을 클릭하면 AJAX를 통해 콘텐츠를 동적으로 가져 오는 것으로 가정합니다. 여기에는 두 가지가 포함됩니다. 은 및 의 경우에도 ajax을 통해 데이터를 가져 오는 onclick을 설정합니다. 예를 MY_TAB에 대한 onclick 이벤트

이 탭 클래스를 부여 설정

. 사용자가 원하는 탭을 클릭 할 때 handle_tab_click() 기능이 작동한다고 가정 해 보겠습니다. 여기 MY_TAB에 탭 온 클릭 이벤트를 바인딩의 예 :

$(".my_tab").bind("click", handle_tab_click); 

귀하의 handle_tab_click은() 기능은에 대한 정보를 제공 할 수있을 것 이벤트 인수가 주어집니다 요소 (이 경우에는 클래스 이름이 인 my_tab 인 요소)를 호출합니다.

function (event) { 
    if ($(event.target).hasClass("my_tab")) { /* handle tab click */ } 
    if ($(event.target).hasClass("my_tab_2")) { /* a different tab click */ } 
    if ($(event.target).hasClass("my_tab_3")) { /* ... */ } 
} 

은 자세한 내용 here의 JQuery와 이벤트 설명서를 참조하십시오.

가져 오기 데이터가 탭 (해당 정보를 가져 오기 위해)를 클릭 한 정보를 공급하면서 원격 스크립트를 호출 할 필요 아약스를 통해 데이터를 가져 오는

. 다음 스 니펫에서는 원격 스크립트 myscript.php을 호출하고 HTTP GET 인수 tab_clicked = my_tab을 제공하고 스크립트가 반환 될 때 tab_fetch_cb 함수를 호출합니다. 마지막 매개 변수는 반환되는 데이터의 유형입니다 (사용자가 선택해야합니다).

$.get("myscript.php", {tab_clicked, "my_tab"}, tab_fetch_cb, "text/json/xml") 

이 (즉, 클라이언트에서 다시 쓰기)에 이 매개 변수를 tab_clicked 처리 할 적절한 데이터를 가져오고 그것을 반환 할 인 myscript.php을 설계하는 당신에게 달려 있습니다.여기

는 tab_fetch_cb에 대한 예입니다 : 기능 here을 얻을

이

function tab_fetch_cb(data, status) { 
    // populate your newly opened tab with information 
    // returned from myscript.php here 
} 

당신은 JQuery와 에 대한 자세한 내용을 읽을 수 있고, JQuery와 아약스 기능 here

나는 할 수 없다 미안 해요 내 예제에서는 더 구체적이지만, 많은 처리 작업은 실제로 작업에 따라 다릅니다. 이미 지적했듯이 문제 해결을 위해 JQuery 플러그인을 사용할 수도 있습니다. 즉, JQuery를 사용하여 수동으로이 작업을 수행하는 방법을 배우는 것이 결코 아쉬운 일입니다.

행운을 빈다.

Answer 2

UI/탭은 Ajax를 통해 필요할 때 탭 컨텐츠로드, this 예를 확인하십시오.

Answer 3

Ajax를 통해 컨텐츠를로드하면 책갈피/브라우저 백 버튼을 처리하는 복잡성이 추가됩니다. 상황에 따라 새 페이지를 전체 페이지로로드하는 것이 좋습니다. 북 마킹/브라우저를 다시 처리하려면 URL에 앵커 정보를 추가해야합니다.

또한 탭 선택을 위해 LavaLamp을 확인하십시오. 꽤 멋진 표정입니다.

Answer 4

기본적으로 탭 위젯은 탭 섹션 onClick간에 전환되지만 이벤트는 옵션을 통해 onHover로 변경할 수 있습니다. 탭에 href를 설정하여 탭 내용을 Ajax를 통해로드 할 수 있습니다.

소스 : http://docs.jquery.com/UI/Tabs

Answer 5

당신이 레일을 사용하는 경우, 그것은 아약스 탭을 지원하는이 보석 bettertabs

을 시도 할 수 있습니다.