2010-05-26 7 views
4

의 부하에 따라 다른 함수를 호출 나는 다음과 같은 마크 업이 : 나는 아코디언 또는 UI에서 탭 플러그인을 활용하고자하는jQuery를 아코디언/탭 - 내용

<body> 
    <div id="tabs" style="float: left"> 
     <ul> 
      <li><a href="ajax/question_0.html" title="Question 1"><span>Question 1</span></a></li> 
      <li><a href="ajax/question_1.html" title="Question 2"><span>Question 2</span></a></li> 
      <li><a href="ajax/question_2.html" title="Question 3"><span>Question 3</span></a></li> 
      <li><a href="ajax/question_3.html" title="Question 4"><span>Question 4</span></a></li> 
      <li><a href="ajax/question_4.html" title="Question 5"><span>Question 5</span></a></li> 
      <li><a href="ajax/question_5.html" title="Question 6"><span>Question 6</span></a></li> 
     </ul> 
     <div id="dynamicContent"> 
     </div> 
    </div> 
    <div class="demo-description"> 
     <p>Click tabs to see answers to Questions</p> 
    </div> 
</body> 

합니다. 로드 이벤트가 완료되면 자바 스크립트 함수를 호출하고 싶지만 각 탭에 대해 다른 함수를 호출하고 싶습니다. 거의 한 페이지에 대해 onDocumentReady를 호출하는 것과 같습니다.

나는 다음과 같은 자바 스크립트가 : 제대로 아약스 파일 모두를로드하는 것

$(function() { 
    $('#tabs').tabs().bind('tabsselect', function(event, ui) { 
     console.log("Loading: ajax/question_" + ui.index + ".html"); 
     return true; //Ensure that the tab gets selected 
    }); 
); 

을,하지만 난 JS에서 성명을 평가하는 등 뭔가를 시도 할 때마다, 무시 될 것으로 보인다. 파일을로드 한 후 내 함수가 호출되도록 각 탭마다 다른 함수 여야합니다. 아래

편집 :

전환 사실 다른 함수를 호출 내 문제를 완화 않습니다. 나는 생각하지 않았다 ...

그러나, 내가 뭘하고 있는지는 로깅을 위해 사용되는이 탭들 각각에 빈 div가있다. (Firebug가없는 웹 환경의 경우를 대비해서).

나는 다음과 같은 기능을 가지고 : 조각의 각로드 사업부에 메시지를 기록하도록되어 있지만, 새 탭이로드 될 때 로깅 중 어느 것도 수행되지 않습니다

if (typeof console === 'undefined') { 
    var console = { }; 
    console.log = function(msg) { 
     $('#dynamicContent').append(createElement('p', msg)); 
    }; 
} 

.

$(function() { 
    $('#tabs').tabs().bind('tabsselect', function(event, ui) { 
    console.log("Loading: ajax/question_" + ui.index + ".html"); 
    return true; //Ensure that the tab gets selected 
    }).bind('tabsload', function(event, ui) { 
    switch(ui.index) { 
     case 0: 
     //do something for first tab... 
     break; 
     case 1: 
     //do something for second tab... 
     break; 
     //etc... 
    } 
    }); 
); 

: 나는 정확히 후 당신, 그러나 당신이 사용할 수있는 tabsload event이 같은이 무엇 아니에요

$('#tabs').tabs({ 

    select: function(event, ui) { 
     log.debug("Loading: ajax/question_" + ui.index + ".html"); 
    }, 

    show: function(event, ui) { 
     log.debug("Finished Loading: ajax/question_" + ui.index + ".html"); 
    } 
}); 

답변

1

:

내 탭은 다음과 설정됩니다 귀하의 "각 탭마다 다른 기능이 필요합니다"라고 switch statement을 사용했지만, 무엇을해야할지, 외부 함수를 호출 할 지 등등 여기에서 할 수 있습니다. 예를 들어 href에서 스위치를 수행해야하는 경우 앵커 요소에 ui.tab을 사용할 수 있습니다.