2

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

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

我将自己继续进行此工作，但想知道是否有其他人已经这样做并且可以提示我如何处理它？

4

4 回答 4

3

当然，您可以运行以下代码来允许单击所有步骤，而不仅仅是已完成的步骤：

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作为功能请求进行跟踪，以使其更容易完成。

于 2013-06-06T20:14:20.970 回答
2

好的，页面加载的第一步是简单地将“完成”类应用于每个 li 元素，并将“徽章成功”类应用于每个徽章。

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

我挂上了“更改”事件，当我将内容记录到控制台时，事情正在以正确的顺序发生，但是“stepclicked”方法似乎被调用了两次，这是在我的“更改”内容之后的第二次，从而取消了我的好工作。

好吧，我不想堆叠破解 FuelUX 向导代码本身，否则我们将永远无法升级它，所以我想出了这个讨厌的 hack，直到可以修改 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;
    }
});
于 2013-06-07T08:01:37.360 回答
1

我无法评论已接受的答案，但如果有人遇到“未捕获的类型错误：无法读取未定义的属性 'stepclicked'”，只需替换

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

为了

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

并确保你有

data-initialize="wizard"

在您的向导标记中。

于 2015-06-15T06:59:34.777 回答
1

这对我有用：

//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');
      }
   });
});
于 2016-09-01T04:56:16.107 回答