layui的步骤条面板怎么实现？针对这个问题，这篇文章给出了相对应的分析和解答，希望能帮助更多想解决这个问题的朋友找到更加简单易行的办法。
layui（谐音：类UI) 是一款采用自身模块规范编写的前端UI框架，遵循原生HTML/CSS/JS的书写与组织形式，下面我们来看一下基于layui的步骤条面板实现。
html元素
计算
安全
数据库
网络和加速
企业服务
<div class="layui-step">
<div class="layui-step-content layui-clear">
<div class="layui-step-content-item">条目1</div>
<div class="layui-step-content-item">条目2</div>
<div class="layui-step-content-item">条目3</div>
<div class="layui-step-content-item">条目4</div>
</div>
<div class="layui-step-btn">
<div class="layui-btn-group">
<button class="layui-btn goFirst">第一步</button>
<button class="layui-btn prev">上一步</button>
<button class="layui-btn next">下一步</button>
<button class="layui-btn goLast">最后一步</button>
<button class="layui-btn goStep">走到第二步</button>
<button class="layui-btn disabled">禁用第三步</button>
<button class="layui-btn abled">解禁第三步</button>
</div>
</div>
</div>js引用
layui.use(['jquery','step'], function(){
var $ = layui.jquery;
var step = layui.step;
step.render({
elem: '.layui-step',
// title: ["第一步","第二步","第三步","第四步"],
description: ["aaa","bbb","ccc","ddd"],
currentStep: 1,
// canIconClick: true,
isOpenStepLevel: true
});
$(".goFirst").on("click",function() {
step.goFirst();
})
$(".prev").on("click",function() {
step.prev();
})
$(".next").on("click",function() {
step.next();
})
$(".goLast").on("click",function() {
step.goLast();
})
$(".goStep").on("click",function() {
step.goStep(2);
})
$(".disabled").on("click",function() {
step.disabled(3);
})
$(".abled").on("click",function() {
step.abled(3);
})
});说明
1、每一个 .layui-step-content-item代表一个tab页面，高度默认最小值为满屏
2、按扭区默认悬浮固定在右下角，可自行设置，内部的按钮个数可以自定义
3、按钮禁用与解禁的位置（i）必须在当前步数之后，即禁用时，该位置应尚未走到
step.render()参数说明
1、elem：外层容器
2、title：步骤条下方文字说明，类型为数组，可省略，默认["第一步","第二步","第三步","。。。"]
3、currentStep：初始时是第几步，可省略，默认第一步
4、canIconClick：上方步骤条是否可以点击，可省略，默认false
5、description：步骤条下方描述性文字，类型为数组，可省略
6、isOpenStepLevel：是否严格按照步骤条顺序执行，即未走过的步骤不可点，走过的可点，可省略，若开启则默认canIconClick字段关闭
外部可以使用的函数说明
1、render()：初始渲染界面
2、goStep(i)：跳到第几步
3、goFirst()：跳到第1步
4、goLast()：跳到最后1步
5、prev()：跳到上一步
6、next()：跳到下一步
7、disabled(i)：禁用某一步
8、abled(i)：解除某一步的禁用
外部可使用的变量说明
1、currentStep：获取当前是第几步
关于layui的步骤条面板的实现方法就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
