Lauiuiベースのステップバーパネル（コード付き）

layui (同音異義語: UI 風の) は、ネイティブ HTML/ の記述および構成形式に従って、独自のモジュール仕様を使用して記述されたフロントエンド UI フレームワークです。 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 はタブ ページを表し、高さは次のとおりです。デフォルト 最小値は全画面です

#2. ボタン領域はデフォルトで右下隅に停止および固定されています. 自分で設定できます. 内部ボタンの数はカスタマイズ可能

3. ボタンの無効化とロック解除の位置 (i) 現在のステップ数の後である必要があります。つまり、無効化されている場合、その位置は

step.render() パラメーターの説明## に達していてはなりません。

#1. elem: 外部コンテナ

2. Title: ステップバーの下のテキスト説明 型は配列のため省略可能 デフォルトは["First Step", "Second Step" , "第 3 ステップ", "..."]

3. currentStep: 最初のステップは何ですか? 省略できます。デフォルトは最初のステップです。

4. canIconClick:上のステップバーをクリックできるかどうか 省略可能 デフォルトは false

5 description: ステップバー下の説明文、型は配列、省略可能

6 isOpenStepLevel: ステップバーの順序に厳密に従うか、つまり、通過していないステップはクリックできないか、通過したステップをクリックできるかどうかを省略できます。 canIconClick フィールドはデフォルトでオフになっています

外部で使用できる関数の説明

1. render(): 初期レンダリング インターフェイス

2. goStep(i):どの番号のステップにジャンプするか

3. goFirst(): 最初のステップ

4 にジャンプします。 goLast(): 最後のステップ

5 にジャンプします。 prev( ): 前のステップにジャンプします One step

6、next(): 次のステップにジャンプ

7、disabled(i): 特定のステップを無効にします

8 、enabled(i): 特定のステップを無効にする Disable

外部で使用可能な変数の説明

1. currentStep: 現在のステップを取得します

より多くの Lauiui 知識にご注意ください

layui の使い方チュートリアル

コラム。

以上がLauiuiベースのステップバーパネル（コード付き）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。