Layui 기반의 스텝바 패널(코드 포함)

layui(동음이의어: UI-like)는 네이티브 HTML/CSS/JS의 작성 및 구성 형식을 따르며 자체 모듈 사양을 사용하여 작성된 프런트 엔드 UI 프레임워크입니다. 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);
    })
});

description

1. 각 .layui-step-content-item은 탭 페이지를 나타냅니다. 기본 최소 높이 값은 전체 화면입니다.

2. 버튼 영역은 오른쪽 하단에 고정되어 있으며, 내부 버튼 수는 사용자 정의할 수 있습니다

3. 버튼을 비활성화하고 잠금 해제하는 위치(i)는 현재 단계 수 이후여야 합니다. 비활성화된 경우 해당 위치는

step.render()매개변수 설명

1. elem: 외부 컨테이너

2. 제목: 단계 표시줄 아래의 텍스트 설명입니다. . 기본값은 ["첫 번째 단계", "두 번째 단계",". "]

3. CurrentStep: 초기 단계로 생략 가능합니다. 기본값은 첫 번째 단계입니다. 4. canIconClick: 위의 단계 표시줄을 클릭할 수 있는지 여부. 기본값은 false입니다

5. 설명: 단계 표시줄 아래에 설명 텍스트, 유형은 배열이며 생략 가능

6. isOpenStepLevel: 단계의 순서를 엄격히 따를지 여부. 즉, 진행하지 않은 단계는 클릭이 불가능하고, 통과한 단계는 클릭이 가능하며, 이는 생략이 가능합니다. 활성화된 경우 기본적으로 canIconClick 필드가 닫힙니다

기능 설명

1.render(): 초기 렌더링 인터페이스

2.goStep(i): 어느 단계로 점프

3.goFirst(): 1단계로 점프

4. 마지막 단계로

5.prev(): 이전 단계로 이동

6.next(): 다음 단계로 이동

7.disabled(i): 특정 단계를 비활성화합니다.

8. ): 특정 단계를 비활성화할 수 없습니다

외부에서 사용할 수 있는 변수에 대한 설명

1. currentStep: 현재 단계를 가져옵니다

layui에 대한 자세한 내용은

layui 사용 튜토리얼

칼럼을 참고하세요.

위 내용은 Layui 기반의 스텝바 패널(코드 포함)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!