Rumah > Artikel > hujung hadapan web > Bagaimana untuk menulis struktur pokok fail jquery
Bagaimana untuk menulis struktur pokok fail jquery
- PHPzasal
- 2023-05-28 11:34:07583semak imbas
Dengan pembangunan aplikasi web, kami selalunya perlu memaparkan beberapa struktur organisasi visual dalam aplikasi, dan struktur fail adalah salah satu daripadanya. Struktur pepohon fail jQuery ialah cara yang sangat cekap untuk memaparkan struktur hierarki fail dan folder.
Seterusnya, kami akan memperkenalkan anda cara menggunakan jQuery untuk mencipta struktur pepohon fail.
- Import perpustakaan jQuery
Mula-mula, anda perlu mengimport fail perpustakaan jQuery. Tambahkan kod berikut dalam teg kepala halaman:
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>- Buat Skema HTML
Seterusnya, kita perlu mencipta skema HTML untuk memaparkan struktur pepohon fail. Kami akan mencipta bekas div mudah untuk memaparkan hierarki pepohon fail.
<div class="file-tree">
<ul>
<li><a href="#">Folder 1</a>
<ul>
<li><a href="#">Subfolder 1</a></li>
<li><a href="#">Subfolder 2</a></li>
</ul>
</li>
<li><a href="#">Folder 2</a></li>
<li><a href="#">Folder 3</a>
<ul>
<li><a href="#">Subfolder 1</a></li>
</ul>
</li>
</ul>
</div>- Tulis kod JavaScript
Seterusnya, kami akan menulis kod jQuery untuk menukar struktur HTML kepada struktur pepohon fail. Kami akan menggunakan kaedah "setiap()" jQuery untuk mengulangi struktur HTML untuk menukarnya kepada struktur pokok fail.
$(document).ready(function () {
$(".file-tree ul").hide();
$(".file-tree li").each(function () {
if ($(this).children("ul").length > 0) {
$(this).addClass("parent");
}
});
$(".file-tree a").click(function () {
var children = $(this).parent("li.parent").children("ul");
if (children.is(":visible")) {
children.hide();
} else {
children.show();
}
});
});Dalam kod ini, kami melingkari setiap elemen "li" dan menyemak sama ada terdapat elemen "ul" di kalangan anak-anaknya. Jika ya, kami menandakannya sebagai folder induk. Kami kemudian menyembunyikan semua subdirektori folder (dengan memanggil kaedah "hide()") dan melampirkan pengendali acara klik untuk menunjukkannya (dengan memanggil kaedah "show()").
- Reka bentuk gaya
Akhir sekali, kami memerlukan beberapa gaya CSS untuk menjadikan struktur pokok fail kelihatan lebih kemas dan cantik.
.file-tree ul, li {
margin: 0;
padding: 0;
list-style: none;
}
.file-tree ul {
margin-left: 1em;
position: relative;
}
.file-tree li.parent > a:before {
content: "+ ";
}
.file-tree ul ul:before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0.5em;
border-left: 1px solid #ccc;
}Kod CSS ini mengubah struktur pepohon fail kepada reka bentuk visual yang lebih mudah dibaca. Ia menetapkan margin dan padding semua senarai tidak tersusun dan item senarai kepada sifar, dan menetapkan semua item dalam item senarai kepada tidak bertanda. Selain itu, ia menggunakan simbol "+" sebagai elemen pseudo CSS untuk mewakili folder induk, sambil menggunakan sempadan pepejal untuk mewakili folder anak.
Ringkasan
Dengan menggunakan jQuery untuk mencipta struktur pepohon fail, anda boleh memaparkan hierarki kompleks dengan mudah dan menyesuaikan penampilan dan tingkah lakunya dengan menggunakan gaya CSS. Apabila kecekapan anda dengan JavaScript dan jQuery meningkat, anda juga boleh mencipta struktur pepohon fail yang lebih kompleks untuk memenuhi keperluan khusus anda.
Atas ialah kandungan terperinci Bagaimana untuk menulis struktur pokok fail jquery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!