基於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的步驟條面板（附代碼）的詳細內容。更多資訊請關注PHP中文網其他相關文章！