最新公告
  • 欢迎您光临立业阁,本站秉承服务宗旨 履行“站长”责任,销售只是起点 服务永无止境!立即加入我们
  • 基于layui的步骤条面板(附代码)_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的步骤条面板(附代码)的详细内容,

    常见问题FAQ

    免费下载或者VIP会员专享资源能否直接商用?
    本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
    提示下载完但解压或打开不了?
    最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。若排除这种情况,可在对应资源底部留言,或 联络我们.。
    找不到素材资源介绍文章里的示例图片?
    对于PPT,KEY,Mockups,APP,网页模版等类型的素材,文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买,且本站不负责(也没有办法)找到出处。 同样地一些字体文件也是这种情况,但部分素材会在素材包内有一份字体下载链接清单。
    • 971会员总数(位)
    • 111831资源总数(个)
    • 2本周发布(个)
    • 0 今日发布(个)
    • 203稳定运行(天)

    提供最优质的资源集合

    立即查看 了解详情
    冀ICP备19022365号-1 百度地图

    侵权联系邮箱[email protected]

    立业阁(www.liyege.cn)免费提供wordpress主题模板、dedecms模板、帝国cms模板、小说网站源码、电影网站源码以及网络技术分享,建站源码,小说模板,电影模板,网赚教程,VPS推荐