Trittleistenpaneel basierend auf Laui (mit Code)

layui (homophon: UI-like) ist ein Front-End-UI-Framework, das mit seinen eigenen Modulspezifikationen geschrieben wurde und dem Schreiben und der Organisation von nativem HTML/CSS folgt /JS, werfen wir einen Blick auf die Implementierung des Step-Bar-Panels basierend auf Laui.

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

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

Erklärung

1. Jedes .layui-step-content-item stellt eine Registerkarte dar, die Höhe beträgt Standardmäßig ist der Mindestwert Vollbild

2. Der Schaltflächenbereich ist standardmäßig in der unteren rechten Ecke angezeigt. Die Anzahl der internen Schaltflächen kann individuell angepasst werden

3. Die Position zum Deaktivieren und Entsperren der Schaltfläche (i) Sie muss nach der aktuellen Schrittnummer liegen, d. h. im deaktivierten Zustand sollte die Position nicht erreicht sein

Beschreibung des Parameters „step.render()“

1. elem: äußerer Container

2. Titel: Textbeschreibung unter der Schrittleiste, Typ ist Array, kann weggelassen werden, Standardeinstellung [„Erster Schritt“, „Zweiter Schritt“, „Dritter Schritt“ , "..."]

3. currentStep: Was ist der erste Schritt? Er kann weggelassen werden. Der Standardwert ist der erste Schritt

4. canIconClick: Ob die Schrittleiste oben kann angeklickt werden. Der Standardwert ist „false“

5. Beschreibung: Beschreibender Text unter der Schrittleiste, Typ ist Array, kann weggelassen werden

6. isOpenStepLevel: ob strikt befolgt werden soll Die Reihenfolge der Schrittleiste, dh die Schritte, die nicht durchlaufen wurden, können nicht angeklickt werden, und die Schritte, die bestanden wurden, können weggelassen werden. Wenn es aktiviert ist, ist das Feld canIconClick deaktiviert standardmäßig

Erklärung der Funktionen, die extern verwendet werden können

1. render(): anfängliche Rendering-Schnittstelle

2. goStep(i): welche Nummer zum Schritt springen soll

3. goFirst(): Springe zu Schritt 1

4. goLast(): Springe zum letzten Schritt

5 🎜>

6. next(): Zum nächsten Schritt springen

7. Deaktiviert(i): Deaktiviert einen bestimmten Schritt

8. Deaktiviert einen bestimmten Schritt Deaktivieren Sie

Extern verwendbare Variablenbeschreibungen

1. currentStep: Holen Sie sich den aktuellen Schritt

Für weitere Laui-Kenntnisse beachten Sie bitte das

Layui-Verwendungs-Tutorial Spalte.

Das obige ist der detaillierte Inhalt vonTrittleistenpaneel basierend auf Laui (mit Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!