FuelUX向导组件 - 如何手动选择活动步骤？

Question

我没有看到任何关于这个的文档。

在向导组件中，如何手动选择哪个面板是活动的？

我知道它肯定在那里，因为你可以在通过一个选项卡后点击其中一个选项卡，并导航回之前的选项卡。

- Gabriel Alack

Answer 1

是的，您可以更改向导步骤：

$('#MyWizard').wizard('selectItem', { step: step });

更新：

在最近的更新后，现在它可以与selectedItem一起使用了。

$('#MyWizard').wizard('selectedItem', { step: step });

注意从 "select" 变成了 "selected*"。

- FlyBot

---

这是在我的原始查询之后添加的。现在它是访问步骤选项卡的标准方法。 - Gabriel Alack

我明白了。这个答案不是给你的，而是给那些将来寻求解决方案的人。 - FlyBot

Answer 2

我认为没有直接设置活动面板的方法，因为下一步只有在使用prev/next激活后才能启用。

一旦步骤被“激活”，您可以使用jQuery触发选项卡单击事件。

$('[data-target=#step2]').trigger("click");

这是一个可行的示例：http://www.bootply.com/60319。如果您导航到最后一步（第5步），就会看到一个链接，可以返回到第2步。

- Zim

---

很好的回答，谢谢！我添加了一个GitHub问题以通过更易访问的方法启用它：https://github.com/ExactTarget/fuelux/issues/194 - Adam Alexander

Answer 3

$('#MyWizard').wizard('selectedItem', { step: currentStep });

可以让您在使用jQuery插件“Wizard”时，选择指定的步骤。

- Vinay Mandadapu

Answer 4

$('#btnNext').on('click', function()
{
$('#orderWizard').wizard('next');
}

上面的代码是用于手动获取下一个窗格，如果要获取上一个窗格，则可以尝试下面的代码。

$('#btnPrev').on('click', function()
{
$('#orderWizard').wizard('previous');
}

- Akshay Tilekar

Answer 5

$(document).ready(function() {
    $('#wizard').wizard();
    $('#wizard').find('ul.steps li').toggleClass('complete', true);

    $('#wizard').on('changed.fu.wizard', function (evt, data) {
        $('#wizard').find('ul.steps li').toggleClass('complete', true);
    });
});

这将使所有步骤都可点击。

- antoncom

Answer 6

我知道这个问题很久了，但是我想分享一下在Fuel FX 2.x中对我起作用的内容：

$('#MyWizard').wizard('selectedItem', { step: YourStepNumber });

E.g.:

$('#wizard1').wizard('selectedItem', { step: 7 });

- arao6

Answer 7

您可以在li标签上设置“active”类，当向导呈现时，活动的li将被标记。

这是Symfony中的一个示例：

<li data-target="#step1" class="complete">
  <span class="step">1</span>
</li>
<li data-target="#step2" class="active">
  <span class="step">2</span>
</li>

- ajaristi