Cara menggunakan Layui untuk melaksanakan fungsi penjadualan boleh lipat

Cara menggunakan Layui untuk melaksanakan fungsi penjadualan boleh lipat

Layui ialah rangka kerja UI bahagian hadapan yang popular dengan ciri kesederhanaan, kemudahan penggunaan dan antara muka yang cantik. Boleh dilipat ialah cara biasa untuk melaksanakan fungsi jadual, yang boleh memaparkan lebih banyak maklumat jadual dengan teratur dan ringkas. Artikel ini akan memperkenalkan cara menggunakan Layui untuk melaksanakan fungsi penjadualan boleh lipat dan menyediakan contoh kod khusus.

1. Persediaan

Pertama, kita perlu memastikan rangka kerja Layui telah diperkenalkan dengan betul. Ia boleh diperkenalkan melalui CDN, atau anda boleh memuat turun versi tempatan dan memperkenalkannya ke dalam halaman.

2. Struktur HTML

Dalam HTML, kita perlu menentukan bekas asas untuk mengandungi kandungan jadual. Biasanya senarai (

atau

) boleh digunakan untuk menyimpan item jadual (
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>

   Salin selepas log masuk

   3. Gaya CSS

   Untuk mencapai kesan boleh lipat, kita perlu menentukan beberapa gaya untuk mengawal paparan dan penyembunyian elemen.

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

   Salin selepas log masuk

   4. Kod JavaScript

   Dalam JavaScript, kami perlu menggunakan fungsi pemuatan modular Layui untuk memperkenalkan pemilih elemen, operasi elemen dan modul acara masing-masing.

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

   Salin selepas log masuk

   Dalam kod di atas, kami menggunakan kaedah pemuatan modular Layui dan mengawal paparan serta penyembunyian elemen melalui pemilih dan acara JQuery. Klik .schedule-header元素时，通过slideToggle()方法来切换.schedule-content元素的显示状态，并使用element.render('collapse') untuk mengemas kini gaya lipatan. Selain itu, kami juga menyediakan dua butang untuk meruntuhkan dan mengembangkan semua item jadual.

   5. Demonstrasi Kesan

   Kod di atas melaksanakan fungsi jadual boleh lipat Klik tajuk jadual untuk mengembangkan atau meruntuhkan kandungan yang sepadan, dan ia juga mempunyai butang lipatan dan kembangan global.

   Selepas memperkenalkan kod di atas, kami boleh menunjukkan kesannya dengan cara berikut:

   1. Klik pada tajuk jadual untuk mengembangkan atau meruntuhkan kandungan yang sepadan
   2. Klik butang "Rubuhkan Semua" untuk meruntuhkan semua kandungan jadual;
   Klik " Klik butang "Kembangkan Semua" untuk mengembangkan semua kandungan jadual.
   6. Ringkasan
   Melalui langkah di atas, kami berjaya menggunakan Layui untuk melaksanakan fungsi jadual boleh lipat. Dengan meletakkan struktur HTML dengan betul, mentakrifkan gaya dan menulis kod JavaScript, kami boleh mencapai antara muka pengguna yang lebih elegan dan mudah digunakan. Saya harap artikel ini akan membantu anda apabila membangunkan dengan Layui.

Atas ialah kandungan terperinci Cara menggunakan Layui untuk melaksanakan fungsi penjadualan boleh lipat. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!