2012-03-23 2 views
1

저는 IE 8 및 jquery 스마트 마법사 버전 3.2.0을 사용하고 있습니다. 스마트 한 마법사를 추가 <div> 태그 (jquery 대화 상자 팝업 창 내에 마법사를 표시 할 의도로) 내에 넣을 때 마법사가 onLeaveStep 이벤트에 대해 함수가 지정되면 단계를 진행하지 않습니다. 코드에 대한Jquery Smart Wizard 고정식

그리고 지금 :

자바 스크립트 설정 마법사 :

// wizard functions 
function leaveAStepCallback(obj) { 
    // Get current step 
    var step_num = obj.attr('rel'); // get the current step number 
} 
function onFinishCallback() { 
    alert('Finish Called'); 
} 
function showStep(obj) { 
    // Get current step 
    var step_num = obj.attr('rel'); // get the current step number 
} 

그리고 HTML 마크 업 (: 마법사의 이벤트와 연관된

$('#wizard').smartWizard({ transitionEffect: 'slideleft', onLeaveStep: leaveAStepCallback, onFinish: onFinishCallback}); 

간단한 기능 간결함을 위해 <p> 태그 내의 단계 내용을 제거했습니다. 이로 인해 내용이있는 것과 같은 기능 부족이 발생하여 제외 될 수 있습니다.

<div id="wizDialog"> 

<div id="wizard" class="swMain"> 
     <ul> 
      <li><a href="#step-1"> 
      <label class="stepNumber">1</label> 
      <span class="stepDesc"> 
       Step 1<br /> 
       <small>Step 1 - </small> 
      </span> 
      </a></li> 
      <li><a href="#step-2"> 
      <label class="stepNumber">2</label> 
      <span class="stepDesc"> 
       Step 2<br /> 
       <small>Step 2 - </small> 
      </span> 
      </a></li> 
      <li><a href="#step-3"> 
      <label class="stepNumber">3</label> 
      <span class="stepDesc"> 
       Step 3<br /> 
       <small>Step 3 - </small> 
      </span>     
      </a></li> 
      <li><a href="#step-4"> 
      <label class="stepNumber">4</label> 
      <span class="stepDesc"> 
       Step 4<br /> 
       <small>Step 4 - </small> 
      </span>     
      </a></li> 

      <li><a href="#step-5"> 
      <label class="stepNumber">5</label> 
      <span class="stepDesc"> 
       Step 5<br /> 
       <small>Step 5 - </small> 
      </span>     
      </a></li>  
      <li><a href="#step-6"> 
      <label class="stepNumber">6</label> 
      <span class="stepDesc"> 
       Step 6<br /> 
       <small>Step 6 - </small> 
      </span>     
      </a></li> 
      <li><a href="#step-7"> 
      <label class="stepNumber">7</label> 
      <span class="stepDesc"> 
       Step 7<br /> 
       <small>Step 7 - </small> 
      </span>     
      </a></li> 
      <li><a href="#step-8"> 
      <label class="stepNumber">8</label> 
      <span class="stepDesc"> 
       Step 8<br /> 
       <small>Step 8 - </small> 
      </span>     
      </a></li>      
     </ul> 
     <div id="step-1"> 
     <h2 class="StepTitle">Step 1 Content</h2> 
      <p> 
      </p>         
     </div> 
     <div id="step-2"> 
     <h2 class="StepTitle">Step 2 Content</h2> 
      <p> 
      </p>   
     </div>      
     <div id="step-3"> 
     <h2 class="StepTitle">Step 3 Content</h2> 
      <p> 
      </p> 
     </div> 
     <div id="step-4"> 
     <h2 class="StepTitle">Step 4 Content</h2> 
      <p> 
       </p> 

     </div> 
     <div id="step-5"> 
     <h2 class="StepTitle">Step 5 Content</h2> 
      <p> 
      </p> 

     </div> 
     <div id="step-6"> 
     <h2 class="StepTitle">Step 6 Content</h2> 
      <p> 
       </p> 

     </div> 
     <div id="step-7"> 
     <h2 class="StepTitle">Step 7 Content</h2> 
      <p> 

      </p> 

     </div> 
     <div id="step-8"> 
     <h2 class="StepTitle">Step 8 Content</h2> 
      <p> 
      </p> 

     </div>  

</div> 
</div> 

아무도 비슷한 결과가 있었습니까? 또는 추가 <div> 태그 내에 중첩 된 경우 마법사가 작동하지 않는 이유에 대한 설명이 있습니까?

답변

1

onLeaveStep을 사용하려면 부울 값을 반환해야합니다. true를 반환하면 마법사를 통해 진행할 수 있습니다.

+0

감사합니다. 효과가있는 것으로 보였지만 단계의 요소를 사용할 수없는 것 같습니다 (텍스트 상자, 라디오 버튼). 요소에 중점을 둘 수는 있지만 키보드에서 입력을받지 않습니다. – Andrew