layui的步驟條面板怎么實(shí)現(xiàn)？針對(duì)這個(gè)問題，這篇文章給出了相對(duì)應(yīng)的分析和解答，希望能幫助更多想解決這個(gè)問題的朋友找到更加簡(jiǎn)單易行的辦法。

網(wǎng)站建設(shè)哪家好，找創(chuàng)新互聯(lián)建站！專注于網(wǎng)頁設(shè)計(jì)、網(wǎng)站建設(shè)、微信開發(fā)、微信平臺(tái)小程序開發(fā)、集團(tuán)企業(yè)網(wǎng)站建設(shè)等服務(wù)項(xiàng)目。為回饋新老客戶創(chuàng)新互聯(lián)還提供了涉縣免費(fèi)建站歡迎大家使用！

layui（諧音：類UI) 是一款采用自身模塊規(guī)范編寫的前端UI框架，遵循原生HTML/CSS/JS的書寫與組織形式，下面我們來看一下基于layui的步驟條面板實(shí)現(xiàn)。

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、每一個(gè) .layui-step-content-item代表一個(gè)tab頁面，高度默認(rèn)最小值為滿屏

2、按扭區(qū)默認(rèn)懸浮固定在右下角，可自行設(shè)置，內(nèi)部的按鈕個(gè)數(shù)可以自定義

3、按鈕禁用與解禁的位置（i）必須在當(dāng)前步數(shù)之后，即禁用時(shí)，該位置應(yīng)尚未走到

step.render()參數(shù)說明

1、elem：外層容器

2、title：步驟條下方文字說明，類型為數(shù)組，可省略，默認(rèn)["第一步","第二步","第三步","。。。"]

3、currentStep：初始時(shí)是第幾步，可省略，默認(rèn)第一步

4、canIconClick：上方步驟條是否可以點(diǎn)擊，可省略，默認(rèn)false

5、description：步驟條下方描述性文字，類型為數(shù)組，可省略

6、isOpenStepLevel：是否嚴(yán)格按照步驟條順序執(zhí)行，即未走過的步驟不可點(diǎn)，走過的可點(diǎn)，可省略，若開啟則默認(rèn)canIconClick字段關(guān)閉

外部可以使用的函數(shù)說明

1、render()：初始渲染界面

2、goStep(i)：跳到第幾步

3、goFirst()：跳到第1步

4、goLast()：跳到最后1步

5、prev()：跳到上一步

6、next()：跳到下一步

7、disabled(i)：禁用某一步

8、abled(i)：解除某一步的禁用

外部可使用的變量說明

1、currentStep：獲取當(dāng)前是第幾步

關(guān)于layui的步驟條面板的實(shí)現(xiàn)方法就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到。

分享題目：layui的步驟條面板怎么實(shí)現(xiàn)-創(chuàng)新互聯(lián)
標(biāo)題來源：http://m.newbst.com/article30/diojso.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供做網(wǎng)站、商城網(wǎng)站、網(wǎng)站改版、用戶體驗(yàn)、全網(wǎng)營(yíng)銷推廣、App設(shè)計(jì)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)