Question

我刚刚在Fuel UX网站中复制了example for Wizard并创建了一个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>

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

Answer 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标签上。

Answer 2

我遇到了一个问题，其中Chevroned选项卡仅作为子弹列表呈现。搞乱了CSS问题。我在他们的网站上做了一个关于Wizard示例的视图源，删除了文档概述的燃料ux css，并使用了CSS作为他们示例中使用的燃料ux。一切顺利！

Fuel UX向导无法正常工作

2 个答案: