Step bar panel based on layui (with code)

layui (homophone: UI-like) is a front-end UI framework written using its own module specifications, following the writing and organizational form of native HTML/CSS/JS , let’s take a look at the implementation of the step bar panel based on layui.

html element

<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 reference

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);
    })
});

Explanation

1. Each .layui-step-content-item represents a tab page, the height is default The minimum value is full screen

2. The button area is suspended and fixed in the lower right corner by default. It can be set by yourself. The number of internal buttons can be customized

3. The position of button disabling and unlocking ( i) It must be after the current number of steps, that is, when disabled, the position should not have reached

step.render() parameter description

1. elem: outer container

2. Title: Text description below the step bar. The type is an array and can be omitted. The default is ["First Step", "Second Step", "Third Step", "..."]

3. currentStep: What is the initial step? It can be omitted. The default is the first step.

4. canIconClick: Whether the step bar above can be clicked. It can be omitted. The default is false

5. description: Descriptive text below the step bar, type is array, can be omitted

6. isOpenStepLevel: Whether to strictly follow the order of the step bar, that is, the steps that have not been passed cannot be clicked, and the steps that have been passed can be clicked, which can be omitted. If If it is turned on, the canIconClick field is turned off by default

Description of functions that can be used externally

1. render(): initial rendering interface

2. goStep(i): which number to jump to Step

3. goFirst(): Jump to the first step

4. goLast(): Jump to the last step

5. prev(): Jump to the previous step One step

6, next(): Jump to the next step

7, disabled(i): Disable a certain step

8, enabled(i): Disable a certain step Disable

Externally usable variable description

1. currentStep: Get the current step

Please pay attention to more layui knowledgelayui usage tutorial Column.

The above is the detailed content of Step bar panel based on layui (with code). For more information, please follow other related articles on the PHP Chinese website!