跳转到 jQuery formwizard 中的特定步骤

发布于 2024-10-01 21:18:29 字数 449 浏览 3 评论 0原文

我正在使用 jQuery 插件“formwizard”，并希望允许用户跳转到该过程中的特定步骤。

我认为要做的是“显示”方法：

$(function(){
    $("#linkId").click(function(){
        $("#demoForm").formwizard("show","newLocationId");
    });
});

但这所做的只是在屏幕上公开该步骤，而不隐藏上一步。

如果有另一种方法可以在调用“显示”之前隐藏当前屏幕，那么那就完美了。

插件主页是 FormWizard 主页

任何熟悉此插件并知道如何跳转到特定位置的人步骤使用方法而不是从表单元素链接？

原文

I am using the jQuery plugin 'formwizard' and wish to allow users to jump to a specific step in the process.

What I thought would do it was the 'show' method:

$(function(){
    $("#linkId").click(function(){
        $("#demoForm").formwizard("show","newLocationId");
    });
});

but all this does is expose the step on screen without hiding the previous step.

If there was another method to hide the current screen before calling the 'show' then it would be perfect.

The plug home page is FormWizard Homepage

Anyone familiar with this plugin and know how to jump to a specific step using a method rather than linking from a form element?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

一个人的旅程 2024-10-08 21:18:29

请记住在您绑定到的元素事件上返回 false...

$(function(){
    $("#linkId").click(function(){
        $("#demoForm").formwizard("show","newLocationId");
        return false;
    });
});

这对我有用。

Remember to return false on the elements events that you are binding to...

$(function(){
    $("#linkId").click(function(){
        $("#demoForm").formwizard("show","newLocationId");
        return false;
    });
});

This worked for me.

回复收藏 0 原文

不再让梦枯萎 2024-10-08 21:18:29

我今天花了几个小时试图让它发挥作用。使用 .formwizard("show","new_step") 方法跳过步骤对我来说不起作用。我无法阻止在 .bind("step_shown",function(){...}) 方法中过渡到步骤 3 并覆盖表单的步骤 4，因此我使用了隐藏的输入“link”类的方法。当为免费或付费帐户选择某个单选按钮（在步骤 2 上）时，我嵌入了一个隐藏字段，这意味着可以完全跳过步骤 3（免费帐户不需要账单详细信息）。我确定了在隐藏输入上使用“链接”类跳转到的步骤。

DOM 具有以下字段位于当前可见步骤的 div 中：

<input type="hidden" id="jump_to_fourth_step" value="fourthStep">

javascript 具有以下内容：

$('input[name="account_type"]').click(function() {
  //add "link" class to jump to last step and hide billing fields in summary
  if($(this).attr("is_free")==true) {
    $("#jump_to_fourth_step").addClass("link");
    $(".billing_info").hide();
  }
  //remove class "link" from input and show billing fields in summary
  else {
    $('#jump_to_fourth_step').removeClass("link");
    $(".billing_info").show();
  }
});

请注意，此代码仅在步骤 2 上运行，因为单选按钮仅在此时可用。当选择免费帐户并点击“下一步”时，步骤 3 成功跳过，并且如果在步骤 4 中使用后退按钮，则用户返回到步骤 2。如果用户决定他们想要付费帐户并返回到步骤2 进行标记，隐藏的输入将被删除，再次导致接下来显示步骤 3（并且账单信息将显示在摘要页面上）。

它没有很好的记录，但一旦单击“下一步”按钮，插件将转到当前步骤的活动输入的“值”属性中的任何步骤。如上所示，该值为fourthStep。而且，为了彻底起见，我刚刚进行了测试，可以跳过任意数量的步骤，并且后退按钮将正确地让您回到正确的位置。

I spent a few hours trying to get this to work today. Using the .formwizard("show","new_step") method to skip steps didn't work for me. I was unable to prevent the transition to step 3 and override to step 4 of my form in the .bind("step_shown",function(){...}) method , so I used the hidden input "link" class approach. I embedded a hidden field when a certain radio button (on step 2) was selected for either a free or pay account that meant step 3 could be skipped entirely (no billing details needed for a free account). I identified the step to jump to using the "link" class on the hidden input.

DOM has the following field which is in div of the currently visible step:

<input type="hidden" id="jump_to_fourth_step" value="fourthStep">

javascript has the following:

$('input[name="account_type"]').click(function() {
  //add "link" class to jump to last step and hide billing fields in summary
  if($(this).attr("is_free")==true) {
    $("#jump_to_fourth_step").addClass("link");
    $(".billing_info").hide();
  }
  //remove class "link" from input and show billing fields in summary
  else {
    $('#jump_to_fourth_step').removeClass("link");
    $(".billing_info").show();
  }
});

Note that this code only runs on step 2 since the radio button is only available then. Step 3 is successfully skipped when "Next" is hit with the free account selected, and if the back button is used on step 4, the user returns to step 2. And if the user decides they want a pay account and goes back to step 2 to mark as such, the hidden input is removed, once again causing step 3 to be shown next (and billing info will be shown on the summary page).

It's not well documented, but the plugin will go to whatever step is in the "value" attribute of an active input on the current step once the "Next" button is clicked. As seen above, the value is fourthStep. And, just to be thorough, I just tested and jumping over any number of steps is possible, and the back button will properly get you back to the correct place.

回复收藏 0 原文