为什么 fuel ux 不能在我的 MVC5 应用程序中工作（向导和一般渲染问题）

Question

我正在尝试让 fuelUX 在我的 MVC5 应用程序中运行。我已经为沙箱创建了一个简单的视图，但它的行为并不像我预期的那样。

我遇到了两个（到目前为止）问题。

1) 一切都渲染到页面的整个宽度。 2) 向导正确呈现（问题 1 除外）但选项卡全部禁用，下一步按钮不执行任何操作。

这是从 asp.net

中呈现的页面源代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Home Page - My ASP.NET Application</title>

    <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
    <link href="//www.fuelcdn.com/fuelux/3.6.3/css/fuelux.min.css" rel="stylesheet">

    <script src="//cdn.jsdelivr.net/requirejs/2.1.11/require.js"></script>
    <script>
        requirejs.config({
            paths: {
                'bootstrap': '//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min',
                'fuelux': '//www.fuelcdn.com/fuelux/3.6.3/js/fuelux.min',
                'jquery': '//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery',
                // Moment.js is optional
                'moment': '//cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment.min.js'

            },
            // Bootstrap is a "browser globals" script :-(
            shim: { 'bootstrap': { deps: ['jquery'] } }
        });
        // Require all.js or include individual files as needed
        require(['jquery', 'bootstrap', 'fuelux'], function ($) { });
    </script>

</head>
<body>



<div class="fuelux">

    <div class="checkbox">
        <label class="checkbox-custom" data-initialize="checkbox">
            <input class="sr-only" data-toggle="#hereKittyKitty" type="checkbox" value="option1">
            <span class="checkbox-label">I love kittens!</span>
        </label>
    </div>
    <div id="hereKittyKitty" class="alert bg-info">Great. Meow, too!</div>

    <div class="input-group input-append dropdown combobox" data-initialize="combobox" id="myCombobox">
        <input type="text" class="form-control">
        <div class="input-group-btn">
            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
            <ul class="dropdown-menu dropdown-menu-right">
                <li data-value="1"><a href="#">One</a></li>
                <li data-value="2"><a href="#">Two</a></li>
                <li data-value="3"><a href="#">Three</a></li>
                <li data-value="4"><a href="#">Four</a></li>

            </ul>
        </div>
    </div>

    <div class="wizard">
        <ul class="steps">
            <li data-step="1" data-name="campaign" class="active"><span class="badge">1</span>Campaign<span class="chevron"></span></li>
            <li data-step="2"><span class="badge">2</span>Recipients<span class="chevron"></span></li>
            <li data-step="3" data-name="template"><span class="badge">3</span>Template<span class="chevron"></span></li>
        </ul>
        <div class="actions">
            <button type="button" class="btn btn-default btn-prev"><span class="glyphicon glyphicon-arrow-left"></span>Prev</button>
            <button type="button" class="btn btn-default btn-next" data-last="Complete">Next<span class="glyphicon glyphicon-arrow-right"></span></button>
        </div>
        <div class="step-content">
            <div class="step-pane active sample-pane alert" data-step="1">
                <h4>Setup Campaign</h4>
                <p>Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic. Beetroot water spinach okra water chestnut ricebean pea catsear courgette.</p>
            </div>
            <div class="step-pane sample-pane bg-info alert" data-step="2">
                <h4>Choose Recipients</h4>
                <p>Celery quandong swiss chard chicory earthnut pea potato. Salsify taro catsear garlic gram celery bitterleaf wattle seed collard greens nori. Grape wattle seed kombu beetroot horseradish carrot squash brussels sprout chard. </p>
            </div>
            <div class="step-pane sample-pane bg-danger alert" data-step="3">
                <h4>Design Template</h4>
                <p>Nori grape silver beet broccoli kombu beet greens fava bean potato quandong celery. Bunya nuts black-eyed pea prairie turnip leek lentil turnip greens parsnip. Sea lettuce lettuce water chestnut eggplant winter purslane fennel azuki bean earthnut pea sierra leone bologi leek soko chicory celtuce parsley jÃcama salsify. </p>
            </div>
        </div>
    </div>
</div>
</body>
</html>

Answer 1

您需要初始化向导。

添加 data-initialize="wizard" 或通过 $('.wizard').wizard();

使用 JavaScript

参见Wizard Usage。

为什么 fuel ux 不能在我的 MVC5 应用程序中工作（向导和一般渲染问题）

Why isn't fuel ux working in my MVC5 app (wizard, and general render issue)

asp.net

asp.net-mvc

twitter-bootstrap

fuelux