blocks|key|4703677|text|基于documentation，到目前为止，它似乎缺乏该功能：|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|4703678|/*++
+*+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!");+
};|code-block|syntax|javascript|4703679|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/rstaib/jquery-steps/blob/master/build/jquery.steps.js^0|2|D|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@$A|R|B|S|1|T]]|C|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|C|$G|H]]|$1|I|3|-4|5|6|7|V|8|@]|9|@]|C|$]]]|J|$K|$5|L|M|N|C|$O|P]]]]

Based on the <a href="https://github.com/rstaib/jquery-steps/blob/master/build/jquery.steps.js" rel="noreferrer">documentation</a>, it seems to lack that functionality as of right now:

<pre class="lang-js prettyprint-override"><code>/* 
 * 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!"); 
};
</code></pre>

blocks|key|4703702|text|我这样做了，所以我创建了这个新函数：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4703703|function+_goToStep(wizard,+options,+state,+index)
{
++++return+paginationClick(wizard,+options,+state,+index);
}|code-block|syntax|javascript|4703704|而未实现的调用，放入如下内容：|4703705|$.fn.steps.setStep+=+function+(step)
{

++++var+options+=+getOptions(this),
++++++++state+=+getState(this);

++++return+_goToStep(this,+options,+state,+step);

};|4703706|只是利用已经存在的插件。|4703707|使用：|4703708|wizard.steps("setStep",+1);|4703709|entityMap^0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|W|8|@]|9|@]|A|$]]|$1|M|3|N|5|6|7|X|8|@]|9|@]|A|$]]|$1|O|3|P|5|D|7|Y|8|@]|9|@]|A|$E|F]]|$1|Q|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]]|R|$]]

I did this so I created this new function:

<pre><code>function _goToStep(wizard, options, state, index)
{
 return paginationClick(wizard, options, state, index);
}
</code></pre>

And the call that is not implemented, put this:

<pre><code>$.fn.steps.setStep = function (step)
{

 var options = getOptions(this),
 state = getState(this);

 return _goToStep(this, options, state, step);

};
</code></pre>

Just taking advantage of what already existed plugin.

Use:

<pre><code>wizard.steps("setStep", 1);
</code></pre>

blocks|key|4703751|text|我找到了一种简单的方法来做到这一点。您可以使用jquery函数|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4703752|$("#wizard-t-2").get(0).click();|code-block|syntax|javascript|4703753|假设您知道要执行的步骤。此示例将带您进入向导的第三步。使用chromes编辑器找出您要转到的步骤的确切id是什么。|4703754|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

I found a simple way to do this.
you can use the jquery function 

<pre><code>$("#wizard-t-2").get(0).click();
</code></pre>

assuming you know what step you want to go to.
this example would bring you to the third step of the wizard.
use chromes editor to figure out what the exact id is of the step you want to go to.

blocks|key|4703779|text|function+GotoSpecificStep(action,+currentStep,+number)+{
++++try
++++{
++++++++var+stepsTogo+=+parseInt(currentStep)+-+parseInt(number);
++++++++for+(i+=+1;+i+<=+Math.abs(parseInt(stepsTogo))+;+i%2B%2B)+{
++++++++++++if+(action+==+"next")+{
++++++++++++++++$(".btnNext").click();
++++++++++++}
++++++++++++else+if+(action+==+"prev")+{
++++++++++++++++$(".btnPrevious").click();
++++++++++++}
++++++++}
++++}
++++catch(exception)
++++{
++++++++MsgBox(exception.message);
++++}
}|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|4703780|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>function GotoSpecificStep(action, currentStep, number) {
 try
 {
 var stepsTogo = parseInt(currentStep) - parseInt(number);
 for (i = 1; i &lt;= Math.abs(parseInt(stepsTogo)) ; i++) {
 if (action == "next") {
 $(".btnNext").click();
 }
 else if (action == "prev") {
 $(".btnPrevious").click();
 }
 }
 }
 catch(exception)
 {
 MsgBox(exception.message);
 }
}
</code></pre>

blocks|key|4703828|text|​|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4703829|stepsWizard+=+$("#wizard").steps({
++++++++forceMoveForward+:+true,
++++++++enablePagination:+false,
++++++++titleTemplate+:+'<span+class="number">#index#.+#title#'
++++});

stepsWizard.steps("next");+//+this+will+send+us+on+next+step+:-)|code-block|syntax|javascript|4703830|4703831|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|J|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|K|8|@]|9|@]|A|$E|F]]|$1|G|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|H|3|-4|5|6|7|M|8|@]|9|@]|A|$]]]|I|$]]

<div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>stepsWizard = $("#wizard").steps({
 forceMoveForward : true,
 enablePagination: false,
 titleTemplate : '&lt;span class="number"&gt;#index#.&lt;/span&gt; #title#'
 });

stepsWizard.steps("next"); // this will send us on next step :-)</code></pre>
</div>
</div>

blocks|key|197927|text|基于@阿卜杜勒·贾马尔的回答，我已经为任何步骤实现了它：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|197928|$(function+()+{
++++var+stepsWizard+=+$("#wizard").steps({
++++++++...
++++});

++++//+step+variable+handles+current+step+(from+0)
++++for(var+i=0;+i<step;+i%2B%2B)+{
++++++++stepsWizard.steps("next");
++++}
});|code-block|syntax|javascript|197929|请注意，必须定义step变量并且该变量必须等于或大于0。|offset|length|style|CODE|197930|entityMap^0|0|0|8|4|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@$I|R|J|S|K|L]]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

Basing on @AbdulJamal answer, I've implemented it for any step:

<pre><code>$(function () {
 var stepsWizard = $("#wizard").steps({
 ...
 });

 // step variable handles current step (from 0)
 for(var i=0; i&lt;step; i++) {
 stepsWizard.steps("next");
 }
});
</code></pre>

Note that <code>step</code> variable must be defined and equal or greater than 0.

blocks|key|197979|text|看看我下面的实现，你们觉得怎么样？|type|unstyled|depth|inlineStyleRanges|entityRanges|data|197980|$.fn.steps.setStep+=+function+(step)
{
++var+currentIndex+=+$(this).steps('getCurrentIndex');
++for(var+i+=+0;+i+<+Math.abs(step+-+currentIndex);+i%2B%2B){
++++if(step+>+currentIndex)+{
++++++$(this).steps('next');
++++}
++++else{
++++++$(this).steps('previous');
++++}
++}+
};|code-block|syntax|javascript|197981|而且您可以非常容易地执行新方法：|197982|$("#form").steps("setStep",+4);+//based+on+0+(set+the+index)|197983|你好，尼科尔斯|197984|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

Check my following implementation, What do you think guys?

<pre><code>$.fn.steps.setStep = function (step)
{
 var currentIndex = $(this).steps('getCurrentIndex');
 for(var i = 0; i &lt; Math.abs(step - currentIndex); i++){
 if(step &gt; currentIndex) {
 $(this).steps('next');
 }
 else{
 $(this).steps('previous');
 }
 } 
};
</code></pre>

And you can execute the new method very easy:

<pre><code>$("#form").steps("setStep", 4); //based on 0 (set the index)
</code></pre>

Regards, Nicholls

blocks|key|4703997|text|将@FernandoTholl添加到answer+above中，以求澄清，wizard.steps("setStep",+1);在onStepChanged中|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4703998|$('#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
++}
});|code-block|syntax|javascript|4703999|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/a/20683212/3079302^0|11|R|1T|D|I|C|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@$9|T|A|U|B|C]|$9|V|A|W|B|C]]|D|@$9|X|A|Y|1|Z]]|E|$]]|$1|F|3|G|5|H|7|10|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|11|8|@]|D|@]|E|$]]]|L|$M|$5|N|O|P|E|$Q|R]]]]

Adding to the <a href="https://stackoverflow.com/a/20683212/3079302">answer above</a> by @FernandoTholl, for clarification, <code>wizard.steps("setStep", 1);</code> goes in <code>onStepChanged</code>

<pre><code>$('#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
 }
});
</code></pre>

blocks|key|198041|text|为了让它正常工作，我做了如下操作：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|198042|stepsWizard+=+$("#wizard").steps({
++++headerTag:+"h2",
++++bodyTag:+"section"
});

var+indx+=+3;
for+(i+=+0;+i+<=+indx;+i%2B%2B)+{
+stepsWizard.steps("next");
}|code-block|syntax|javascript|198043|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

I did something like below to get it worked:

<pre><code>stepsWizard = $("#wizard").steps({
 headerTag: "h2",
 bodyTag: "section"
});

var indx = 3;
for (i = 0; i &lt;= indx; i++) {
 stepsWizard.steps("next");
}
</code></pre>

blocks|key|198068|text|另一个简单的解决方案：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|198069|var+desiredStep+=+0;
$("#steps-uid-0-t-"+%2B+desiredStep).click();|code-block|syntax|javascript|198070|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Another simple solution:

<pre><code>var desiredStep = 0;
$("#steps-uid-0-t-" + desiredStep).click();
</code></pre>

blocks|key|198082|text|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+%2B=+'+active';
++++++++$(lis[1]).children('a').click();
++++}|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|198083|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>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();
 }
</code></pre>

blocks|key|4704098|text|我这样做了，所以我在jquery.steps.js中创建了这个新函数，它是在$.fn.steps.setStep函数之前插入的重要内容：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4704099|function+_goToStep(wizard,+options,+state,+index)
{
++++return+paginationClick(wizard,+options,+state,+index);
}|code-block|syntax|javascript|4704100|在jquery.steps.js中找到$.fn.steps.setStep+=+function，然后替换为：|4704101|$.fn.steps.setStep+=+function+(step)
{

++++var+options+=+getOptions(this),
++++++++state+=+getState(this);

++++return+_goToStep(this,+options,+state,+step);

};|4704102|使用：|4704103|wizard.steps("setStep",+1);|4704104|entityMap^0|12|I|0|0|J|T|0|0|0|0|R|0^^$0|@$1|2|3|4|5|6|7|U|8|@$9|V|A|W|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|X|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|Y|8|@$9|Z|A|10|B|C]]|D|@]|E|$]]|$1|M|3|N|5|H|7|11|8|@]|D|@]|E|$I|J]]|$1|O|3|P|5|6|7|12|8|@]|D|@]|E|$]]|$1|Q|3|R|5|6|7|13|8|@$9|14|A|15|B|C]]|D|@]|E|$]]|$1|S|3|-4|5|6|7|16|8|@]|D|@]|E|$]]]|T|$]]

I did this so I created this new function in jquery.steps.js, is important inserts before the <code>$.fn.steps.setStep</code> function:

<pre><code>function _goToStep(wizard, options, state, index)
{
 return paginationClick(wizard, options, state, index);
}
</code></pre>

In jquery.steps.js find the <code>$.fn.steps.setStep = function</code> and replace then with:

<pre><code>$.fn.steps.setStep = function (step)
{

 var options = getOptions(this),
 state = getState(this);

 return _goToStep(this, options, state, step);

};
</code></pre>

Use:

<code>wizard.steps("setStep", 1);</code>

blocks|key|198183|text|​|type|unstyled|depth|inlineStyleRanges|entityRanges|data|198184|📷|atomic|offset|length|198185|198186|获取您想要执行的步骤的id，然后添加触发器！|198187|$("#steps-uid-0-t-1").trigger("click");|code-block|syntax|javascript|198188|entityMap|0|IMAGE|mutability|IMMUTABLE|imageUrl|https://ask.qcloudimg.com/http-save/yehe-900000/dcdb8210733daf0e5a40ffc968f0b5e6.png|imageAlt^0|0|0|1|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|X|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|Y|8|@]|9|@$E|Z|F|10|1|11]]|A|$]]|$1|G|3|4|5|6|7|12|8|@]|9|@]|A|$]]|$1|H|3|I|5|6|7|13|8|@]|9|@]|A|$]]|$1|J|3|K|5|L|7|14|8|@]|9|@]|A|$M|N]]|$1|O|3|-4|5|6|7|15|8|@]|9|@]|A|$]]]|P|$Q|$5|R|S|T|A|$U|V|W|-4]]]]

<a href="https://i.stack.imgur.com/R3BH3.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/R3BH3.png" alt="enter image description here" /></a>
take the id of the step you want go and add a trigger!
<pre><code>$(&quot;#steps-uid-0-t-1&quot;).trigger(&quot;click&quot;);
</code></pre>

blocks|key|4704162|text|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()+
++++{
++++
++++}
});|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|4704163|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>jQuery('#multisteps_form').steps(
{
 headerTag: &quot;h3&quot;,
 bodyTag: &quot;section&quot;,
 transitionEffect: &quot;slideLeft&quot;,
 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() 
 {
 
 }
});
</code></pre>

I am using a <a href="http://www.jquery-steps.com/GettingStarted">jQuery-steps</a> on my app to for a wizard-like situation. I am having trouble finding out how to change to a custom step though. Any help with this one?

<pre><code>$(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;
 }
 }
 }
}
</code></pre>

How to achieve this?

Going to a custom step with jQuery-steps

jQuery

我在我的应用程序上使用来处理类似向导的情况。不过，我在寻找如何更改为自定义步骤时遇到了麻烦。这个问题有什么帮助吗？$(function () {    $("#wizard").steps({        headerTag: "h2",        bodyTag: "section",        trans...

问使用jQuery- step转到自定义步骤
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用jQuery- step转到自定义步骤EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用jQuery- step转到自定义步骤
EN