使用 jQuery-steps 进行自定义步骤
Posted
技术标签:
【中文标题】使用 jQuery-steps 进行自定义步骤【英文标题】：Going to a custom step with jQuery-steps 【发布时间】：2013-11-26 06:28:31 【问题描述】：我在我的应用程序上使用jQuery-steps 来处理类似向导的情况。不过，我很难找出如何更改为自定义步骤。这个有什么帮助吗？
$(function ()
$("#wizard").steps(
headerTag: "h2",
bodyTag: "section",
transitionEffect: "slideLeft",
enableFinishButton: false,
labels:
next: $('#next').html(),
previous : $('#previous').html()
,
onStepChanged: function (event, currentIndex, priorIndex)
if( priorIndex == 0)
var selected = $('input[name=radio_wizard]:checked', '#radio_wizard').val()
switch( selected )
case 1:
// GOTO 1
break;
case 2:
// GOTO 2
break;
case 3:
// GOTO 3
break;
如何做到这一点？
【问题讨论】：
【参考方案1】：jQuery('#multisteps_form').steps(
headerTag: "h3",
bodyTag: "section",
transitionEffect: "slideLeft",
autoFocus: true,
// startIndex:2,
onStepChanging: function()
var myform=jQuery('#multisteps_form').serializeArray();
jQuery.ajax(
url: ajx_url,
type: 'post',
data:
'action':'final_submit_data',
myform:myform,
,
success: function (form_res)
jQuery('#form_submit').html(form_res);
);
return true; // Most Important
,
onFinishing: function()
,
onFinished: function()
);
【讨论】：
这是在我的系统中完美运行...只需确保您了解它...您需要为其添加 CDN 链接或自定义 CDN 链接..【参考方案2】：获取您想要执行的步骤的 id 并添加触发器！
$("#steps-uid-0-t-1").trigger("click");
【讨论】：
【参考方案3】：这是我找到的最简单的解决方案。
-
找到您的 tablist 项目 ID（在我的例子中是 '#ef_users_list-t-'）
触发点击事件
var tablist_item = 'ef_users_list-t-';
var step = 2; // step number to jump to
$(tablist_item+step).trigger('click');
【讨论】：
【参考方案4】：我这样做了，所以我在 jquery.steps.js 中创建了这个新函数，在 $.fn.steps.setStep 函数之前插入很重要：
function _goToStep(wizard, options, state, index)
return paginationClick(wizard, options, state, index);
在 jquery.steps.js 中找到 $.fn.steps.setStep = function 并替换为：
$.fn.steps.setStep = function (step)
var options = getOptions(this),
state = getState(this);
return _goToStep(this, options, state, step);
;
用途：
wizard.steps("setStep", 1);
【讨论】：
【参考方案5】：onInit: function(event)
let div = event.currentTarget;
let lis = div.getElementsByTagName('li');
// Choose second tab
// active is just show style, only effective after clicking tag a.
lis[1].className += ' active';
$(lis[1]).children('a').click();
【讨论】：
【参考方案6】：创建了这个新函数：
function _goToStep(wizard, options, state, index)
return paginationClick(wizard, options, state, index);
And the call that is not implemented, put this:
没有实现的调用，放这个：
$.fn.steps.setStep = function (step)
var options = getOptions(this),
state = getState(this);
return _goToStep(this, options, state, index); //Index Instead step
;
wizard.steps("setStep", 1);
工作正常
【讨论】：
【参考方案7】：function GotoSpecificStep(action, currentStep, number)
try
var stepsTogo = parseInt(currentStep) - parseInt(number);
for (i = 1; i <= Math.abs(parseInt(stepsTogo)) ; i++)
if (action == "next")
$(".btnNext").click();
else if (action == "prev")
$(".btnPrevious").click();
catch(exception)
MsgBox(exception.message);
【讨论】：
【参考方案8】：另一个简单的解决方案：
var desiredStep = 0;
$("#steps-uid-0-t-" + desiredStep).click();
【讨论】：
【参考方案9】：我做了类似下面的事情来让它工作：
stepsWizard = $("#wizard").steps(
headerTag: "h2",
bodyTag: "section"
);
var indx = 3;
for (i = 0; i <= indx; i++)
stepsWizard.steps("next");
【讨论】：
【参考方案10】：添加到@FernandoTholl 的answer above，为澄清起见，wizard.steps("setStep", 1); 加入onStepChanged
$('#wizard').steps(
onStepChanging: function (event, currentIndex, newIndex)
//blah, blah, blah, some code here
,
onStepChanged: function (event, currentIndex, newIndex)
$('#wizard').steps("setStep", 3);
,
onFinished: function ()
///more code
);
【讨论】：
【参考方案11】：stepsWizard = $("#wizard").steps(
forceMoveForward : true,
enablePagination: false,
titleTemplate : '<span class="number">#index#.</span> #title#'
);
stepsWizard.steps("next"); // this will send us on next step :-)【讨论】：
是的，但问题是关于进入自定义步骤，而不是下一步。 这个答案可能与这个问题无关，但这有助于我满足其他类型的要求。请不要删除它。【参考方案12】：检查我的以下实现，你们觉得怎么样？
$.fn.steps.setStep = function (step)
var currentIndex = $(this).steps('getCurrentIndex');
for(var i = 0; i < Math.abs(step - currentIndex); i++)
if(step > currentIndex)
$(this).steps('next');
else
$(this).steps('previous');
;
而且你可以很容易地执行新方法：
$("#form").steps("setStep", 4); //based on 0 (set the index)
问候，尼科尔斯
【讨论】：
这个似乎不如最佳答案优雅，但与最佳答案（有“getOptions”问题）不同，它对我有用——使用步骤 1.1.0。 首先尝试过，但对我不起作用。这个有效。【参考方案13】：根据@AbdulJamal 的回答，我已经为任何步骤实施了它：
$(function ()
var stepsWizard = $("#wizard").steps(
...
);
// step variable handles current step (from 0)
for(var i=0; i<step; i++)
stepsWizard.steps("next");
);
注意step变量必须定义且等于或大于0。
【讨论】：
这将触发每一步的步进事件。直接进入所需步骤的方法似乎是更好的解决方案。【参考方案14】：我找到了一个简单的方法来做到这一点。 你可以使用jquery函数
$("#wizard-t-2").get(0).click();
假设您知道要执行的步骤。 此示例将带您进入向导的第三步。 使用 chromes 编辑器找出您要执行的步骤的确切 ID。
【讨论】：
【参考方案15】：我这样做了，所以我创建了这个新函数：
function _goToStep(wizard, options, state, index)
return paginationClick(wizard, options, state, index);
还有没有实现的调用，放这个：
$.fn.steps.setStep = function (step)
var options = getOptions(this),
state = getState(this);
return _goToStep(this, options, state, step);
;
只是利用已经存在的插件。
用途：
wizard.steps("setStep", 1);
【讨论】：
为什么不将其作为拉取请求提交？ 我想提一下，注意将签名从function(index,step) 更改为@Fernando Tholl 提到的上述function(step)
我将此添加到我的步骤插件文件中，但仍然抱怨并说尚未实现！任何想法？谢谢
对我来说也一样：在 $.fn.steps.setStep 内部，它说“getOptions”没有实现。我很难想象 setStep 主体的“this”和范围是什么，以及 getOptions 应该属于哪个对象。【参考方案16】：
基于documentation，目前似乎缺少该功能：
/*
* Sets a specific step object by index.
*
* @method setStep
* @param index Integer An integer that belongs to the position of a step
* @param step Object The step object to change
*
*/
$.fn.steps.setStep = function (index, step)
throw new Error("Not yet implemented!");
;
【讨论】：
以上是关于使用 jQuery-steps 进行自定义步骤的主要内容，如果未能解决你的问题，请参考以下文章