昨天项目需要做一个引导页，决定用jQuery-step。但是网上的例子太少了，所以总结一个。直接看代码和注释吧，有错误或者问题直接评论指出，谢谢。
api参考地址：https://github.com/rstaib/jquery-steps/wiki
css和js包下载地址：http://www.lxyzh.club/jquery-step.zip
HTML代码
<link href="/css/jQuery.step.css">// 注意导入css文件
<script src="/js/jquery.steps.js"></script>// 导入前确保jQuery已经集成了，如没有，就在这个js文件前导入jQuery
<body class="gray-bg">
<style>
body {
background-color: white !important;
}
input {
display: inline !important;
position: relative !important;
margin-top: 0 !important;
}
.content {
height: 220px !important;
}
span {
display: block;
}
</style>
<div class="wrapper wrapper-content animated fadeInRight">
<div style="text-align: center">
<h3>欢迎登录xxx系统！</h3>
<p>轻松四步，完成商户初始化设置</p>
</div>
<form id="xlfrom">
<div id="example-vertical">
<h3>商户定位</h3>
<section class="radio">
<h3>第一步：请选择与您最接近的商户类型</h3>
<div style="display: inline-block;margin-left: 20px;width: 40%">
<input id="typeOne" type="radio" name="merchantType" value="0" checked="checked">
<label for="typeOne">美容快修保养</label>
<div>
<input id="typeThree" type="radio" name="merchantType" value="2">
<label for="typeThree">综合维修厂（含美容）</label>
</div>
</div>
<div style="display: inline-block;margin-left: 25px;width: 40%">
<input id="typeTwo" type="radio" name="merchantType" value="1">
<label for="typeTwo">专业维修厂</label>
<div>
<input id="typeFour" type="radio" name="merchantType" value="3">
<label for="typeFour">车行（含售后）</label>
</div>
</div>
</section>
<h3>创建施工设置</h3>
<section>
<h3>第二步，系统将为您创建施工设置（包括工区，工位类型及常用车型）</h3>
<img src="">
<span>创建中...</span>
</section>
<h3>创建施工类别</h3>
<section>
<h3>第三步，系统将为您创建默认施工类别</h3>
<img src="">
<span>创建中...</span>
</section>
<h3>会员等级</h3>
<section>
<h3>第四步，请根据实际情况自定义会员等级标准</h3>
</section>
</div>
</form>
</div>
</body>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();
}
});