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>
タグの中にネストされているとウィザードが機能しない理由を説明してください。
ありがとうございましたが、ステップの要素は使用できないようです(テキストボックス、ラジオボタン)。私は要素に焦点を当てることができますが、キーボードからの入力は受け付けません。 – Andrew