layui的步骤条面板怎么实现-创新互联

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的步骤条面板怎么实现-创新互联
标题URL:http://bzwzjz.com/article/diojso.html

其他资讯

Copyright © 2007-2020 广东宝晨空调科技有限公司 All Rights Reserved 粤ICP备2022107769号
友情链接: 成都网站制作 成都网站建设 成都网站设计 四川成都网站建设 品牌网站建设 重庆网站制作 企业网站设计 成都网站建设 成都网站设计 泸州网站建设 成都网站设计 专业网站设计 成都网站制作 手机网站制作 高端品牌网站建设 达州网站设计 成都商城网站建设 重庆外贸网站建设 网站建设方案 网站建设改版 网站制作 成都网站建设公司