我有一个简单的html表单,嵌套jQuery步骤.
主向导有5个步骤,第3步有一个包含3个步骤的子向导.
单击主向导的“下一步”时,移动步骤并显示内容,但在第3步(具有子向导的步骤)之后,选项卡移动到4rth但是在达到4rth步时没有显示内容,如果我禁用了显示子向导的jQuery脚本,主要的4rth步骤显示内容.
我尝试了各种论坛,并开始调试jQuery Steps库一段时间,但无法找出原因.
任何帮助表示赞赏.
这是可执行的代码.
$("#frmMainWizard").steps({
headerTag: "h3",bodyTag: "section",transitionEffect: "slide",// "fade",stepsOrientation: "vertical"
//enableAllSteps: true,//enablePagination: false,});
var childForms = $(".frmWizardSteps");
$.each(childForms,function() {
console.log(this.id);
var currentSubStesId = '#' + this.id;
$(currentSubStesId).steps({
headerTag: "h4",bodyTag: "div",transitionEffect: "slideLeft",stepsOrientation: "vertical"
//autoFocus: true,//enableAllSteps: true,//enablePagination: false
});
});
$('#btnPrev').click(function() {
$("#frmMainWizard").steps('prevIoUs');
});
$('#btnNext').click(function() {
$("#frmMainWizard").steps('next');
});
/* Wizard styles - override jquery steps */
.wizard.clearfix > .content.clearfix {
overflow: auto !important;
}
/*
.frmMainWizard
{
border-style: solid;
border-color: blue;
border-width: 5px;
overflow:auto !important;
}
*/
/*
.frmWizardSteps
{
border-style: solid;
border-color: red;
border-width: 5px;
overflow:auto !important;
}
*/
.frmWizardSteps.wizard,.frmWizardSteps.tabcontrol {
width: 95% !important;
}
.frmWizardSteps.wizard > .steps a,.frmWizardSteps.wizard > .steps a:hover,.frmWizardSteps.wizard > .steps a:active {
padding: 0.5em 0.5em !important;
}
.frmWizardSteps .content {
/*position: relative !important;*/
min-height: 20em !important;
}
.frmWizardSteps > .actions > ul {
display: inline-block;
text-align: right;
}
<link href="https://godwin.azurewebsites.net/content/jquery.steps.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://godwin.azurewebsites.net/Scripts/jquery.steps.js"></script>
<div id="frmMainWizard">
<h3>Pre prerequisites</h3>
<section>
<input id="aak_0" name="aak_0" type="checkBox" value="true" />
<label>Agent Acknowledgement</label>
<textarea class="form-control" cols="20" id="hm_0" name="hm_0" rows="5" style="min-width: 350px; width:auto;">Help material for Pre prerequisites</textarea>
<br />
<input id="sc_0" name="sc_0" type="checkBox" value="true" />
<label>Completed this step</label>
<br />
</section>
<h3>Prerequisites</h3>
<section>
<input id="aak_1" name="aak_1" type="checkBox" value="true" />
<label>Agent Acknowledgement</label>
<textarea class="form-control" cols="20" id="hm_1" name="hm_1" rows="5" style="min-width: 350px; width:auto;">Help material for prerequisites</textarea>
<br />
<input id="sc_1" name="sc_1" type="checkBox" value="true" />
<label>Completed this step</label>
<br />
</section>
<h3>Actual work</h3>
<section>
<br />
<input id="aak_2" name="aak_2" type="checkBox" value="true" />
<label>Agent Acknowledgement</label>
<textarea class="form-control" cols="20" id="hm_2" name="hm_2" rows="5" style="min-width: 350px; width:auto;">Help material for Actual work</textarea>
<br />
<br />
<div class="frmWizardSteps" id="frmWizardStep_c7514cd1-bf01-4adb-ba2a-4cd546bfc0a1">
<h4>Pre work</h4>
<div>
<br />
<br />
<textarea class="form-control" cols="20" id="hm_2_0" name="hm_2_0" rows="5" style="min-width: 350px; width:auto;">Help for Pre work</textarea>
<br />
</div>
<h4>Current work</h4>
<div>
<textarea class="form-control" cols="20" id="hm_2_1" name="hm_2_1" rows="5" style="min-width: 350px; width:auto;">Help for Current work</textarea>
<br />
</div>
<h4>Post work</h4>
<div>
<textarea class="form-control" cols="20" id="hm_2_2" name="hm_2_2" rows="5" style="min-width: 350px; width:auto;">Help for Post work</textarea>
<br />
</div>
</div>
</section>
<h3>Post actions</h3>
<section>
<input id="aak_3" name="aak_3" type="checkBox" value="true" />
<label>Agent Acknowledgement</label>
<textarea class="form-control" cols="20" id="hm_3" name="hm_3" rows="5" style="min-width: 350px; width:auto;">Help material for Post actions</textarea>
<br />
<input id="sc_2_3" name="sc_2_3" type="checkBox" value="true" />
<label>Completed this step</label>
<br />
</section>
<h3>Post post actions</h3>
<section>
<input id="aak_4" name="aak_4" type="checkBox" value="true" />
<label>Agent Acknowledgement</label>
<textarea class="form-control" cols="20" id="hm_4" name="hm_4" rows="5" style="min-width: 350px; width:auto;">Help material for Post post actions</textarea>
<br />
<input id="sc_3" name="sc_3" type="checkBox" value="true" />
<label>Completed this step</label>
<br />
</section>
</div>
<div>
<button id="btnPrev">MainPrev</button>
<button id="btnNext">MainNext</button>
</div>
解决方法
试试我根据@medievo在
this post建议的解决方案制作的
JSfiddle working sample.
显然,问题是初始化和显示子向导后,不再调用主向导的onStepChange事件处理程序.调试库后,我可能会提供其他信息.会让你更新.
关于解决方案：
假设我们有两个函数可以使用jquery.steps库初始化主向导和子向导.
主向导的功能如下所示：
var shoMainWizard = function(){
$("#main-wizard").steps({
/*
All your jquery.steps config stuff here
plus the following event handlers
*/
onStepChanging: function (event,currStepIndex,nextStepIndex) {
// If we are moving on the step which contains the sub-wizard (index 2)
if (nextStepIndex == 2){
shoSubWizard(currStepIndex,nextStepIndex);
}
return true;
},onStepChanged: function (event,priorStepIndex) {
$("#main-wizard-p-" + priorStepIndex).hide();
$("#main-wizard-p-" + currStepIndex).fadeIn();
}
});
};
请注意,onStepChanging处理程序使子向导初始化并在第一次调用中显示,并且只显示在下一次调用中.
另请注意,onStepChanged处理程序通过隐藏上一步视图来切换视图并显示下一步视图.
子向导的功能如下所示：
var shoSubWizard = function(currStepIndex,nextStepIndex){
// if sub-wizard note rendered yet
if (!$('#sub-wizard').hasClass('wizard')){
/*
All your jquery.steps config stuff here
plus the following event handlers
*/
onFinished: function() {
$("#main-wizard").steps("next");
}
});
}
// otherwise,display sub-wizard with last changes
else {
$("#main-wizard-p-" + currStepIndex).hide();
$("#main-wizard-p-" + nextStepIndex).fadeIn();
}
}
请注意,有一个if语句通过询问是否已经有jquery.steps添加的向导类来确定子向导是否已经初始化.如果它已经初始化,我们只需要显示()它.
另请注意,onFinished处理程序使主向导继续执行下一步.
希望这有助于解决您的问题.
编辑：
在查看和调试代码之后,问题是以下jQuery查询(来自库的第1196行)从主向导和子向导获取所有步骤内容并进行转换(从包含子向导的步骤到下一步)步骤)搞砸了.
var stepContents = wizard.find(".content > .body")
通过以下方式更改该行可以解决问题.但是,还有一些其他行需要类似的修复.
var stepContents = wizard.find("> .content > .body")
另请注意,有一个待批准的pull request明显解决了这个问题.但是,恕我直言,拉请求直接从库中更改了构建的文件,它可能不会被批准.
编辑2：
