问题描述

找了一个老外写的关于bootstrapWizard的向导插件代码，他这个用法看不懂，一脸懵逼。百度别人写的都能看懂，他这个用法，怎么理解运行原理。求大神解答一下。

问题出现的环境背景及自己尝试过哪些方法

找到范例网站。http://vinceg.github.io/twitt... 没有类似代码。
我百度关键字 ”bootstrapWizard data-option“，也没有这种用法。

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）
<form id="form" data-plugin="parsley" data-option="{}">

      <div id="rootwizard" data-plugin="bootstrapWizard" data-option="{
        nextSelector: '.button-next',
        previousSelector: '.button-previous',
        firstSelector: '.button-first',
        lastSelector: '.button-last',
        onTabClick: function(tab, navigation, index) {
          return false;
        },
        onNext: function(tab, navigation, index) {
          var instance = $('#form').parsley();
          instance.validate();
          if(!instance.isValid()) {
            return false;
          }
        }
      }">
        <ul class="nav nav-pills mb-3">
          <li class="nav-item"><a class="nav-link" href="#tab1" data-toggle="tab">First</a></li>
          <li class="nav-item"><a class="nav-link" href="#tab2" data-toggle="tab">Second</a></li>
          <li class="nav-item"><a class="nav-link" href="#tab3" data-toggle="tab">Third</a></li>
        </ul>
        <div class="tab-content">
            <div class="tab-pane active" id="tab1">
              <div class="form-group">
                <label>Username</label>
                <input type="text" class="form-control" required>                        
              </div>
              <div class="form-group">
                <label>Email</label>
                <input type="email" class="form-control" required>                        
              </div>
              <div class="row m-b">
                <div class="col-sm-6">
                  <label>Enter password</label>
                  <input type="password" class="form-control" required id="pwd">   
                </div>
                <div class="col-sm-6">
                  <label>Confirm password</label>
                  <input type="password" class="form-control" data-parsley-equalto="#pwd" required>      
                </div>   
              </div>
              <div class="form-group">
                <label>Phone</label>
                <input type="number" class="form-control" placeholder="XXX XXXX XXX" required>
              </div>
              <div class="checkbox">
                <label class="ui-check">
                  <input type="checkbox" name="check" checked required="true"><i></i> I agree to the <a href="#" class="text-info">Terms of Service</a>
                </label>
              </div>
            </div>
            <div class="tab-pane" id="tab2">
              <div class="form-group">
                <label>URL</label>
                <input type="url" class="form-control">
              </div>
            </div>
            <div class="tab-pane" id="tab3">
              <div class="form-group">
                <p>Finished</p>
              </div>
            </div>
            <div class="row py-3">
              <div class="col-6">
                <a href="#" class="btn white button-next">First</a>
                <a href="#" class="btn white button-previous">Previous</a>
              </div>
              <div class="col-6">
                <div class="d-flex justify-content-end">
                  <a href="#" class="btn white button-next">Next</a>
                  <a href="#" class="btn white button-last">Last</a>
                </div>
              </div>
            </div>
        </div>  
      </div>
    </form>

<!-- build:js scripts/app.min.js -->
<!-- jQuery -->
<script src="../libs/jquery/dist/jquery.min.js"></script>
<!-- Bootstrap -->
<script src="../libs/popper.js/dist/umd/popper.min.js"></script>
<script src="../libs/bootstrap/dist/js/bootstrap.min.js"></script>
<!-- core -->
<script src="../libs/pace-progress/pace.min.js"></script>
<script src="../libs/pjax/pjax.js"></script>

<script src="scripts/lazyload.config.js"></script>
<script src="scripts/lazyload.js"></script>
<script src="scripts/plugin.js"></script>
<script src="scripts/nav.js"></script>
<script src="scripts/scrollto.js"></script>
<script src="scripts/toggleclass.js"></script>
<script src="scripts/theme.js"></script>
<script src="scripts/ajax.js"></script>
<script src="scripts/app.js"></script>
<!-- endbuild -->
<script src="../libs/parsleyjs/dist/parsley.min.js"></script>
<script src="../libs/twitter-bootstrap-wizard/jquery.bootstrap.wizard.min.js"></script>

你期待的结果是什么？实际看到的错误信息又是什么？

<div id="rootwizard" data-plugin="bootstrapWizard" data-option ...
为啥在这个div属性里面要放个data-option，data-option 下面还一堆js代码，怎么js写到这里了，还没有用js的<script></script>包住运行。咋个运行原理，我用F12，没法给这个js代码，调试定位，没法跟踪。希望大神给我灌输灌输、教育教育我。