FuelUX Wizard 如何禁用具体步骤？答案

【问题标题】：FuelUX Wizard How to disable specific steps?FuelUX Wizard 如何禁用具体步骤？
【发布时间】：2015-10-03 05:43:52
【问题描述】：

在我的网络表单中，我使用了fuelux 向导（链接：http://getfuelux.com/javascript.html#wizard），并且我有不同的角色来到这个页面。我需要的是能够根据我在页面加载时获得的一些数据“禁用”向导的某些步骤。我相信这与它的样式有关，但我没有找到我需要的东西。

例如，

我有第 1-6 步，并说有用户访问了该页面。我将他确定为数据架构师，因此我需要禁用第 4 步和第 6 步。我有一些特定的角色，我需要为每个角色禁用某些选项卡组合。

这可以通过调用一些 javascript 来完成吗？我需要对特定步骤进行哪些更改才能使用户无法访问它？

编辑：

这是我的步骤：

    <ul class="steps">

            <li data-step="1" data-name="Documentation" class="active"><span class="badge">1</span>Documentation<span class="chevron"></span></li>
            <li data-step="2" data-name="Business"><span class="badge">2</span>Business<span class="chevron"></span></li>
            <li data-step="3" data-name="Application"><span class="badge">3</span>Application<span class="chevron"></span></li>
            <li data-step="4" data-name="Data"><span class="badge">4</span>Data<span class="chevron"></span></li>
            <li data-step="5" data-name="Infrastructure"><span class="badge">5</span>Infrastructure<span class="chevron"></span></li>
            <li data-step="6" data-name="Security"><span class="badge">6</span>Security<span class="chevron"></span></li>

     </ul>

我的问题是，有没有办法从后面的代码中禁用某些数据步骤？

【问题讨论】：

请分享一些相关代码，以便我们更好地帮助您
这对@BhushanKawadkar 有帮助吗？
请与您的问题陈述分享插件链接或分享 jsfiddle 链接。
我上面的问题陈述不清楚吗？如果没有，我会尝试改写它。
该向导专为线性用户流而设计。您可以根据逻辑跳转并覆盖下一个和上一个按钮。这将允许您“跳过”步骤，但没有禁用的步骤逻辑。您可以编写自己的禁用样式并将它们应用于您想要的步骤，但它肯定会扩展它的当前功能。您可能需要重新考虑您的 UX 并禁用步骤的内容而不是停止，或者更改步骤。您可以根据用户输入删除步骤，以使步骤列表更短或更长。

标签： javascript c# jquery wizard fuelux

【解决方案1】：

我想出了一种方法，方法是在后面的代码中声明 int 数组，然后在我用 javascript 初始化数组的位置直接访问它们。它看起来像这样：

后面的代码：

//Check which steps to disable
            if (role.Contains("Data"))
            {
                disabledSteps = new int[] {5, 5};
            }
            else if (role.Contains("Infra"))
            {
                disabledSteps = new int[] {4, 5};
            }
            else if (role.Contains("Security"))
            {
                disabledSteps = new int[] { 4, 4 };
            }

然后，使用我也在后面的代码中声明的 javascriptserializer，javascript 看起来像：

var disabledSteps = <%= serializer.Serialize(disabledSteps) %>;
        for(var i in disabledSteps){
            alert(disabledSteps[i]);
            $('#myWizard').wizard('removeSteps', disabledSteps[i], 1);
        }

【讨论】：