6

我正在尝试实现 Fuelux 的向导功能并且遇到了障碍。我只是想获得现场示例的工作副本，但在我的控制台中不断收到错误：

Uncaught TypeError: Object [object Object] has no method 'wizard'

我发现很多文档有点压倒性，并且希望用简单的[或更简单的]英语对这个主题有一些清晰的了解。

我的标记是：

<!DOCTYPE html>
<html class="no-js fuelux">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>E-Learning</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/fuelux.min.css">
    <link rel="stylesheet" href="css/main.css">
</head>
<body>
    <div class="container">
        <div id="my-wizard" 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 class="btn btn-mini btn-prev"> <i class="icon-arrow-left"></i>Prev</button>
                <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">
                ...
            </div>
            <div class="step-pane" id="step2">
                ...
            </div>
            <div class="step-pane" id="step3">
                ...
            </div>
        </div>
    </div>
    <script src="js/vendor/jquery-1.9.1.min.js"></script>
    <script src="js/bootstrap.js"></script>
    <script src="js/require.js"></script>
    <script src="js/wizard.js"></script>
    <script>
        $(document).ready(function(){

            $('#my-wizard').on('change', function(e, data) {
                console.log('change');
                if(data.step===3 && data.direction==='next') {
                    // return e.preventDefault();
                }
            });

            $('#my-wizard').on('changed', function(e, data) {
                console.log('changed');
            });

            $('#my-wizard').on('finished', function(e, data) {
                console.log('finished');
            });

            $('.btn-prev').on('click', function() {
                console.log('prev');
                $('#my-wizard').wizard('previous');
            });

            $('.btn-next').on('click', function() {
                console.log('next');
                $('#my-wizard').wizard('next','foo');
            });
        });
    </script>
</body>
</html>
4

1 回答 1

7

很近！对于 CSS 和 JS，因为 Fuel UX 包含 Bootstrap，您只需包含 Fuel UX 来代替 Boostrap，您就可以获得所有 Bootstrap 和 Fuel UX：

<link rel="stylesheet" href="https://fuelcdn.com/fuelux/2.3/css/fuelux.min.css">
<script src="https://fuelcdn.com/fuelux/2.3/loader.min.js"></script>

您的模板看起来很棒，并且仅进行了上述修改，加上删除了导致双重处理的几行，这可以按预期工作。在此处查看完整示例：

要点：https ://gist.github.com/adamalex/5412079

现场示例：http ://bl.ocks.org/adamalex/5412079

于 2013-04-18T11:43:58.457 回答