Фурӯпошӣ
Намоиши мундариҷаро дар лоиҳаи худ бо чанд синф ва плагинҳои JavaScript-и мо иваз кунед.
Барои нишон додан ва пинҳон кардани унсури дигар тавассути тағироти синф тугмаҳои зерро клик кунед:
.collapseмундариҷаро пинҳон мекунад.collapsingхангоми гузариш ба кор бурда мешавад.collapse.showмазмун нишон медихад
Шумо метавонед пайвандеро бо hrefатрибут ё тугмаи дорои data-targetатрибут истифода баред. Дар ҳарду ҳолат, data-toggle="collapse"зарур аст.
<p>
<a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
Link with href
</a>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
Button with data-target
</button>
</p>
<div class="collapse" id="collapseExample">
<div class="card card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
</div>
</div>A <button>ё <a>метавонад унсурҳои сершуморро бо истинод ба онҳо бо селектори JQuery дар атрибут hrefё атрибут нишон диҳад ва пинҳон кунад data-target. Якчанд <button>ё <a>метавонад як унсурро нишон диҳад ва пинҳон кунад, агар онҳо ҳар кадоми онҳо ба он бо аттрибут hrefё атрибут муроҷиат кунандdata-target
<p>
<a class="btn btn-primary" data-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Toggle first element</a>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Toggle second element</button>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target=".multi-collapse" aria-expanded="false" aria-controls="multiCollapseExample1 multiCollapseExample2">Toggle both elements</button>
</p>
<div class="row">
<div class="col">
<div class="collapse multi-collapse" id="multiCollapseExample1">
<div class="card card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
</div>
</div>
</div>
<div class="col">
<div class="collapse multi-collapse" id="multiCollapseExample2">
<div class="card card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
</div>
</div>
</div>
</div>Бо истифода аз ҷузъи корт , шумо метавонед рафтори пешфарзро барои сохтани аккордеон васеъ кунед.
<div id="accordion">
<div class="card">
<div class="card-header" id="headingOne">
<h5 class="mb-0">
<button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Collapsible Group Item #1
</button>
</h5>
</div>
<div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
<div class="card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingTwo">
<h5 class="mb-0">
<button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
Collapsible Group Item #2
</button>
</h5>
</div>
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion">
<div class="card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingThree">
<h5 class="mb-0">
<button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
Collapsible Group Item #3
</button>
</h5>
</div>
<div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordion">
<div class="card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
</div>Боварӣ ҳосил кунед aria-expanded, ки ба элементи назорат илова кунед. Ин атрибут ба таври возеҳ ҳолати кунунии унсури пӯшидашавандаро, ки ба идора вобаста аст, ба хонандагони экран ва технологияҳои ёрирасони шабеҳ мерасонад. Агар унсури ҷамъшаванда ба таври нобаёнӣ баста бошад, атрибут дар элементи назорат бояд арзиши aria-expanded="false". Агар шумо унсури ҷамъшавандаро бо нобаёнӣ бо истифода аз showсинф муқаррар aria-expanded="true"карда бошед, ба ҷои он назоратро насб кунед. Васлкунак ба таври худкор ин аттрибутиро дар идоракунӣ вобаста ба кушода ё баста шудани унсури ҷамъшаванда иваз мекунад (тавассути JavaScript ё аз сабаби он ки корбар як унсури дигари идоракуниро ба ҳамон унсури colapsbile пайваст кардааст). Агар элементи HTML-и элементи идоракунӣ тугма набошад (масалан, <a>ё <div>), аттрибутrole="button"бояд ба элемент илова карда шавад.
Агар элементи идоракунии шумо як унсури ҷамъшавандаро ҳадаф қарор диҳад, яъне data-targetатрибут ба idселектор ишора кунад - шумо бояд aria-controlsатрибутро ба унсури идоракунӣ, ки дорои унсури пӯшидашаванда аст, илова кунед id. Хонандагони экрани муосир ва технологияҳои ёрирасони шабеҳ аз ин атрибут истифода мебаранд, то ба корбарон миёнабурҳои иловагӣ фароҳам оранд, то мустақиман ба худи унсури пӯшидашаванда ҳаракат кунанд.
Дар хотир доред, ки татбиқи ҷории Bootstrap амалҳои гуногуни клавиатураро, ки дар шакли аккордеони WAI-ARIA Authoring Practices 1.1 тавсиф шудааст, фаро намегирад - шумо бояд онҳоро худатон бо JavaScript фармоишӣ дохил кунед.
Васлкунаки пошхӯрӣ чанд синфро барои идора кардани борбардории вазнин истифода мебарад:
.collapseмундариҷаро пинҳон мекунад.collapse.showмазмунро нишон медихад.collapsingҳангоми оғози гузариш илова карда мешавад ва ҳангоми ба охир расиданаш хориҷ карда мешавад
Ин синфҳоро дар _transitions.scss.
data-toggle="collapse"Барои ба таври худкор таъин кардани назорати як ё якчанд унсурҳои пӯшидашаванда танҳо ва data-targetба элемент илова кунед . Аттрибут data-targetинтихобкунандаи CSS-ро барои татбиқи шикастхӯрӣ қабул мекунад. Боварӣ ҳосил кунед, ки синфро collapseба унсури пӯшидашаванда илова кунед. Агар шумо хоҳед, ки он пешфарз кушода шавад, синфи иловагиро илова кунед show.
Барои илова кардани идоракунии гурӯҳи ба аккордеон монанд ба минтақаи ҷамъшаванда, аттрибутии маълумотро илова кунед data-parent="#selector". Барои дидани ин амал ба намоиш муроҷиат кунед.
Ба таври дастӣ бо:
$('.collapse').collapse()Имконотро тавассути атрибутҳои додаҳо ё JavaScript интиқол додан мумкин аст. Барои атрибутҳои додаҳо, номи опсияро ба data-монанди замима кунед data-parent="".
| Ном | Навъи | Пешфарз | Тавсифи |
|---|---|---|---|
| падару модар | интихобкунанда | объекти jQuery | Унсури DOM | дурӯғ | Агар волидайн таъмин карда шуда бошад, пас ҳамаи унсурҳои ҷамъшаванда дар зери волидайни нишондодашуда ҳангоми нишон додани ин ашёи ҷамъшаванда баста мешаванд. (ба рафтори анъанавии аккордеон монанд - ин аз cardсинф вобаста аст). Аттрибут бояд дар майдони мавриди ҳадаф ҷойгир карда шавад. |
| иваз кардан | булӣ | дуруст | Элементи ҷамъшавандаро ҳангоми даъват иваз мекунад |
Усулҳо ва гузаришҳои асинхронӣ
Ҳама усулҳои API асинхронӣ мебошанд ва гузаришро оғоз мекунанд. Онҳо баробари оғоз шудани гузариш ба зангзананда бармегарданд, аммо пеш аз анҷоми он . Илова бар ин, даъвати методӣ ба ҷузъи гузариш нодида гирифта мешавад.
Барои маълумоти бештар ба ҳуҷҷатҳои JavaScript-и мо нигаред.
Мундариҷаи шуморо ҳамчун унсури пӯшидашаванда фаъол мекунад. Вариантҳои ихтиёриро қабул мекунад object.
$('#myCollapsible').collapse({
toggle: false
})Элементи ҷамъшавандаро ба нишон ё пинҳон иваз мекунад. Пеш аз он ки унсури ҷамъшаванда воқеан нишон дода ё пинҳон карда шавад (яъне пеш аз рух додани ҳодиса shown.bs.collapseё ҳодиса) ба зангзан бармегардад.hidden.bs.collapse
Элементи ҷамъшавандаро нишон медиҳад. Ба зангзананда пеш аз намоиш додани унсури ҷамъшаванда бармегардад (яъне пеш аз shown.bs.collapseрух додани ҳодиса).
Элементи пӯшидашавандаро пинҳон мекунад. Ба зангзананда пеш аз он ки унсури ҷамъшаванда воқеан пинҳон карда шавад (яъне пеш аз hidden.bs.collapseрух додани ҳодиса) бармегардад.
Фурӯпошии элементро нест мекунад.
Синфи пошхӯрии Bootstrap чанд ҳодисаро барои пайвастшавӣ ба функсияи харобшавӣ фош мекунад.
| Навъи ҳодиса | Тавсифи |
|---|---|
| show.bs.colapse | Ин ҳодиса фавран ҳангоми showдаъват кардани усули инстансия оғоз меёбад. |
| нишон дода шудааст | Ин ҳодиса вақте оғоз мешавад, ки унсури шикаста ба корбар намоён карда шуд (то ба анҷом расидани гузаришҳои CSS интизор мешавад). |
| пинҳон кардан | Ин ҳодиса фавран вақте ки hideусул даъват шудааст, барканор карда мешавад. |
| пинҳон.б.хуриш | Ин ҳодиса вақте оғоз мешавад, ки унсури шикаста аз корбар пинҳон карда шудааст (то ба анҷом расидани гузаришҳои CSS интизор мешавад). |
$('#myCollapsible').on('hidden.bs.collapse', function () {
// do something…
})