- Hide code
<nav class="nav-step">
<ul id="steps" class="steps">
<li><a href="javascript:;">1<span class="gap"></span>入住须知</a></li>
<li><a href="javascript:;">2<span class="gap"></span>公司信息提交</a></li>
<li><a href="javascript:;">3<span class="gap"></span>等待审核</a></li>
<li><a href="javascript:;">4<span class="gap"></span>合同签订</a></li>
</ul>
</nav>
<div id="step-content" class="step-content">
<div class="step-pane" >
</div>
<div class="step-pane">
</div>
<div class="step-pane">
</div>
<div class="step-pane">
</div>
<div class="step-pane">
</div>
<div class="step-pane"
</div>
</div>

var STEP_CONFIG = {
0: {
form: {
//....
}
},
1: {
form: {
//....
}
},
2: {
form: {
//....
}
},
3: {
form: {
//....
}
}
//...
}

var STEP_PANES_CONFIG = {
//2,1表示第二个步骤的第一个小步内容
//2,2表示第二个步骤的第二个小步内容
//2,3表示第二个步骤的第三个小步内容
2: {
1: {
//配置小步骤相关的东西
},
2: {
//配置小步骤相关的东西
},
3: {
//配置小步骤相关的东西
}
//配置大步骤相关的东西
}
}

var DEFAULTS = {
config: [], //必传参数，步骤项与步骤内容项的配置，如[1,2,3]表示一共有三个（config.length）步骤，第1个步骤有1个（config[0]）内容项，第2个步骤有2个（config[1]）内容项，第3个步骤有3个（config[2]）内容项
stepPanes: '', //必传参数，步骤内容项的jq 选择器
navSteps: '', //必传参数，步骤项的jq 选择器
initStepIndex: 1, //初始时显示的步骤位置，如果一共有4个步骤，该参数可选值为：1,2,3,4
initPaneIndex: 1, //初始时显示的步骤内容项位置，基于initStepIndex，如果initStepIndex设置成2，且该步骤有3个内容项，则该参数可选值为：1,2,3
onStepJump: $.noop, //步骤项跳转时候的回调
onBeforePaneChange: $.noop, //步骤内容项切换之前的回调
onPaneChange: $.noop, //步骤内容项切换之后的回调
onPaneLoad: $.noop //步骤内容项第一次显示时的回调
};

return {
goStep: function(step) {
goStep(step - 1);
},
goNext: function() {
go(currentPane + 1);
},
goPrev: function() {
go(currentPane - 1);
}
}

//根据步骤内容项的绝对索引位置，获取相对于步骤项的位置
//step从0开始，pane表示绝对索引位置，比如stepPanes一共有6个，那么pane可能的值就是0-5
//举例：config: [1,3,1,1], step: 2, pane: 4，就会返回1，表示第三个步骤的第1个步骤内容项的位置
StepJump.getRelativePaneIndex = function(config, step, pane) {
return pane - getPaneCountBeforeStep(config, step) + 1;
};

//步骤项UI控制
function showStep(targetStep) {
$navSteps.each(function(i) {
var cname = this.className;
cname = $.trim(cname.replace(/current|done/g, ''));
if (i < targetStep) {
//当前步骤之前的状态全部设置为done
cname += ' done';
} else if (i == targetStep) {
//当前步骤项状态设置为current
cname += ' current';
}
this.className = cname;
});
}

