JS yig‘iladigan blok (collapse)
JS Collapse (collapse.js)
Akkordeonlar va navigatsiya kabi yig‘iladigan komponentlar uchun asosiy stillar va moslashuvchan qo‘llab-quvvatlashga ega bo‘ling.
Plagin bog‘liqligi: Collapse ishlashi uchun Bootstrap versiyangizga transitions plagini qo‘shilgan bo‘lishi kerak.
Yig‘iladigan bloklar bo‘yicha darslik uchun Bootstrap yig‘iladigan bloklar (collapse) darsligimizni o‘qing.
Collapse plagini klasslari
| Klass | Tavsif | Misol |
|---|---|---|
| .collapse | Kontentni yashiradi | Sinab ko‘ring |
| .collapse in | Kontentni ko‘rsatadi | Sinab ko‘ring |
| .collapsing | O‘tish (transition) boshlanganda qo‘shiladi va tugaganda olib tashlanadi | Sinab ko‘ring |
data-* atributlari orqali
Yig‘iladigan element boshqaruvini avtomatik biriktirish uchun elementga shunchaki data-toggle="collapse" va data-target qo‘shing. data-target atributi yig‘ish (collapse) qo‘llaniladigan CSS selektorini qabul qiladi. Yig‘iladigan elementga collapse klassini qo‘shishni unutmang. Agar u standart holatda ochiq bo‘lishini istasangiz, qo‘shimcha in klassini qo‘shing.
Misol
<button class="btn" data-toggle="collapse" data-target="#demo">Collapsible</button>
<div id="demo" class="collapse">
Some text..
</div>
O‘zingiz sinab ko‘ring »
Maslahat: Yig‘iladigan boshqaruv elementiga akkordeonsimon guruh boshqaruvini qo‘shish uchun data-parent="#selector" data atributini qo‘shing.
JavaScript orqali
Qo‘lda quyidagicha yoqing:
$('.collapse').collapse()
Collapse parametrlari
Parametrlarni data atributlari yoki JavaScript orqali uzatish mumkin. Data atributlari uchun parametr nomini data- ga qo‘shing, masalan: data-parent="".
| Nomi | Tipi | Default | Tavsif |
|---|---|---|---|
| parent | selector | false | Ushbu yig‘iladigan element ko‘rsatilganda, belgilangan ota element ichidagi barcha yig‘iladigan elementlar yopiladi. (an’anaviy akkordeon xatti-harakatiga o‘xshaydi — bu panel klassiga bog‘liq) - Quyidagi misolga qarang |
| toggle | boolean | true | Chaqirilganda yig‘iladigan elementni ochadi yoki yopadi (toggle) |
Collapse metodlari
Quyidagi jadvalda barcha mavjud collapse metodlari keltirilgan.
| Metod | Tavsif | Sinab ko‘ring |
|---|---|---|
| .collapse(options) | Yig‘iladigan elementni parametr bilan faollashtiradi. Yaroqli qiymatlar uchun yuqoridagi parametrlarga qarang | |
| .collapse("toggle") | Yig‘iladigan elementni ochadi yoki yopadi (toggle) | Sinab ko‘ring |
| .collapse("show") | Yig‘iladigan elementni ko‘rsatadi | Sinab ko‘ring |
| .collapse("hide") | Yig‘iladigan elementni yashiradi | Sinab ko‘ring |
Collapse hodisalari
Quyidagi jadvalda barcha mavjud collapse hodisalari keltirilgan.
| Hodisa | Tavsif | Sinab ko‘ring |
|---|---|---|
| show.bs.collapse | Yig‘iladigan element ko‘rsatilish arafasida bo‘lganda sodir bo‘ladi | Sinab ko‘ring |
| shown.bs.collapse | Yig‘iladigan element to‘liq ko‘rsatilganda sodir bo‘ladi (CSS o‘tishlari (transitions) tugagandan keyin) | Sinab ko‘ring |
| hide.bs.collapse | Yig‘iladigan element yashirilish arafasida bo‘lganda sodir bo‘ladi | Sinab ko‘ring |
| hidden.bs.collapse | Yig‘iladigan element to‘liq yashirilganda sodir bo‘ladi (CSS o‘tishlari (transitions) tugagandan keyin) | Sinab ko‘ring |
Ko‘proq misollar
Oddiy yig‘iladigan blok
Quyidagi misolda tugma boshqa elementning kontentini yoyadi va yig‘adi:
Misol
<button type="button" class="btn btn-info" data-toggle="collapse" data-target="#demo">
Simple collapsible
</button>
<div id="demo" class="collapse in">
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat.
</div>
O‘zingiz sinab ko‘ring »
Yig‘iladigan panel
Quyidagi misolda yig‘iladigan panel ko‘rsatilgan:
Misol
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#collapse1">Collapsible panel</a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse">
<div class="panel-body">Panel Body</div>
<div class="panel-footer">Panel Footer</div>
</div>
</div>
</div>
O‘zingiz sinab ko‘ring »
Yig‘iladigan ro‘yxat guruhi
Quyida ichida ro‘yxat guruhi bo‘lgan yig‘iladigan panel ko‘rsatilgan:
Misol
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#collapse1">Collapsible list group</a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse">
<ul class="list-group">
<li class="list-group-item">One</li>
<li class="list-group-item">Two</li>
<li class="list-group-item">Three</li>
</ul>
<div class="panel-footer">Footer</div>
</div>
</div>
</div>
O‘zingiz sinab ko‘ring »
Akkordeon
Quyidagi misolda panel komponentini kengaytirish orqali yaratilgan oddiy akkordeon ko‘rsatilgan:
Eslatma: data-parent atributi yig‘iladigan elementlardan biri ko‘rsatilganda belgilangan ota element ichidagi barcha yig‘iladigan elementlar yopilishini ta’minlaydi.
Misol
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse1">
Collapsible Group 1</a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse in">
<div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse2">
Collapsible Group 2</a>
</h4>
</div>
<div id="collapse2" class="panel-collapse collapse">
<div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse3">
Collapsible Group 3</a>
</h4>
</div>
<div id="collapse3" class="panel-collapse collapse">
<div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.</div>
</div>
</div>
</div>
O‘zingiz sinab ko‘ring »
Yoyish va yig‘ish belgisi hamda matnini almashtirish
Quyidagi misolda yig‘iladigan kontent ochilganda va yopilganda ochish/yopish matni hamda belgisi o‘zgaradi:
Misol
$(document).ready(function(){
$("#demo").on("hide.bs.collapse", function(){
$(".btn").html('<span class="glyphicon glyphicon-collapse-down"></span> Open');
});
$("#demo").on("show.bs.collapse", function(){
$(".btn").html('<span class="glyphicon glyphicon-collapse-up"></span> Close');
});
});
O‘zingiz sinab ko‘ring »
Yoki CSS’dan foydalanishingiz mumkin:
Misol
/* Icon when the collapsible content is shown */
.btn:after {
font-family: "Glyphicons Halflings";
content: "\e114";
}
/* Icon when the collapsible content is hidden */
.btn.collapsed:after {
content: "\e080";
}
O‘zingiz sinab ko‘ring »
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!