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

$('#smartwizard').smartWizard("loader", "show"); 是 jQuery Smart Wizard 插件的一个方法调用，用于显示加载器（loader）。Smart Wizard 插件提供了内置的加载器功能，可以在步骤切换或内容加载时显示一个加载动画，以提升用户体验。

方法解析

1. loader 方法
   • loader 是 Smart Wizard 插件提供的一个内置方法，用于控制加载器的显示和隐藏。
   • 它接受两个参数：
     • show：显示加载器。
     • hide：隐藏加载器。
2. 使用场景
   • 当你希望在步骤切换时显示加载动画，或者在异步加载内容时提示用户正在加载，可以使用这个方法。
   • 例如，在 AJAX 请求加载内容时，可以在请求开始时调用 loader.show，在请求完成时调用 loader.hide。

示例代码

以下是一个完整的示例，展示如何在步骤切换时显示加载器，并在内容加载完成后隐藏加载器：

HTML 结构

HTML复制

<div id="smartwizard">
    <ul class="nav">
        <li><a href="#step-1">步骤一</a></li>
        <li><a href="#step-2">步骤二</a></li>
        <li><a href="#step-3">步骤三</a></li>
    </ul>
    <div class="tab-content">
        <div id="step-1" class="tab-pane active">这里是步骤一的内容。</div>
        <div id="step-2" class="tab-pane">这是步骤二的内容。</div>
        <div id="step-3" class="tab-pane">这是步骤三的内容。</div>
    </div>
</div>

预览

JavaScript 初始化

JavaScript复制

$(function() {
    $('#smartwizard').smartWizard({
        selected: 0, // 默认选中第一个步骤
        theme: 'arrows', // 使用箭头主题
        contentURL: null, // 如果需要异步加载内容，可以设置为 AJAX URL
        contentCache: true, // 是否缓存内容
        transition: {
            animation: 'none' // 切换动画
        },
        toolbarSettings: {
            toolbarPosition: 'bottom', // 工具栏位置
            toolbarButtonPosition: 'right', // 按钮位置
            showNextButton: true, // 显示“下一步”按钮
            showPreviousButton: true // 显示“上一步”按钮
        },
        anchorSettings: {
            anchorClickable: true, // 是否允许点击步骤
            enableAllAnchors: false, // 是否启用所有步骤
            markDoneStep: true, // 标记已完成的步骤
            markAllPreviousStepsAsDone: true // 标记之前的所有步骤为已完成
        }
    });

    // 监听步骤切换事件
    $('#smartwizard').on('showStep', function(e, anchorObject, stepNumber, stepDirection) {
        // 显示加载器
        $('#smartwizard').smartWizard("loader", "show");

        // 模拟异步加载内容
        setTimeout(function() {
            // 隐藏加载器
            $('#smartwizard').smartWizard("loader", "hide");
            console.log(`加载完成，当前步骤：${stepNumber}`);
        }, 2000); // 模拟 2 秒的加载时间
    });
});

示例说明

1. 加载器显示和隐藏
   • 在步骤切换时，通过 showStep 事件触发加载器的显示。
   • 使用 setTimeout 模拟异步加载内容，完成后调用 loader.hide 隐藏加载器。
2. 异步加载内容
   • 如果需要从服务器动态加载内容，可以设置 contentURL 属性为 AJAX 请求的 URL。
   • 在 AJAX 请求开始时调用 loader.show，请求完成时调用 loader.hide。

注意事项

• 加载器样式：Smart Wizard 插件默认提供了加载器的样式，但你可以通过自定义 CSS 进行修改。
• 异步加载：如果使用 contentURL 动态加载内容，确保服务器返回的内容是 HTML 格式，并且可以正确插入到步骤中。
• 事件监听：通过监听 showStep 和 leaveStep 等事件，可以实现更复杂的逻辑，例如表单验证或数据提交。