Ka bin
Kɔnɔkow yecogo caman wuli i ka porozɛ kɔnɔ ni kalan damadɔw ye ani an ka JavaScript fɛnw.
JavaScript plugin min bɛ wele ko collapse, o bɛ kɛ ka kɔnɔkow jira ani k’u dogo. Butɔnw walima ankɔriw bɛ Kɛ i n’a fɔ fɛnɲɛnɛmaw minnu bɛ karti Kɛ fɛn kɛrɛnkɛrɛnnenw na i bɛ minnu Toggle. Ni i ye fɛn dɔ Dabɔ, o bɛna ɲɛnamaya Kɛ ka heightBɔ a nafa la sisan ka Taa 0. Ni an y’a jateminɛ ko CSS bɛ animationw ɲɛnabɔ cogo min na, i tɛ se ka baara paddingkɛ ni .collapseelement dɔ ye. O nɔ na, baara kɛ ni kalasi ye i n’a fɔ fɛn min bɛ kɛ ka fɛnw siri ɲɔgɔn na.
Butɔn minnu bɛ duguma, olu digi walasa ka fɛn wɛrɛ jira ani k’a dogo kalanso caman yeli fɛ:
.collapsekɔnɔkow bɛ dogo.collapsingbɛ waleya fɛn caman tigɛli waatiw la.collapse.showbɛ kɔnɔkow jira
Aw bɛ se ka baara kɛ ni jɛgɛnsira ye ni o fɛn hrefye, walima ni butɔni ye min bɛ ni o fɛn data-targetye. O ko fila bɛɛ la, a data-toggle="collapse"wajibiyalen don.
<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>walima <a>bɛ se ka fɛn caman jira ani k’u dogo ni u ɲɛfɔli ye ni JQuery sugandili ye a hrefwalima a ka data-targetfɛnsɛbɛnni na. Multiple <button>walima <a>bɛ Se ka fɛn dɔ Jira ani k’a dogo n’u kelen-kelen bɛɛ y’a Lajɛ n’u ka hrefwalima data-targetattribut ye
<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>Ni aw bɛ baara kɛ ni karti yɔrɔ ye, aw bɛ se ka collapse behavior default janya walasa ka accordéon dɔ dilan.
<div class="accordion" id="accordionExample">
<div class="card">
<div class="card-header" id="headingOne">
<h5 class="mb-0">
<button class="btn btn-link" type="button" 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="#accordionExample">
<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" type="button" 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="#accordionExample">
<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" type="button" 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="#accordionExample">
<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>Aw ye aw jija ka dɔ fara aria-expandeda kunbɛncogo kan. O jogo in bɛ fɛn min bɛ se ka bin, o min sirilen bɛ kunnafoni-di-minɛn na, o cogoya jira k’a jɛya ka ɲɛsin ɛkran kalanbagaw ma ani o ɲɔgɔnna dɛmɛni fɛɛrɛw. Ni fɛn min bɛ se ka da ɲɔgɔn kan, o datugulen don ka kɛɲɛ ni a daminɛ ye, fɛn min bɛ kunnafonisɛbɛn kan, o ka kan ka kɛ ni nafa ye aria-expanded="false". N'i ye 'fɛn min bɛ Se ka Dabɔ, o Dabɔ ka Dabɔ ka Kɛɲɛ ni showkalasi ye, i bɛ Segin aria-expanded="true"'kɔnɔna na o nɔ na. Plugin bɛna o fɛn in Yɛlɛma a yɛrɛma kɔrɔsili kan ka da a kan ni fɛn min bɛ Se ka Dabɔ o dabɔra walima ni a Dabɔra (JavaScript fɛ, walima k’a sababu Kɛ baarakɛla ye kunnafoni-falen-falen wɛrɛ Daminɛ fana min sirilen bɛ o fɛn kelen in na). Ni control element ka HTML element tɛ butɔni ye (misali la, an <a>walima <div>), attributrole="button"ka kan ka fara elementi kan.
Ni i ka kunnafoni-falen-falen-yɔrɔ bɛ ka fɛn kelen de Laɲini min bɛ Se ka Dabɔ – o kɔrɔ ye ko data-targetfɛnɲɛnɛma bɛ ka idsugandilikɛla dɔ Jira – i ka kan ka aria-controlsfɛnɲɛnɛma Fàra kunnafoni-falen-falen-yɔrɔ kan, min kɔnɔ fɛn min bɛ idSe ka Dabɔ. Bi ɛkran kalanbagaw ni o ɲɔgɔnna dɛmɛnanw bɛ baara kɛ ni o fɛn in ye walasa ka sira surun wɛrɛw di baarakɛlaw ma walasa u ka se ka taa yɔrɔ la min bɛ se ka dabɔ a yɛrɛ la.
A kɔlɔsi ko Bootstrap ka baarakɛcogo sisan tɛ klaviyeti ɲɔgɔndan suguyaw ɲɛfɔ minnu ɲɛfɔlen don WAI-ARIA Authoring Practices 1.1 accordion pattern kɔnɔ - i yɛrɛ bɛna a ɲini ka ninnu don a kɔnɔ ni JavaScript ladamulen ye.
Collapse plugin bɛ baara Kɛ ni kala damadɔ ye walasa ka girinmanw kɔrɔtacogo ɲɛnabɔ:
.collapsebɛ kɔnɔkow dogo.collapse.showbɛ kɔnɔkow jira.collapsingbɛ fara a kan ni tɛmɛsira daminɛna, ka bɔ ni a banna
O kalanw bɛ se ka sɔrɔ _transitions.scss.
Dɔrɔn ka fara data-toggle="collapse"ani a data-targetkan fɛn in na walasa ka fɛn kelen walima fɛn caman minnu bɛ se ka da ɲɔgɔn kan, olu ka kɔrɔsili di otomatiki la. Attribut data-targetbɛ sɔn CSS sugandili ma walasa ka collapse (dakun) in waleya. Aw ye aw jija ka kalasi fara fɛn dɔ kan min bɛ collapsese ka wuli. N'i b'a fɛ a ka da wuli, i ka kalansen wɛrɛ fara a kan show.
Walasa ka kulu ɲɛnabɔli min bɛ i n’a fɔ accordion fara a kan yɔrɔ la min bɛ se ka da, i ka data attribute fara a kan data-parent="#selector". Aw ye demo lajɛ walasa ka nin ye wale la.
A bɛ se ka baara kɛ ni bolo ye ni:
$('.collapse').collapse()Sugandili bɛ se ka tɛmɛ data attributes walima JavaScript fɛ. Donanw cogoyaw kama, aw bɛ sugandi tɔgɔ fara data-, i n’a fɔ a bɛ cogo min na data-parent="".
| Tɔ̀gɔ | Ka sɛbɛen masin na | Fɔlɔ | Cogojirali |
|---|---|---|---|
| bangebaga | sugandilikɛla | jQuery fɛn | DOM yɔrɔ | nkalon | Ni bangebaga dira, o tuma na, fɛn minnu bɛ se ka dabɔ bangebaga kofɔlen jukɔrɔ, olu bɛɛ bɛna datugu ni nin fɛn min bɛ se ka da, o jirala. (a bɛ tali kɛ laadala acordion kɛcogo la - o bɛ bɔ cardkalasi de la). Attribut ka kan ka sigi laɲini collapsible yɔrɔ kan. |
| toggle (toggle) kɛ | boolean ye | sɛbɛ | A bɛ fɛn min bɛ Se ka Dabɔ, o bɛ Yɛlɛma weleli kan |
Fɛɛrɛ minnu tɛ kelen ye ani fɛn caman tigɛli
API fɛɛrɛw bɛɛ ye asynchrone ye ani ka tɛmɛsira dɔ daminɛ . u bɛ segin welebaga ma ni wuli daminɛna dɔrɔn nka sanni a ka ban . Ka fara o kan, fɛɛrɛ weleli min bɛ kɛ tɛmɛsira yɔrɔ dɔ kan, o bɛna jate .
Aw ye an ka JavaScript sɛbɛnw lajɛ walasa ka kunnafoni wɛrɛw sɔrɔ.
A bɛ i ka kɔnɔkow baara i n’a fɔ fɛn min bɛ se ka da ɲɔgɔn kan. A bɛ sɔn sugandiliw ma minnu bɛ se ka kɛ object.
$('#myCollapsible').collapse({
toggle: false
})A bɛ fɛn dɔ wuli ka bɔ a nɔ na ka taa jira walima ka dogo. A bɛ Segin welebaga ma sani fɛn min bɛ Se ka Dabɔ o ka Jira tiɲɛ na walima ka dogo (o kɔrɔ ye ko sanni shown.bs.collapsewalima hidden.bs.collapseko kɛlen ka Kɛ).
A bɛ fɛn dɔ jira min bɛ se ka wuli. A bɛ Segin welebaga ma sani fɛn min bɛ Se ka Dabɔ o ka Jira tiɲɛ na (o kɔrɔ ye ko sani ko shown.bs.collapsein ka Kɛ).
A bɛ fɛn dɔ dogo min bɛ Se ka Dabɔ. A bɛ Segin welebaga ma sani fɛn min bɛ Se ka Dabɔ o ka dogo tiɲɛ na (o kɔrɔ ye ko sani ko hidden.bs.collapsein ka Kɛ).
A bɛ fɛn dɔ ka binkanni tiɲɛ.
Bootstrap ka collapse class bɛ ko damadɔw bɔ kɛnɛ kan ka ɲɛsin hooking into collapse functionality ma.
| Ko kɛlen suguya | Cogojirali |
|---|---|
| jira.bs.ka bɔgɔbɔgɔ | O ko in bɛ tasuma Bɔ o yɔrɔnin bɛɛ ni showmisali fɛɛrɛ Weelera. |
| jiralen.bs.collapse ye | O ko in bɛ Fɔ ni fɛn dɔ Dònna 'kɔnɔ min bɛ Ye baarakɛla fɛ (a bɛna CSS 'tɛmɛsiraw makɔnɔ u ka ban). |
| dogo.bs.dafalen | O ko in bɛ Fɔ o yɔrɔnin bɛɛ ni hidefɛɛrɛ in Weelela. |
| dogolen.bs.collapse ye | O ko in bɛ Fɔ ni fɛn dɔ dogolen dòn baarakɛla la (a bɛna CSS 'tɛmɛsiraw makɔnɔ u ka ban). |
$('#myCollapsible').on('hidden.bs.collapse', function () {
// do something…
})