javascript - 在 Yii2 框架中实现向导（jquery.steps）

Question

我想在我的应用程序中实现一个向导（带有表单）。因此，我想使用 jquery.steps （你可以在这里找到。

我创建了一个包含正确 js 文件的资产包

namespace app\assets;

use yii\web\AssetBundle;


class WizardAsset extends AssetBundle
{
public $basePath = '@webroot';
public $baseUrl = '@web';
public $css = [
    'css/site.css',
    'css/smart_wizard.css',
    'css/jquery.steps.css',
];
public $js = [
    'js/jquery.steps.min.js',
];

public $depends = [
    'yii\web\YiiAsset',
    'yii\bootstrap\BootstrapAsset',
];
}

在我看来，有以下代码：

<?php
use app\assets\WizardAsset;
WizardAsset::register($this);
?>

<div id="example-basic">
    <h3>Keyboard</h3>
    <section>
        <p>Try the keyboard navigation by clicking arrow left or right!</p>
    </section>
    <h3>Effects</h3>
    <section>
        <p>Wonderful transition effects.</p>
    </section>
    <h3>Pager</h3>
    <section>
        <p>The next and previous buttons help you to navigate through your content.</p>
    </section>
</div>

<script>
$("#example-basic").steps({
    headerTag: "h3",
    bodyTag: "section",
    transitionEffect: "slideLeft",
    autoFocus: true
});
</script> 

然而这似乎不起作用：我猜应该在 html 文件末尾的 .. 之前加载 javascript 文件，但 Yii 会在文件末尾强制脚本。有没有办法克服这个问题？还是我纠正了这是错误？

Answer 1

利用

<?php
$this->registerJs(<<<'EOD'
  $("#example-basic").steps({
    headerTag: "h3",
    bodyTag: "section",
    transitionEffect: "slideLeft",
    autoFocus: true
});
EOD
); ?>

而不是脚本标签。