Panneau de barre de marche basé sur layui (avec code)

layui (homophone : UI-like) est un framework d'interface utilisateur front-end écrit en utilisant ses propres spécifications de module, suivant l'écriture et l'organisation du HTML/CSS natif /JS , jetons un coup d'œil à l'implémentation du panneau step bar basé sur layui.

élément 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>

référence 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);
    })
});

Explication

1 Chaque .layui-step-content-item représente une page à onglet, la hauteur est de 1. par défaut La valeur minimale est en plein écran

2. La zone des boutons est suspendue et fixée par défaut dans le coin inférieur droit. Elle peut être définie par vous-même. Le nombre de boutons internes peut être personnalisé

3. La position du bouton de désactivation et de déverrouillage ( i) Il doit être après le numéro d'étape actuel, c'est-à-dire que lorsqu'il est désactivé, la position ne doit pas avoir atteint

description du paramètre step.render()

1. elem : conteneur externe

2. titre : description textuelle sous la barre d'étape, le type est un tableau, peut être omis, par défaut ["Première étape", "Deuxième étape", "Troisième étape" , "..."]

3. currentStep : Quelle est l'étape initiale ? Elle peut être omise. La valeur par défaut est la première étape

4. canIconClick : Si la barre d'étape ci-dessus peut être omise. être cliqué. Il peut être omis. La valeur par défaut est false

5. description : texte descriptif sous la barre d'étape, le type est un tableau, peut être omis

6. isOpenStepLevel : s'il faut suivre strictement. l'ordre de la barre d'étapes, c'est-à-dire que les étapes qui n'ont pas été franchies ne peuvent pas être cliquées et que les étapes qui ont été franchies peuvent être cliquées, ce qui peut être omis. S'il est activé, le champ canIconClick est désactivé. par défaut

Explication des fonctions pouvant être utilisées en externe

1. render() : interface de rendu initiale

2.

3. goFirst() : passer à l'étape 1

4. goLast() : passer à la dernière étape

5. 🎜>

6. next() : Passer à l'étape suivante

7. désactivé(i) : Désactiver une certaine étape

8. activé(i) : Désactiver une certaine étape. Désactivez les

Descriptions de variables utilisables en externe

1. currentStep : Obtenez l'étape actuelle

Pour plus de connaissances sur Layui, veuillez prêter attention au

Tutoriel d'utilisation de Layui

Colonne.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!