Fuel UX 向导不起作用答案

【问题标题】：Fuel UX wizard is not workingFuel UX 向导不起作用
【发布时间】：2014-04-07 04:36:51
【问题描述】：

我刚刚复制了Fuel UX网站中Wizard的example并创建了一个html文档，还包括了必要的js和css文件，如下所示。

<!DOCTYPE html>
<html lang="en">

    <head>

        <link href="assets/css/bootstrap.min.css" rel="stylesheet" />

    </head>

    <body>

        <div id="MyWizard" class="wizard">
            <ul class="steps">
                <li data-target="#step1" class="active"><span class="badge badge-info">1</span>Step 1<span class="chevron"></span></li>
                <li data-target="#step2"><span class="badge">2</span>Step 2<span class="chevron"></span></li>
                <li data-target="#step3"><span class="badge">3</span>Step 3<span class="chevron"></span></li>
                <li data-target="#step4"><span class="badge">4</span>Step 4<span class="chevron"></span></li>
                <li data-target="#step5"><span class="badge">5</span>Step 5<span class="chevron"></span></li>
            </ul>
            <div class="actions">
                <button type="button" class="btn btn-mini btn-prev"> <i class="icon-arrow-left"></i>Prev</button>
                <button type="button" class="btn btn-mini btn-next" data-last="Finish">Next<i class="icon-arrow-right"></i></button>
            </div>
        </div>

        <div class="step-content">
            <div class="step-pane active" id="step1">This is step 1</div>
            <div class="step-pane" id="step2">This is step 2</div>
            <div class="step-pane" id="step3">This is step 3</div>
            <div class="step-pane" id="step4">This is step 4</div>
            <div class="step-pane" id="step5">This is step 5</div>
        </div>

        <script src='assets/js/jquery-1.10.2.min.js'></script>

        <script src="assets/js/bootstrap.min.js"></script>

        <script src="assets/js/fuelux/fuelux.wizard.min.js"></script>

    </body>

</html>

但是它没有正确实现向导（没有渲染向导的样式并且按钮单击事件不起作用），有人可以帮助我吗？

【问题讨论】：

标签： jquery twitter-bootstrap fuelux

【解决方案1】：

尝试插入require.js。并且您需要使用.fuelux 类包装内容。

也许你也需要插入loader.min.js

<div class="fuelux">
    <div id="MyWizard" class="wizard">
        <!-- content goes here -->
    </div>

    <div class="step-content">
        <!-- content goes here -->
    </div>
</div>

编辑

尝试将.fuelux 类放在body 标签上。

【讨论】：

【解决方案2】：

我遇到了一个问题，即 Chevroned 选项卡仅呈现为项目符号列表。有点 CSS 问题的味道。我在他们的网站上查看了 Wizard 示例的源代码，删除了文档概述的燃料 ux css，并改用了他们示例中使用的燃料 ux 的 CSS。一切顺利！

【讨论】：