define(function(require, exports, module) {
var $ = require('jquery');
//step: 表示步骤项
//pane: 表示步骤内容项
var DEFAULTS = {
config: [], //必传参数，步骤项与步骤内容项的配置，如[1,2,3]表示一共有三个（config.length）步骤，第1个步骤有1个（config[0]）内容项，第2个步骤有2个（config[1]）内容项，第3个步骤有3个（config[2]）内容项
stepPanes: '', //必传参数，步骤内容项的jq 选择器
navSteps: '', //必传参数，步骤项的jq 选择器
initStepIndex: 1, //初始时显示的步骤位置，如果一共有4个步骤，该参数可选值为：1,2,3,4
initPaneIndex: 1, //初始时显示的步骤内容项位置，基于initStepIndex，如果initStepIndex设置成2，且该步骤有3个内容项，则该参数可选值为：1,2,3
onStepJump: $.noop, //步骤项跳转时候的回调
onBeforePaneChange: $.noop, //步骤内容项切换之前的回调
onPaneChange: $.noop, //步骤内容项切换之后的回调
onPaneLoad: $.noop //步骤内容项第一次显示时的回调
};
function StepJump(options) {
var opts = $.extend({}, DEFAULTS, options),
$stepPanes = $(opts.stepPanes),
$navSteps = $(opts.navSteps),
config = opts.config,
stepPaneCount = sum.apply(null, config), //步骤内容项的总数
currentStep = opts.initStepIndex - 1, //当前步骤项的索引
currentPane = sum.apply(null, config.slice(0, currentStep)) + (opts.initPaneIndex - 1), //当前内容项的索引
maxStepIndex = currentStep, //允许通过直接点击步骤项跳转的最大步骤项位置
$activePane = $stepPanes.eq(currentPane);
//注册仅触发一次的stepLoad事件
$stepPanes.each(function() {
$(this).one('stepLoad', $.proxy(function() {
opts.onPaneLoad.apply(this, [].slice.apply(arguments).concat([currentStep, currentPane]));
}, this));
});
//初始化UI
showStep(currentStep);
$activePane.addClass('active').trigger('stepLoad');
//注册点击步骤项的回调
$navSteps.on('click.step.jump', function() {
var $this = $(this),
step = $this.index(opts.navSteps); //找到当前点击步骤项在所有步骤项中的位置
if (step > maxStepIndex || $this.hasClass('current')) return;
//跳转到该步骤项的第一个步骤内容项
goStep(step);
});
//步骤项UI控制
function showStep(targetStep) {
$navSteps.each(function(i) {
var cname = this.className;
cname = $.trim(cname.replace(/current|done/g, ''));
if (i < targetStep) {
//当前步骤之前的状态全部设置为done
cname += ' done';
} else if (i == targetStep) {
//当前步骤项状态设置为current
cname += ' current';
}
this.className = cname;
});
}
function goStep(step) {
go(getPaneCountBeforeStep(config, step));
}
//通过步骤内容项查找步骤项的位置
function getStepByPaneIndex(targetPane) {
var r = 0,
targetStep = 0;
for (var i = 0; i < stepPaneCount; i++) {
r = r + config[i];
if (targetPane < r) {
targetStep = i;
break;
}
}
return targetStep;
}
function go(targetPane) {
if (targetPane < 0 || targetPane >= stepPaneCount) {
return;
}
//在切换步骤内容项之前提供给外部的回调，以便外部可以对当前步骤内容项做一些校验之类的工作
//如果回调返回false则取消切换
var ret = opts.onBeforePaneChange(currentPane, targetPane, currentStep);
if (ret === false) return;
var $targetPane = $stepPanes.eq(targetPane),
targetStep = getStepByPaneIndex(targetPane);
$activePane.removeClass('active');
$targetPane.addClass('active');
opts.onPaneChange(currentPane, targetPane, currentStep);
$activePane = $targetPane;
currentPane = targetPane;
var oldStepIndex = currentStep;
currentStep = targetStep;
currentStep > maxStepIndex && (maxStepIndex = currentStep);
$targetPane.trigger('stepLoad');
if (targetStep !== oldStepIndex) {
showStep(targetStep);
opts.onStepJump(oldStepIndex, targetStep);
}
}
return {
goStep: function(step) {
goStep(step - 1);
},
goNext: function() {
go(currentPane + 1);
},
goPrev: function() {
go(currentPane - 1);
}
}
}
//根据步骤内容项的绝对索引位置，获取相对于步骤项的位置
//step从0开始，pane表示绝对索引位置，比如stepPanes一共有6个，那么pane可能的值就是0-5
//举例：config: [1,3,1,1], step: 2, pane: 4，就会返回1，表示第三个步骤的第1个步骤内容项的位置
StepJump.getRelativePaneIndex = function(config, step, pane) {
return pane - getPaneCountBeforeStep(config, step) + 1;
};
//求和
//注：slice(start,end)返回的数据不包含end索引对应的元素
function sum() {
var a = [].slice.apply(arguments),
r = 0;
a.forEach(function(n) {
r = r + n;
});
return r;
}
//统计在指定的步骤项之前一共有多少个步骤内容项，step从0开始，比如config: [1,3,1,1], 当step=2，就会返回4
function getPaneCountBeforeStep(config, step) {
return sum.apply(null, config.slice(0, step));
}
return StepJump;
});

define(function(require, exports, module) {
var $ = require('jquery');
var StepJump = require('components/stepJump'),
stepJump = new StepJump({
config: [1,3,1,1],
stepPanes: '#step-content .step-pane',
navSteps: '#steps > li',
initStepIndex: 1
});
$(document).on('click.stepPane.switch', '.btn-step', function(e) {
var $this = $(this);
if ($this.hasClass('next')) {
stepJump.goNext();
} else {
stepJump.goPrev();
}
});
});

//STEP_STATUS取值：
//0 待填写资料，如果每次进入这个页面时是这个状态值，那么就显示【1 入住须知】这个大步骤，表示正在进行该步骤；
//1 待提交资料，如果每次进入这个页面时是这个状态值，那么就显示【2 公司信息提交】这个大步骤，小步骤默认显示它的第一个；
//2 审核未通过，如果每次进入这个页面时是这个状态值，那么就显示【3 等待审核】这个大步骤；
//3 审核已通过，如果每次进入这个页面时是这个状态值，那么就显示【3 等待审核】这个大步骤；
//4 待确认合同，如果每次进入这个页面时是这个状态值，那么就显示【4 合同签订】这个大步骤；
var STEP_STATUS = 3,
MODE = STEP_STATUS == 2 || STEP_STATUS == 4 "color: #0000ff">5. 小结

本文把最近工作的一部分成果总结了一下，提供了一个StepJump组件，也许在你的工作中也有用得着的地方，当然每个人的思路跟做法都不一定相同，我也仅仅是分享的目的。其实这几天的工作思考的东西还是挺多的，除了这个组件之外，更多的想法都集中在样式分离，CSS命名跟表单组件的分离这一块，只不过现在这些思想还不够系统，还不到总结分享的水平，这些工作方法层面的理论，很少人去总结跟分享，我目前只见到张鑫旭的博客上有较完整的一套思路，学习下来，确实有不少收获跟体会，但是这毕竟是别人的，有一些只可意会不可言传的精华，还是掌握不到，只能一步步去积累才行，等将来我自己的思路成形了，我会考虑把我的想法全部分享出来，相信这件事情会成为我今年分享的最有价值的内容。


以上内容给大家介绍了JS中多步骤多分步的StepJump组件，希望对大家有所帮助！