2012-03-23 5 views
1

私はIE 8とjqueryスマートウィザードバージョン3.2.0を使用しています。スマート・ウィザードを追加の<div>タグ内に囲むと、(jqueryダイアログ・ポップアップ内にウィザードを表示する目的で)onLeaveStepイベントに関数が指定されても、ウィザードはステップを進めません。コードのJquery Smart Wizardフリーズアップ

そして今:

JavaScriptの設定ウィザード:

// 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

関連する問題