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 サイトの他の関連記事を参照してください。

ホットAIツール

Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。

Undress AI Tool
脱衣画像を無料で

Clothoff.io
AI衣類リムーバー

Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

人気の記事

ホットツール

メモ帳++7.3.1
使いやすく無料のコードエディター

SublimeText3 中国語版
中国語版、とても使いやすい

ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境

ドリームウィーバー CS6
ビジュアル Web 開発ツール

SublimeText3 Mac版
神レベルのコード編集ソフト(SublimeText3)

ホットトピック









Layui ログインページジャンプ設定手順: ジャンプコードの追加: ログインフォーム送信ボタンクリックイベントに判定を追加し、ログイン成功後、window.location.href 経由で指定ページにジャンプします。フォーム構成を変更します。lay-filter="login" のフォーム要素に非表示の入力フィールドを追加します。名前は「redirect」、値はターゲット ページ アドレスです。

layui は、フォームのすべてのフィールド データを直接取得する、単一のフォーム要素の値を取得する、formAPI.getVal() メソッドを使用して指定されたフィールド値を取得する、フォーム データをシリアル化するなど、フォーム データを取得するためのさまざまなメソッドを提供します。これを AJAX リクエスト パラメータとして使用し、フォーム送信イベントをリッスンしてデータを取得します。

layui を使用してデータを送信する方法は次のとおりです。 Ajax を使用する: リクエスト オブジェクトを作成し、リクエスト パラメーター (URL、メソッド、データ) を設定し、レスポンスを処理します。組み込みメソッドを使用する: $.post、$.get、$.postJSON、$.getJSON などの組み込みメソッドを使用してデータ転送を簡素化します。

アダプティブ レイアウトは、layui フレームワークのレスポンシブ レイアウト機能を使用して実現できます。手順には以下が含まれます:layui フレームワークを参照する。アダプティブ レイアウト コンテナを定義し、layui-container クラスを設定します。レスポンシブ ブレークポイント (xs/sm/md/lg) を使用して、特定のブレークポイントの下にある要素を非表示にします。グリッド システム (layui-col-) を使用して要素の幅を指定します。オフセット (layui-offset-) によって間隔を作成します。応答性の高いユーティリティ (layui-invisible/show/block/inline) を使用して、要素の可視性とその表示方法を制御します。

Lauiui と Vue の違いは主に機能と懸念事項に反映されます。 Layui は UI 要素の迅速な開発に重点を置き、ページ構築を簡素化するプレハブ コンポーネントを提供します。Vue は、データ バインディング、コンポーネント開発、および状態管理に重点を置いたフルスタック フレームワークで、複雑なアプリケーションの構築により適しています。 Layui は学習が簡単で、ページをすばやく作成するのに適しています。Vue は学習曲線が急ですが、スケーラブルで保守が簡単なアプリケーションの構築に役立ちます。プロジェクトのニーズと開発者のスキル レベルに応じて、適切なフレームワークを選択できます。

layui は、開発者が最新の応答性の高いインタラクティブな Web アプリケーションを迅速に構築できるように、豊富な UI コンポーネント、ツール、機能を提供するフロントエンド UI フレームワークです。その機能には、柔軟で軽量、モジュール式の設計、豊富なコンポーネント、強力なツール、簡単な機能が含まれます。カスタマイズ。管理システム、電子商取引プラットフォーム、コンテンツ管理システム、ソーシャル ネットワーク、モバイル アプリケーションなど、さまざまな Web アプリケーションの開発に広く使用されています。

layui フレームワークは、開発者が応答性の高い Web アプリケーションを迅速に構築できるようにする、使いやすい UI コンポーネントとツールのセットを提供する JavaScript ベースのフロントエンド フレームワークです。その機能には、モジュール式、軽量、応答性が高く、完全なドキュメントとコミュニティ サポートが含まれます。 layui は、管理バックエンド システム、電子商取引 Web サイト、モバイル アプリケーションの開発で広く使用されています。利点は迅速な起動、効率の向上、メンテナンスの容易さですが、欠点はカスタマイズの貧弱さと技術の更新の遅さです。

layui と vue はフロントエンド フレームワークであり、layui は UI コンポーネントとツールを提供する軽量ライブラリであり、vue は UI コンポーネント、状態管理、データ バインディング、ルーティングなどの機能を提供する包括的なフレームワークです。 layui はモジュール型アーキテクチャに基づいており、vue はコンポーネント化されたアーキテクチャに基づいています。 lauiui には小規模なエコシステムがあり、vue には大規模でアクティブなエコシステムがあります。 Lauiui の学習曲線は低く、vue の学習曲線は急です。 Layui は小規模なプロジェクトや UI コンポーネントの迅速な開発に適しており、vue は大規模なプロジェクトや豊富な機能を必要とするシナリオに適しています。
