智能向导是一个jQuery向导插件，可以将长内容拆分为一个循序渐进的交互式向导界面。非常适合表单向导和基于步骤的导游。

更多功能：

• AJAX已启用。
• 无障碍。
• 黑暗模式
• 支持的事件。
• 采用Bootstrap设计。
• 5个内置主题。
• 支持URL哈希。
• 创建一个显示当前步骤的步骤栏。
• 键盘导航。
• 与Bootstrap程序5、Bootstrap程序4和Bootstrap程序3兼容。

参见：

• 10个最佳表单向导插件，吸引用户并增加转化率

如何使用它:

1.在网页中加载Bootstrap的样式表（可选，自v5.0.0起）。

<link rel="stylesheet" href="bootstrap.min.css" />

2.加载核心样式表智能向导.css以及您在网页中选择的主题CSS。

<!-- Core Stylesheet -->
<link href="./dist/css/smart_wizard.min.css" rel="stylesheet" />
<!-- Optional SmartWizard themes -->
<link href="./dist/css/smart_wizard_arrows.min.css" rel="stylesheet">
<link href="./dist/css/smart_wizard_dots.min.css" rel="stylesheet">
<link href="./dist/css/smart_wizard_round.min.css" rel="stylesheet">
<link href="./dist/css/smart_wizard_square.min.css" rel="stylesheet">

<!-- All In One -->
<link href="./dist/css/smart_wizard_all.min.css" rel="stylesheet" />

3.智能向导的基本HTML结构。

<div id="smartwizard">
  <ul class="nav">
   <li>
     <a class="nav-link" href="#step-1">
      Step 1
     </a>
   </li>
   <li>
     <a class="nav-link" href="#step-2">
      Step 2
     </a>
   </li>
   <li>
     <a class="nav-link" href="#step-3">
      Step 3
     </a>
   </li>
   ... more nav items here ...
  </ul>

  <div class="tab-content">
   <div id="step-1" class="tab-pane" role="tabpanel">
      Step 1
   </div>
   <div id="step-2" class="tab-pane" role="tabpanel">
      Step 2
   </div>
   <div id="step-3" class="tab-pane" role="tabpanel">
      Step 3
   </div>
   ... more steps here ...
  </div>
</div>

4.在网页末尾加载jQuery库和jQuery智能向导插件的脚本。

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="./dist/js/jquery.smartWizard.min.js"></script>

5.使用默认选项初始化智能向导。就是这样。

$('#smartwizard').smartWizard();

6.这个例子展示了如何通过AJAX从外部数据源加载步骤：

<ul class="nav">
  <li class="nav-item">
    <a class="nav-link" href="#step-1" data-repo="jquery-smarttab">
      <strong>SmartTab</strong><br />repository details from GitHub
    </a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#step-2" data-repo="smartwizard">
      <strong>SmartWizard</strong><br />repository details from GitHub
    </a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#step-3" data-repo="jquery-smartcart">
      <strong>SmartCart</strong><br />repository details from GitHub
    </a>
  </li>
</ul>

$("#smartwizard").on("stepContent", function(e, anchorObject, stepIndex, stepDirection) {

  var repo    = anchorObject.data('repo');
  var ajaxURL = "https://api.npms.io/v2/package/" + repo;
  // Return a promise object
  return new Promise((resolve, reject) => {

    // Ajax call to fetch your content
    $.ajax({
        method  : "GET",
        url     : ajaxURL,
        beforeSend: function( xhr ) {
            // Show the loader
            $('#smartwizard').smartWizard("loader", "show");
        }
    }).done(function( res ) {
        // console.log(res);

        var html = '<h2>Ajax data about ' + repo + ' loaded from GitHub</h2>';
        html += '<br>URL: <strong>' + ajaxURL + '</strong>';
        html += '<br>Name: <strong>' + res.collected.metadata.name + '</strong>';
        html += '<br>Description: ' + res.collected.metadata.description;
        html += '<br>Homepage: <a href="' + res.collected.github.homepage + '" >'+ res.collected.github.homepage +'</a>';
        html += '<br>Keywords: ' + res.collected.metadata.keywords.join(', ');

        // html += '<br>Clone URL: ' + res.clone_url;
        html += '<br>Stars: ' + res.collected.github.starsCount;
        html += '<br>Forks: ' + res.collected.github.forksCount;
        html += '<br>Watchers: ' + res.collected.github.subscribersCount;
        html += '<br>Open Issues: ' + res.collected.github.issues.openCount + '/' + res.collected.github.issues.count;

        html += '<br><br>Popularity: ' + parseInt(res.score.detail.popularity * 100);
        html += '<br>Quality: ' + parseInt(res.score.detail.quality * 100);
        html += '<br>Maintenance: ' + parseInt(res.score.detail.maintenance * 100);

        // Resolve the Promise with the tab content
        resolve(html);

        // Hide the loader
        $('#smartwizard').smartWizard("loader", "hide");
    }).fail(function(err) {

        // Reject the Promise with error message to show as tab content
        reject( "An error loading the resource" );

        // Hide the loader
        $('#smartwizard').smartWizard("loader", "hide");
    });

  });
});

