Question

我在人们提交一些数据的表单上使用了FuelUX向导，我们希望将其分解为逻辑步骤。它的效果非常好。

现在我正在处理相同表单的编辑版本，但是由于步骤已经加载了数据，我希望用户能够直接跳到步骤X来调整他们需要的位编辑，而不是必须点击下一次X次才能到达那里。

我将继续自己研究这个问题，但是想知道是否有其他人已经做过这个并且可以告诉我如何处理它？</ p>

Answer 1

当然，这里有一些代码可以运行以允许点击所有步骤，而不仅仅是已完成的步骤：

var $wizard = $('#MyWizard').wizard();
var wizard = $wizard.data('wizard');
$wizard.off('click', 'li.complete');
$wizard.on('click', 'li', $.proxy(wizard.stepclicked, wizard));

然后，您可以使用一些CSS样式来覆盖，使其看起来像所有可点击的。

此问题也会在https://github.com/ExactTarget/fuelux/issues/175跟踪，作为功能请求，以便更轻松地完成此任务。

Answer 2

好的，页面加载的第一步就是将每个li元素的类“complete”和每个徽章的“badge-success”类应用。

然后，当您单击第3步时，需要停止为步骤4到6删除这些类。

我迷上了“改变”的事件，当我将东西记录到控制台时，事情按正确的顺序发生，但是“stepclicked”方法似乎被调用了两次，这是我的“改变”后的第二次取消我的好工作。

好吧，我不想堆叠黑客的FuelUX向导本身，或者我们永远无法升级它所以我想出了这个令人讨厌的黑客，这将足够，直到FuelUX代码可能被修改为允许这要做得更优雅。

//KEEP ALL THE STEPS MARKED AS COMPLETE
$("#JetWizard").on("changed", function() {
    window["tid_wizard_steps_all_complete_count"] = 0;
    window["tid_wizard_steps_all_complete"] = setInterval(function() { jetKeepAllStepsMarkedComplete(); }, 25);';
}
function jetKeepAllStepsMarkedComplete() {
    $("#JetWizard ul.steps").find("li").addClass("complete");
    $("#JetWizard ul.steps").find("span.badge").addClass("badge-success");
    window["tid_wizard_steps_all_complete_count"]++;
    if(window["tid_wizard_steps_all_complete_count"] >= 20) {
        clearInterval(window["tid_wizard_steps_all_complete"]);
    }
}

在点击步骤后，它在上半周一次重复20次，以确保我们按照我们想要的方式保持事物。显然你可以使用更长的间隔和更少的重复，但是在步骤中你会得到明显的“闪光”。

然后我想停止它实际导航iof当前步骤中的字段有错误。所以......

//HANDLE CLICKING ON STEPS TO GO BACK & FORTH
$("#JetWizard ul.steps li.complete").on("click", function() {
    if(jetDoLiveValidationOnVisibleFields() === false) {
        alert ("The form has errors");
        return false;
    }
});

Answer 3

我无法对接受的答案发表评论，但如果有人遇到＆＃34;未捕获的TypeError：无法读取属性＆＃39; stepclicked＆＃39;未定义＆＃34;，只需替换

var wizard = $wizard.data('wizard');

的

var wizard = $wizard.data('fu.wizard');

并确保你有

data-initialize="wizard"

在向导标记中。

Answer 4

这对我有用：

//Initialize you wizard
$('#myWizard').wizard();

//Enable the steps except the actived one
var steps = $('.steps-container').find('li');
$.each(steps, function(i, val) {
  if (!steps.eq(i).hasClass('active')) {
    steps.eq(i).addClass('complete');
  }
});

// Add an event listener when change step, to enable other steps again
$('#myWizard').on('changed.fu.wizard', function (evt, data) {
   var steps = $('.steps-container').find('li');
   $.each(steps, function(i, val) {
      if (!steps.eq(i).hasClass('active')) {
       steps.eq(i).addClass('complete');
      }
   });
});

FuelUX向导 - 允许在此过程中直接选择步骤

4 个答案: