steps是一个轻量级但可自定义的jQuery插件，它可以将任何分组的元素转换为带有导航按钮和回调函数的分步向导。

很容易集成其他插件，例如jQuery验证插件，以创建具有字段验证的向导驱动表单。

安装和下载：

# NPM
$ npm install jquery.steps --save

参见：

• 吸引用户并增加转化率的10个最佳形式向导

如何使用它:

1.在html文档中加载最新版本的jQuery和jQuery步骤插件的文件。

<link rel="stylesheet" href="jquery-steps.css">
<script src="//code.jquery.com/jquery.min.js"></script>
<script src="jquery-steps.js"></script>

2.创建自己步骤的基本html结构如下：

<div id="demo">
  <div class="step-app">
    <ul class="step-steps">
      <li><a href="#step1">Step 1</a></li>
      <li><a href="#step2">Step 2</a></li>
      <li><a href="#step3">Step 3</a></li>
    </ul>
    <div class="step-content">
      <div class="step-tab-panel" id="step1">
        ...
      </div>
      <div class="step-tab-panel" id="step2">
        ...
      </div>
      <div class="step-tab-panel" id="step3">
        ...
      </div>
    </div>
    <div class="step-footer">
      <button data-direction="prev" class="step-btn">Previous</button>
      <button data-direction="next" class="step-btn">Next</button>
      <button data-direction="finish" class="step-btn">Finish</button>
    </div>
  </div>
</div>

3.只需调用顶部容器上的插件即可。

$('#demo').steps();

4.自定义步骤向导的可能选项。

$('#demo').steps({
  startAt: 0,
  showBackButton: true,
  showFooterButtons: true,
});

5.提供回调功能。

$('#demo').steps({
  onInit: $.noop,
  onDestroy: $.noop,
  onFinish: $.noop,
  onChange: function onChange() {
    return true;
  }
});

6.默认CSS类和选择器。

$('#demo').steps({
  stepSelector: '.step-steps > li',
  contentSelector: '.step-content > .step-tab-panel',
  footerSelector: '.step-footer',
  buttonSelector: 'button',
  activeClass: 'active',
  doneClass: 'done',
  errorClass: 'error'
});

7.API方法。

var mySteps = $('#demo').steps();
steps_api = steps.data('plugin_Steps');

// go to the next step
steps_api.next();

// back to the prev step
steps_api.prev();

// finish the wizard
steps_api.finish();

// get the current step index
steps_api.getStepIndex();

// destroy the plugin
steps_api.destory();

更新日志：

2022-12-31

• v1.14:更新的软件包

2021-06-21

• v1.1.3:更新包；添加了异步示例

2021-06-21

• v1.12:修复获取步骤索引

2021-04-05

• 修复：步骤索引中步骤选择器不是同级的问题

2020-09-27

• v1.1.0:更新包

2020-09-20

• v1.0.3:更新包

2019-08-12

• v1.0.2：增加了next、prev和finish方法；固定示例

2017-09-13

• v1.0.1版本

预览截图

jQuery 简单可自定义步骤向导插件 步骤