基于layui的步骤条面板（附代码）

layui（谐音：类UI) 是一款采用自身模块规范编写的前端UI框架，遵循原生HTML/CSS/JS的书写与组织形式，下面我们来看一下基于layui的步骤条面板实现。

html元素

 
 
条目1
 
条目2
 
条目3
 
条目4
 
 
 
 第一步 上一步 下一步 最后一步 走到第二步 禁用第三步 解禁第三步 
 
 

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知识请关注layui使用教程栏目。

Atas ialah kandungan terperinci 基于layui的步骤条面板（附代码）. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!