7.所有可用于轻松自定义向导的默认选项。

$('#smartwizard').smartWizard({

  // Initial selected step, 0 = first step 
  selected: 0,  

  // 'arrows', 'square', 'round', 'dots'
  theme: 'basic',

  // Nav menu justification. true/false
  justified: true,

  // Automatically adjust content height
  autoAdjustHeight:true, 

  // Show url hash based on step 
  enableURLhash: true, 

  // Enable the back button support
  backButtonSupport: true, 

  // Animation options
  transition: {
    // Animation effect on navigation, none|fade|slideHorizontal|slideVertical|slideSwing|css(Animation CSS class also need to specify)
    animation: 'none', 
    // Animation speed. Not used if animation is 'css'
    speed: '400', 
    // Animation easing. Not supported without a jQuery easing plugin. Not used if animation is 'css'
    easing: '', 
    // Only used if animation is 'css'. Animation CSS prefix
    prefixCss: '', 
    // Only used if animation is 'css'. Step show Animation CSS on forward direction
    fwdShowCss: '', 
    // Only used if animation is 'css'. Step hide Animation CSS on forward direction
    fwdHideCss: '', 
    // Only used if animation is 'css'. Step show Animation CSS on backward direction
    bckShowCss: '', 
    // Only used if animation is 'css'. Step hide Animation CSS on backward direction
    bckHideCss: '', 
  },

  // Step bar options
  toolbar: {
    // none|top|bottom|both
    position: 'bottom', 
    // show/hide a Next button
    showNextButton: true, 
    // show/hide a Previous button
    showPreviousButton: true, 
    // Extra html to show on toolbar
    extraHtml: '' 
  },

  // Anchor options
  anchor: {
    // Enable/Disable anchor navigation 
    enableNavigation: true, 
    // Activates all anchors clickable always
    enableNavigationAlways: false, 
    // Add done state on visited steps
    enableDoneState: true, 
    // When a step selected by url hash, all previous steps are marked done
    markPreviousStepsAsDone: true, 
    // While navigate back, done state will be cleared
    unDoneOnBackNavigation: false, 
    // Enable/Disable the done state navigation
    enableDoneStateNavigation: true 
  },

  // Keyboard options
  keyboard: {
    // Enable/Disable keyboard navigation(left and right keys are used if enabled)
    keyNavigation: true, 
    // Left key code
    keyLeft: [37], 
    // Right key code
    keyRight: [39] 
  },

  // Language variables for button
  lang: { 
    next: 'Next',
    previous: 'Previous'
  },

  // CSS Class settings
  style: { 
    mainCss: 'sw',
    navCss: 'nav',
    navLinkCss: 'nav-link',
    contentCss: 'tab-content',
    contentPanelCss: 'tab-pane',
    themePrefixCss: 'sw-theme-',
    anchorDefaultCss: 'default',
    anchorDoneCss: 'done',
    anchorActiveCss: 'active',
    anchorDisabledCss: 'disabled',
    anchorHiddenCss: 'hidden',
    anchorErrorCss: 'error',
    anchorWarningCss: 'warning',
    justifiedCss: 'sw-justified',
    btnCss: 'sw-btn',
    btnNextCss: 'sw-btn-next',
    btnPrevCss: 'sw-btn-prev',
    loaderCss: 'sw-loading',
    progressCss: 'progress',
    progressBarCss: 'progress-bar',
    toolbarCss: 'toolbar',
    toolbarPrefixCss: 'toolbar-',
  },

  // Array of disabled Steps
  disabledSteps: [],    

  // Highlight step with errors
  errorSteps: [], 

  // Array Steps warning 
  warningSteps: [], 

  // Hidden steps
  hiddenSteps: [],

  // Callback function for content loading
  getContent: null, 
  
});

8.可用的事件处理程序。

// When the plugin is initialized
$("#smartwizard").on("initialized", function(e) {
  // do something
});

// When the plugin is loaded
$("#smartwizard").on("loaded", function(e) {
  // do something
});

// Triggered just before leaving from a step
$("#smartwizard").on("leaveStep", function(e, anchorObject, stepIndex, nextStepNumber, stepDirection) {
  // do something
});

// When a step is shown
$("#smartwizard").on("showStep", function(e, anchorObject, stepIndex, stepDirection, stepPosition) {
  // do something
});

9.创建自己的向导控件的可用API方法。

