【jQuery-step】【详解】

昨天项目需要做一个引导页，决定用jQuery-step。但是网上的例子太少了，所以总结一个。直接看代码和注释吧，有错误或者问题直接评论指出，谢谢。
api参考地址：https://github.com/rstaib/jquery-steps/wiki
css和js包下载地址：http://www.lxyzh.club/jquery-step.zip

HTML代码

// 注意导入css文件 
// 导入前确保jQuery已经集成了，如没有，就在这个js文件前导入jQuery



    

        
欢迎登录xxx系统！
        
轻松四步，完成商户初始化设置
    
    

        


            
商户定位
            

                
第一步：请选择与您最接近的商户类型
                

                    
                    美容快修保养
                    

                        
                        综合维修厂（含美容）
                    
                
                


                    
                    专业维修厂
                    

                        
                        车行（含售后）
                    
                
            
            
创建施工设置
            

                
第二步，系统将为您创建施工设置（包括工区，工位类型及常用车型）
                
                创建中...
            
            
创建施工类别
            

                
第三步，系统将为您创建默认施工类别
                
                创建中...
            
            
会员等级
            

                
第四步，请根据实际情况自定义会员等级标准

            
        
    

js代码

    let currentStepxl = 0;
    (function onInitxl() {// 获取步数
        // $('.steps').css('display','none');// 释放这个注释可以隐藏步数的导航栏
        $('.actions li.disabled').css('display', 'none');// 将上一步按钮隐藏
        $.ajax({
            type: 'post',
            url: '${ctx}/merchant/initGuide/getInitStatus',
            success: function (data) {
                //成功
                if (data.statusCode == 200) {
                    if (data.attach.initStatus) {
                        //引导页完成
                    } else {
                        currentStepxl = data.attach.currentStep;//步数

                    }

                }
            }
        });
    })();
    console.log(currentStepxl);
// 注册引导页
 $("#example-vertical").steps({
        headerTag: "h3", // 指定头部对应什么HTML标签
        bodyTag: "section", // 指定步骤内容对应的HTML标签
//        contentContainerTag:"div", // 指定包装所有内容的HTML标签
//        actionContainerTag:"div", // 指定包装分页导航的HTML标签
//        stepsContainerTag:"div", // 指定包装步骤内容的HTML标签
        stepsOrientation: 0, // 指定步骤为水平--vertical（垂直） horizontal（水平）
        transitionEffect: "slideLeft", // 步骤切换动画
//        autoFocus: true, // 将焦点设置为第一个向导实例，以便从一开始就启用关键导航 if true  优先级在startIndex之下
        forceMoveForward: true, // 防止跳转到下一步
        preloadContent: true,
        startIndex: currentStepxl, // 通过修改这个值来改变当前步数指向，即通过索引值确定向导加载后开始步骤是哪一步
        labels: {
            finish: "完成", // 修改按钮得文本
            next: "下一步", // 下一步按钮的文本
            previous: "上一步", // 上一步按钮的文本
            loading: "Loading ..."
        },
        onStepChanging: function (event, currentIndex, newIndex) {// 下一步切换时的监听
        	var result = false;
        	if (currentIndex = 1) {//第二步操作
        		$.ajax({
					type : 'POST',
					url : '${ctx}/merchant/workArea/defaultWorkArea',
					success : function(data) {
						//成功
						if (data.statusCode == 200) {
							result = true;
						}
					}
				});
        	}

            return result;
        },
//        onStepChanged: function (event, currentIndex, priorIndex) {// 下一步切换完成得监听
//
//        },
//        onCanceled: function (event) {// 取消按钮得监听
//
//        },
        onFinishing: function (event, currentIndex) {// 完成时得监听
            // form.validate().settings.ignore = ":disabled";

            return true;
        },
        onFinished: function (event, currentIndex) {// 完成后的监听
//            parent.Index.judgeUserBinding();
//            parent.addcustomer();// 打开新增会员等级页面
            parent.layer.closeAll();

        }
    });