Rumah >hujung hadapan web >tutorial js >Cara menggunakan Layui untuk melaksanakan fungsi panel paparan kandungan boleh lipat
Cara menggunakan Layui untuk melaksanakan fungsi panel paparan kandungan boleh lipat
- PHPzasal
- 2023-10-24 11:45:181590semak imbas
Cara menggunakan Layui untuk melaksanakan fungsi panel paparan kandungan boleh lipat
Pengenalan:
Layui adalah satu set modularisasi jQuery Rangka kerja UI bahagian hadapan menyediakan komponen UI yang kaya dan antara muka yang mudah digunakan untuk memudahkan pembangun membina pelbagai antara muka web dengan cepat. Antaranya, panel paparan kandungan boleh lipat ialah salah satu komponen UI biasa Ia boleh mengembangkan atau meruntuhkan kandungan secara dinamik mengikut keperluan pengguna, memberikan pengalaman interaktif yang lebih baik. Artikel ini akan memperkenalkan cara menggunakan Layui untuk melaksanakan fungsi panel paparan kandungan boleh lipat dan memberikan contoh kod khusus.
1. Perkenalkan perpustakaan Layui
Sebelum menggunakan Layui, anda perlu memperkenalkan fail perpustakaan Layui yang berkaitan. Ia boleh diperkenalkan melalui CDN, atau fail berkaitan boleh dimuat turun ke dalam projek. Berikut ialah contoh kod yang memperkenalkan perpustakaan Layui dan fail gaya yang berkaitan:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>可折叠的内容展示面板</title>
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/layui/2.6.8/css/layui.css">
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/layui/2.6.8/layui.all.js"></script>
</head>
<body>
<!-- 内容展示面板的HTML结构 -->
</body>
</html> 2. Cipta panel paparan kandungan boleh lipat
Dalam fail HTML, melalui komponen panel Layui layui-runtuh, anda boleh membuat panel paparan kandungan boleh lipat dengan mudah. Berikut ialah contoh kod komponen panel ringkas:
<div class="layui-collapse">
<div class="layui-colla-item">
<h2 class="layui-colla-title">面板1</h2>
<div class="layui-colla-content">
面板1的内容
</div>
</div>
<div class="layui-colla-item">
<h2 class="layui-colla-title">面板2</h2>
<div class="layui-colla-content">
面板2的内容
</div>
</div>
<!-- 添加更多面板项 -->
</div>Dengan kod di atas, kami mencipta panel paparan kandungan yang mengandungi dua item panel, setiap item panel mengandungi tajuk dan kawasan kandungan. Pengguna boleh mengklik pada tajuk panel untuk mengembangkan atau meruntuhkan kawasan kandungan.
3 Mulakan komponen panel Layui
Selepas halaman dimuatkan, anda perlu memulakan komponen panel Layui melalui kaedah layui.use(). Dengan menghantar dalam collapsemodule, panel boleh dimulakan. Berikut ialah contoh kod untuk memulakan komponen panel:
<script>
layui.use(['collapse'], function() {
var collapse = layui.collapse;
collapse.render({
elem: '.layui-collapse',
accordion: true // 是否开启手风琴模式，默认值为false
});
});
</script>Dalam kod di atas, kami memperkenalkan dan menggunakan modul runtuh melalui kaedah layui.use() dan menjadikan komponen panel melalui runtuh kaedah .render(). Antaranya, elem ialah pemilih komponen panel, akordion ialah parameter sama ada hendak menghidupkan mod akordion, dan nilai lalainya adalah palsu. Dalam mod akordion, hanya satu item panel boleh dikembangkan pada masa yang sama.
4. Gaya tersuai
Untuk menjadikan komponen panel lebih selaras dengan keperluan anda sendiri, anda boleh mengubah suai penampilan panel dengan menyesuaikan gaya CSS. Berikut ialah contoh kod ringkas gaya tersuai:
<style>
.layui-colla-item {
margin-bottom: 10px;
border: 1px solid #e6e6e6;
}
.layui-colla-title {
padding: 10px;
background-color: #f2f2f2;
cursor: pointer;
}
.layui-colla-content {
padding: 10px;
display: none;
}
.layui-colla-content.show {
display: block;
}
</style>Dengan gaya di atas, kami mengubah suai gaya sempadan item panel, warna latar belakang tajuk dan mod paparan lalai bagi kandungan.
Ringkasan:
Menggunakan Layui, anda boleh dengan mudah melaksanakan fungsi panel paparan kandungan boleh lipat untuk memberikan pengguna pengalaman interaktif yang lebih baik. Dengan memperkenalkan pustaka Layui, mencipta komponen panel dan memulakan serta menyesuaikan gaya, anda boleh membina panel paparan kandungan boleh lipat dengan cepat yang memenuhi keperluan anda. Saya harap pengenalan dalam artikel ini akan membantu anda.
Atas ialah kandungan terperinci Cara menggunakan Layui untuk melaksanakan fungsi panel paparan kandungan boleh lipat. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!