I would like to implement a Wizard (with forms) into my application. Therefore, I would like to use jquery.steps (which you can find here.
I have created an assetbundle containing the correct js files
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',
];
}
And have the following code in my view:
<?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>
This however does not seem to work: i guess the javascript files should be loaded before the .. at the end of the html file, but Yii forces the script at the end of the file. Is there a way to overcome this? Or am I correct this is the mistake?
Use
<?php
$this->registerJs(<<<'EOD'
$("#example-basic").steps({
headerTag: "h3",
bodyTag: "section",
transitionEffect: "slideLeft",
autoFocus: true
});
EOD
); ?>
Instead of script tag.