JS Collapse (collapse.js)
Baz stilleri ve accordions ve navigasyon gibi katlanabilir bileşenleri için esnek destek alın.
Eklenti bağımlılık: Collapse Bootstrap sürümü dahil edilecek eklentisi geçişler gerektirir.
Collapsibles hakkında bir eğitim için bizim okumak Bootstrap Collapse Eğitimi .
The Collapse Plugin Classes
| Sınıf | Açıklama | Örnek |
|---|---|---|
| .collapse | içeriği gizler | Dene |
| .collapse in | içeriği gösterir | Dene |
| .collapsing | bittiği zaman geçiş başladığında eklendi ve çıkarıldı | Dene |
Via data-* Özellikler
Sadece eklemek data-toggle="collapse" otomatik katlanabilir elemanın kontrolünü atamak elemana ve bir veri-hedef. data-target niteliği ile çöküşü uygulamak için bir CSS seçici kabul eder. katlanabilir elemana sınıf çöküşü eklemek emin olun. Eğer açık varsayılan isterseniz, ek sınıf ekleyin.
Örnek
<button class="btn" data-toggle="collapse" data-target="#demo">Collapsible</button>
<div id="demo" class="collapse">
Some text..
</div>
Kendin dene " İpucu: eklemek, katlanabilir kontrole akordeon benzeri grup yönetimini eklemek için data öznitelik data-parent="#selector" .
JavaScript aracılığıyla
el ile etkinleştirme:
$('.collapse').collapse()Collapse Seçenekleri
Seçenekler Veri özellikleri veya JavaScript aracılığıyla geçirilebilir. Veri özelliklerini için, olduğu gibi, veriye seçeneği adını ekler data-parent="" .
| isim | tip | Varsayılan | Açıklama |
|---|---|---|---|
| parent | selector | false | Bu katlanabilir madde gösterildiğinde belirtilen ebeveyn altında Katlanabilir tüm unsurlar kapatılacak. (Geleneksel akordeon davranış benzer - bu panel sınıfı bağlıdır) - aşağıdaki örneğe bakınız |
| toggle | boolean | true | çağırma katlanabilir elemanı açar |
Collapse Yöntemleri
Aşağıdaki tabloda mevcut tüm çöküşü yöntemlerini listeler.
| Yöntem | Açıklama | Dene |
|---|---|---|
| . collapse( options ) | Bir seçenek ile katlanabilir eleman etkinleştirir. Geçerli değerler için yukarıdaki seçeneklere bakın | |
| . collapse("toggle") | katlanabilir eleman açar | Dene |
| . collapse("show") | katlanabilir elemanı gösterir | Dene |
| . collapse("hide") | katlanabilir elemanı gizler | Dene |
Collapse Olaylar
Aşağıdaki tabloda mevcut tüm çöküşü olayları listeler.
| Olay | Açıklama | Dene |
|---|---|---|
| show.bs.collapse | katlanabilir elemanı gösterilmiştir üzereyken oluşur | Dene |
| shown.bs.collapse | katlanabilir elemanı tam gösterildiğinde gerçekleşir (CSS geçişleri tamamladıktan sonra) | Dene |
| hide.bs.collapse | katlanabilir eleman gizli üzeredir oluşur | Dene |
| hidden.bs.collapse | katlanabilir eleman tamamen gizlidir oluşur (CSS geçişleri tamamladıktan sonra) | Dene |
Örnekler
Basit Katlanır
Aşağıdaki örnek, bir düğme başka elemanın genişletme ve daraltma içeriği geçiş yapar:
Örnek
<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> Kendin dene " daraltılabilir Paneli
Aşağıdaki örnek, katlanabilir bir panelini göstermektedir:
Örnek
<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> Kendin dene " Katlanır Liste Grubu
Aşağıdaki içinde bir liste grubu ile katlanabilir bir panelini göstermektedir:
Örnek
<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> Kendin dene " Akordeon
Aşağıdaki örnek, paneli uzanan bileşeninin basit bir akordeon gösterilmektedir:
Not: data-parent nitelik katlanabilir öğenin tek gösterildiğinde belirtilen ebeveyn altındaki tüm katlanabilir elemanları kapalı olacaktır emin olur.
Örnek
<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> Kendin dene " Expand ve Geçiş Simge & Metin kapa
açılması ve katlanabilir içerik kapatırken Aşağıdaki örnek açma / kapama metin ve simge değiştirir:
Örnek
$(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');
});
}); Kendin dene " Yoksa CSS kullanabilirsiniz:
Örnek
/* 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";
} Kendin dene "