// goto a specific step
$('#smartwizard').smartWizard('goToStep', stepIndex, force);

// update options
$('#smartwizard').smartWizard('setOptions', stepIndex);

// goto the next step
$('#smartwizard').smartWizard('next');

// goto the prev step
$('#smartwizard').smartWizard('prev');

// reset the wizard
$('#smartwizard').smartWizard('reset');

// change the state of step(s)
$('#smartwizard').smartWizard("setState", [1,3], "disable");
$('#smartwizard').smartWizard("setState", [2], "hide");

// unset the state of step(s)
$('#smartwizard').smartWizard("unsetState", [1,3], "disable");

// get the current step index
var stepIndex = $('#smartwizard').smartWizard("getStepIndex");

// show/hide content loader
$('#smartwizard').smartWizard("loader", "show");
$('#smartwizard').smartWizard("loader", "hide");

// get options info
$('#smartwizard').smartWizard("getOptions");

// get step info
$('#smartwizard').smartWizard("getStepInfo");

// adjust the content height of the current step
$('#smartwizard').smartWizard("fixHeight");

更新日志：

版本6.0.6（2022-10-03）

• 修复：步骤1的历史记录不起作用

版本6.0.5（2022-08-08）

• 已修复：unDoneOnBackNavigation不工作

版本6.0.4（2022-07-31）

• 更改：代码优化

版本6.0.3（2022-07-31）

• 已修复：快速导航时无法正确维护导航

版本6.0.1（2022-06-27）

• 添加：支持jQuery Slim版本
• 添加了：公共函数fixHeight。
• 添加：公共函数setState。
• 添加：公共函数unsetState。
• 添加：公共函数getStepInfo，用于获取步骤索引和总步骤。
• 添加了：带有force参数的goToStep函数。
• 添加：内置进度条
• 添加：新主题，方形和圆形
• 添加：点和正方形这些可以通过添加导航进度CSS类在导航上有进度条。
• 添加：颜色可以使用CSS变量动态更改。
• 添加：Bootstrap 5支持
• 增加：所有主题的Num（徽章）类支持
• 添加：RTL（从右到左语言）支持
• 添加：初始化事件
• 添加：将CSS类名移动到选项
• 添加：可以扩展过渡动画
• 添加：CSS动画支持过渡动画。支持Animate.css
• 更改：JavaScript和CSS代码被重写
• 更改：强制所有CSS主题
• 更改：使大多数选项可以通过setOptions功能更改
• 更改：用最少且有意义的名称重写选项名称和属性
• 更改：改进了过渡动画
• 已修复：重置无法清除错误状态的现有步骤
• 修复：goToStep方法无法识别正确的步骤
• 已修复：URL导航以检查是否访问了步骤。
• Fixed:已修复并添加了fixHeight公共函数以刷新内容高度。
• 已修复：CSS文件为空
• 已修复：没有转换时showStep事件中的stepNumber不正确
• 已修复：showStep在初始化时显示Null而不是索引0
• 已修复：showStep的stepIndex包含以前的索引
• 已修复：在Bootrap 4模态中使用时不显示内容
• 已修复：其他修复
• 已删除：this.options.toolbar.buttonPosition已删除
• 已删除：循环导航已删除
• 已移除：黑暗模式已移除。添加了CSS变量支持来更改任何颜色。请参见深色示例。

v5.1.1 (2020-07-11)

• 添加：辅助功能
• 添加：所有主题都支持黑暗模式
• 添加：新主题（进度）
• 添加：leaveStep事件有新参数=>nextStepIndex
• 添加：UMD（通用模块定义）支持
• 已修复：leaveStep事件中的步长方向不正确

v5.0.0版本（2020-05-24）

• 完全重写JavaScript和CSS
• CSS到SCSS
• 已更新所有生成包
• 通过Promise提供外部Ajax内容支持
• 添加了新的导航动画
• 添加了新主题
• 新的公共功能
• 新内容加载事件
• 具有Bootstrap兼容性的独立CSS

版本4.4.1（2020-02-16）

• 添加了goToStep和hiddenSteps方法
• 生成已更新到最新可用的系统包。

第4.3.1版（2018年3月12日）

• Bootstrap 4支持、错误修复和改进

版本4.2.2（2017-03-27）

• 添加了小修复和多向导示例

v4.2.1（2017年3月27日）

• 圆点和圆圈主题更新为新设计，并做出响应

第4.1.7版（2017年2月21日）

• 圆点和圆圈主题更新为新设计，并做出响应

第4.1.5版（2017-02-01）

• JS和CSS更新

第4.1.2版（2017-01-09）

• JS和CSS更新

第4.1.1版（2016-12-08）

• 许多改进和添加

2016-11-16

• 更新至版本v4.0.5

预览截图

灵活 Bootstrap插件创建向导样式 界面 智能向导