1

我只是在 Fuel UX 网站上复制了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>

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

4

2 回答 2

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课程放在身体标签上。

于 2014-05-05T14:02:50.090 回答
0

I had an issue where the Chevroned tabs were only rendering as a bullet list. Smacked of a CSS issue. I did a view source on the Wizard example on their site, removed the fuel ux css the docs had outlined and employed the CSS for fuel ux used in their example instead. All worked!

于 2015-07-16T16:43:00.643 回答