Daraxtsimon ko‘rinish (tree view)
CSS va JavaScript yordamida daraxtsimon ko‘rinish (tree view) yaratishni o‘rganing.
Daraxtsimon ko‘rinish (tree view)
Daraxtsimon ko‘rinish ma’lumotlarni ierarxik tarzda ifodalaydi, bunda har bir element bir nechta ichki elementlarga ega bo‘lishi mumkin.
Daraxt shoxlarini ochish yoki yopish uchun strelka(lar)ni bosing.
- Beverages
- Water
- Coffee
- Tea
- Black Tea
- White Tea
- Green Tea
- Sencha
- Gyokuro
- Matcha
- Pi Lo Chun
Daraxtsimon ko‘rinish (tree view)
1-qadam) HTML qo‘shing:
Misol
<ul id="myUL">
<li><span class="caret">Beverages</span>
<ul class="nested">
<li>Water</li>
<li>Coffee</li>
<li><span class="caret">Tea</span>
<ul class="nested">
<li>Black Tea</li>
<li>White Tea</li>
<li><span class="caret">Green Tea</span>
<ul class="nested">
<li>Sencha</li>
<li>Gyokuro</li>
<li>Matcha</li>
<li>Pi Lo Chun</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
2-qadam) CSS qo‘shing:
Misol
/* Remove default bullets */
ul, #myUL {
list-style-type: none;
}
/* Remove margins and padding from the parent ul */
#myUL {
margin: 0;
padding: 0;
}
/* Style the caret/arrow */
.caret {
cursor: pointer;
user-select: none; /* Prevent text selection */
}
/* Create the caret/arrow with a unicode, and style it */
.caret::before {
content: "\25B6";
color: black;
display: inline-block;
margin-right: 6px;
}
/* Rotate the caret/arrow icon when clicked on (using JavaScript) */
.caret-down::before {
transform: rotate(90deg);
}
/* Hide the nested list */
.nested {
display: none;
}
/* Show the nested list when the user clicks on the caret/arrow (with JavaScript) */
.active {
display: block;
}
3-qadam) JavaScript qo‘shing:
Misol
var toggler = document.getElementsByClassName("caret");
var i;
for (i = 0; i < toggler.length; i++) {
toggler[i].addEventListener("click", function() {
this.parentElement.querySelector(".nested").classList.toggle("active");
this.classList.toggle("caret-down");
});
}
O‘zingiz sinab ko‘ring »
Belgilash katakchali daraxtsimon ko‘rinish
Bu misolda caret (uchburchak belgi) o‘rniga "ballot box" (belgilash katakchasi) unicode belgisidan foydalanamiz:
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!