效果:
静态文件存放路径图:
StepsTest.cshtml
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>@ViewBag.Title</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="format-detection" content="telephone=no">
<link href="/Content/layui/css/layui.css" rel="stylesheet" />
<script type="text/javascript" src="/Content/layui/layui.js"></script>
</head>
<body style="background:#fff">
<div style="line-height: 22px;font-size: 14px;margin: 15px;">
<div class="steps" id="steps"></div>
<button id="btnPrevious">上一步</button>
<button id="btnNext">下一步</button>
<button id="btnGoto">去第2步</button>
</div>
<script type="text/javascript">
layui.config({
base: '/Content/layui/lay/'
}).extend({
step: '/steps/step'
}).use(['step','form'], function () {
var $ = layui.$, form = layui.form;
var step = layui.step.render({
elem: '#steps',
stepNames: ['第一步', '第二步', '第三步', '第四步', '第五步', '完成'],
initStep: 3
});
$("#btnPrevious").click(function () {
step.previous();
});
$("#btnNext").click(function () {
step.next();
});
$("#btnGoto").click(function () {
step.goto(2);
});
});
</script>
</body>
</html>
step.js
layui.define(['jquery'], function (exports) {
var $ = layui.$
, step = {
//设置全局项
set: function (options) {
var that = this;
that.config = $.extend({}, that.config, options);
return that;
}
}
// 操作当前实例
, thisIns = function () {
var that = this, options = that.config;
var elem = $(options.elem);
return {
next: function () {
var index = elem.find("li.active").length;
if (index == elem.find("li").length) {
return this;
}
elem.find("li").eq(index).addClass("active");
return this;
},
/**
* 上一步
*/
previous: function () {
var index = elem.find("li.active").length;
if (index == 1) {
return this;
}
elem.find("li").eq(index - 1).removeClass("active");
return this;
},
/**
* 去第几步
* @param step
*/
goto: function (s) {
if (s < 0 || s > elem.find("li").length) {
return this;
}
elem.find("li").removeClass("active");
var $target = elem.find("li").eq(s - 1);
$target.addClass("active");
$target.prevAll("li").addClass("active");
return this;
}
}
}
//构造器
, Class = function (options) {
var that = this;
that.config = $.extend({}, that.config, step.config, options);
that.render();
return this;
};
//默认配置
Class.prototype.config = {
stepNames: ['', '', ''],
initStep: 1
};
//渲染视图
Class.prototype.render = function () {
var that = this, options = that.config;
var elem = $(options.elem);
// 初始化样式
var html = '';
html += '<ul class="progressbar">';
$.each(options.stepNames, function (index, name) {
html += '<li';
if (index < options.initStep) {
html += ' class="active" ';
}
html += '>';
html += name;
html += '</li>';
});
html += '</ul>';
elem.empty().append(html);
// 计算宽度
$(".progressbar li").css("width", 100 / options.stepNames.length + "%");
};
//核心入口
step.render = function (options) {
var ins = new Class(options);
var ex = thisIns.call(ins);
ins.config.thisIns = ex;
return ex;
};
//加载组件所需样式
layui.link(layui.cache.base + 'steps/step.css');
exports('step', step);
});
step.css
.progressbar {
font-family: montserrat, arial, verdana;
margin: 15px;
padding: 0;
text-align: center;
margin-bottom: 30px;
overflow: hidden;
counter-reset: step;
z-index: 99;
}
.progressbar li {
list-style-type: none;
font-size: 9px;
float: left;
position: relative;
}
.progressbar li:before {
content: counter(step);
counter-increment: step;
width: 25px;
line-height: 25px;
display: block;
font-size: 10px;
color: #333;
background: white;
border-radius: 25px;
margin: 0 auto 5px auto;
}
.progressbar li:after {
content: '';
width: calc(100% - 25px);
height: 2px;
background: white;
position: absolute;
left: calc((-100% + 25px) / 2);
top: 11px;
}
.progressbar li:first-child:after {
content: none;
}
.progressbar li.active:before, .progressbar li.active:after {
background: #0094ff;
color: white;
}