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

【问题标题】：FuelUX Wizard component - how to manually select active step?FuelUX 向导组件 - 如何手动选择活动步骤？
【发布时间】：2013-05-31 16:37:25
【问题描述】：

我没有看到任何文档。

如何在向导组件中手动选择哪个面板处于活动状态？

我知道它在某处，因为您可以在其中一个标签通过后单击它，然后导航回上一个标签。

【问题讨论】：

标签： jquery twitter-bootstrap wizard fuelux

【解决方案1】：

我认为没有办法直接设置活动面板，因为接下来的步骤在使用 prev/next 激活之前都被禁用。

一旦“激活”了一个步骤，您就可以使用 jquery 来触发一个标签点击..

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

这是一个工作示例：http://www.bootply.com/60319 -- 如果您导航到最后一步 (5)，则会有一个链接返回到第 2 步。

【讨论】：

很好的答案，谢谢！我添加了一个 GitHub 问题以通过更易于访问的方法启用此功能：github.com/ExactTarget/fuelux/issues/194

【解决方案2】：

是的，你可以换wizard step：

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

更新：

在上次更新后，现在它可以与 selectedItem 一起使用

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

注意从 select 到 selected* 的变化。

【讨论】：

这是在我最初的询问之后添加的。它现在是访问步骤选项卡的标准方法。
我明白了。这个答案不是给你的，而是给那些将来寻求解决方案的人的。

【解决方案3】：

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

【讨论】：

【解决方案4】：

您可以在 li 标记上设置“活动”类，并在呈现向导时标记活动 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>

【讨论】：

【解决方案5】：

我知道这个问题很老，但我想分享一下在 Fuel FX 2.x 中对我有用的东西：

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

例如：

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

【讨论】：

【解决方案6】：

$(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);
    });
});

这使得所有步骤都可以点击。

【讨论】：

【解决方案7】：

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

以上代码用于手动获取下一个窗格对于上一个，你可以试试下面的一个

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

【讨论】：