Layuiを使用して折りたたみ可能なスケジュール機能を実装する方法

Layui を使用して折りたたみ可能なスケジュール機能を実装する方法

Layui は、使いやすく、美しいインターフェイスを備えた人気のフロントエンド UI フレームワークです。フォルダブルはスケジュール機能を実装する一般的な方法であり、より多くのスケジュール情報を整然とした簡潔な方法で表示できます。この記事では、Layui を使用して折りたたみ可能なスケジュール機能を実装する方法と、具体的なコード例を紹介します。

1. 準備

まず、Layui フレームワークが正しく導入されていることを確認する必要があります。 CDN経由で導入することもできますし、ローカル版をダウンロードしてページに導入することもできます。

2. HTML 構造

HTML では、スケジュールのコンテンツを含めるための基本的なコンテナを定義する必要があります。通常、リスト (

または

) を使用してスケジュール項目 (
1. ) を保持できます。

   <div class="schedule-container">
     <ul class="schedule-list">
       <li class="schedule-item">
         <div class="schedule-header">2022-01-01</div>
         <div class="schedule-content">
           <p>日程内容1</p>
           <p>日程内容2</p>
         </div>
       </li>
       <li class="schedule-item">
         <div class="schedule-header">2022-01-02</div>
         <div class="schedule-content">
           <p>日程内容3</p>
         </div>
       </li>
       <!-- 其他日程项 -->
     </ul>
   </div>

   ログイン後にコピー

   3. CSS スタイル

   折りたたみ可能な効果を実現するには、要素の表示と非表示を制御するいくつかのスタイルを定義する必要があります。

   .schedule-container {
     width: 300px;
   }
   
   .schedule-list {
     list-style: none;
     padding: 0;
     margin: 0;
   }
   
   .schedule-item {
     margin-bottom: 10px;
   }
   
   .schedule-header {
     padding: 10px;
     background-color: #f2f2f2;
     cursor: pointer;
   }
   
   .schedule-content {
     padding: 10px;
     display: none;
   }

   ログイン後にコピー

   4. JavaScript コード

   JavaScript では、要素セレクター、要素操作、イベント モジュールをそれぞれ導入するために Layui のモジュラー ローディング関数を使用する必要があります。

   layui.use(['jquery', 'element', 'form'], function($) {
     var element = layui.element;
     
     // 打开折叠项
     $('.schedule-header').on('click', function() {
       $(this).siblings('.schedule-content').slideToggle();
       element.render('collapse');
     });
     
     // 折叠全部项
     $('.btn-collapse-all').on('click', function() {
       $('.schedule-content').slideUp();
       element.render('collapse');
     });
     
     // 展开全部项
     $('.btn-expand-all').on('click', function() {
       $('.schedule-content').slideDown();
       element.render('collapse');
     });
   });

   ログイン後にコピー

   上記のコードでは、Layui のモジュラー読み込みメソッドを使用し、JQuery セレクターとイベントを通じて要素の表示と非表示を制御します。 .schedule-header 要素をクリックすると、slideToggle() メソッドを使用して .schedule-content 要素の表示状態を切り替え、## を使用します。 #element.render ('collapse')折りたたみスタイルを更新します。さらに、すべてのスケジュール項目を折りたたんだり展開したりするための 2 つのボタンも提供されています。

   5. 効果のデモ
   上記のコードは、折りたたみ可能なスケジュール機能を実装しています。スケジュールのタイトルをクリックすると、対応するコンテンツを展開または折りたたむことができ、グローバルな折りたたみボタンと展開ボタンもあります。
   上記のコードを導入した後、次の方法で効果を実証できます:
   スケジュール タイトルをクリックして、対応するコンテンツを展開または折りたたむ;
   1. すべてのスケジュール コンテンツを折りたたむには、[すべて折りたたむ] ボタンをクリックします。
   2. すべてのスケジュール コンテンツを展開するには、[すべて展開] ボタンをクリックします。
   6. まとめ
   上記の手順により、Layui を使用して折りたたみ可能なスケジュール機能を実装することができました。 HTML 構造を適切にレイアウトし、スタイルを定義し、JavaScript コードを記述することで、よりエレガントで使いやすいユーザー インターフェイスを実現できます。この記事がLayuiで開発する際のお役に立てれば幸いです。

以上がLayuiを使用して折りたたみ可能なスケジュール機能を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。