未捕获的TypeError实现Fuelux向导

Uncaught TypeError implementing Fuelux wizard

本文关键字：实现 Fuelux 向导 TypeError      更新时间：2023-09-26

我正在尝试实现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>

太接近了!对于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

相关文章：