【WEB前端开辟】基于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学问请关注layui运用教程栏目。

以上就是基于layui的步骤条面板(附代码)的细致内容,更多请关注ki4网别的相干文章!