Source

Burbur

Ku beddel muuqalka nuxurka mashruucaaga oo dhan dhowr fasal iyo pluginsyadayada JavaScript.

Sida ay u shaqeyso

Burburka borotiinka JavaScript waxaa loo isticmaalaa si loo muujiyo oo loo qariyo waxa ku jira. Badhamada ama barroosinnada waxaa loo isticmaalaa kiciyeyaasha kuwaas oo lagu sawiray walxo gaar ah oo aad beddesho. Burburinta curiyaha waxay ka dhaqaajin doontaa heightqiimaha uu hadda joogo ilaa 0. Marka la eego sida CSS u maamulo animations, ma isticmaali kartid paddingshay .collapse. Taa beddelkeeda, u isticmaal fasalka sidii curiye duubid oo madaxbannaan.

Tusaale

Guji badhamada hoose si aad u muujiso oo aad u qariso shay kale adigoo isticmaalaya isbeddelada fasalka:

  • .collapseqariyaa waxa ku jira
  • .collapsingwaxaa lagu dabaqaa xilliga kala-guurka
  • .collapse.showwaxay muujinaysaa nuxurka

Waxaad isticmaali kartaa xiriiriye leh hrefsifada, ama badhan sifada leh data-target. Labada xaaladoodba, data-toggle="collapse"waa loo baahan yahay.

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. 
<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>

Bartilmaameedyo badan

A <button>ama <a>waxay tusi kartaa oo qarin kartaa waxyaalo badan adoo tixraacaya xulashada JQuery ee ku jira hrefama sifada data-target. Dhawr <button>ama <a>muujin kara oo qarin kara shay haddii mid kastaa u tixraaco tiisa hrefama data-targetsifada

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.
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. 
<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>

Tusaale ahaan Accordion

Isticmaalka qaybta kaadhka , waxaad kordhin kartaa dabeecadda burburka si aad u abuurto accordion.

Anim pariatur cliche reprehenderit, anim eiusmod nolosha sare eedeeymo Terry Richardson iyo squid. 3 xafiis dayax yeey aute, non cupidatat skateboard dolor brunch. Gaariga cuntada quinoa nesciunt laborum eiusmod. Brunch 3 yeey dayax tempor, sunt aliqua waxay dul saartay shimbir squid kafee hal asal ah nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, biirka farsamada gacanta wes anderson cred nesciunt sapiente ea proident. Ad vegan marka laga reebo hiliblaha ku xigeenka lomo. Leggings occaecat beer-farshaxan beer-la-miis, denim cayriin bilicsanaanta synth nesciunt malaha ma aadan maqlin iyaga oo ku eedeeyay VHS waarta.
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.
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 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>

Helitaanka

Hubi inaad ku darto aria-expandedqaybta xakamaynta. Sifadani waxay si cad u gudbinaysaa xaaladda hadda jirta ee walxaha la dumin karo ee ku xidhan xakamaynta si loo eego akhristayaasha iyo tignoolajiyada caawimada ee la midka ah. Haddii curiyaha dumaya uu si caadi ah u xidhan yahay, sifada ku jirta curiyaha kontoroolka waa inuu lahaadaa qiime aria-expanded="false". Haddii aad dejisay curiyaha dumin kara inuu si caadi ah u furmo adoo isticmaalaya showfasalka, beddel aria-expanded="true"kontaroolada. Plugin-ku si toos ah ayuu u rogi doonaa sifadan kontoroolka iyadoo lagu saleynayo in curiyaha burburay la furay ama la xiray iyo in kale (iyada oo loo sii marayo JavaScript, ama sababtoo ah isticmaaluhu wuxuu kiciyay curiye kale oo kontorool ah oo sidoo kale ku xidhan isla curiyaha burburka). Haddii curiyaha kontoroolka HTML uusan ahayn badhan (tusaale, an <a>ama <div>), sifadarole="button"waa in lagu daraa curiyaha.

Haddii curiyahaaga koontaroolku uu beegsanayo hal unug oo dumin kara - tusaale ahaan data-targetsifadu waxay tilmaamaysaa iddoore - waa inaad ku darto aria-controlssifada curiyaha kontoroolka, oo ka kooban idcuriyaha burburi kara. Akhristayaasha shaashada casriga ah iyo tignoolajiyada la midka ah ee caawinta ayaa isticmaala sifadan si ay u siiyaan isticmaalayaasha habab gaagaaban oo dheeri ah si ay si toos ah ugu socdaan walxaha burburi kara laftiisa.

Ogsoonow in hirgelinta hadda ee Bootstrap aysan daboolin isdhexgalka kala duwan ee kiiboodhka ee lagu qeexay WAI-ARIA Wax-qorista Dhaqanka 1.1 hannaanka accordion - waxaad u baahan doontaa inaad kuwan ku darto JavaScript-ka caadiga ah.

Isticmaalka

Plugin-ka burburku wuxuu isticmaalaa dhawr fasal si uu u maareeyo qaadista culus:

  • .collapseqariya waxa ku jira
  • .collapse.showwaxay muujinaysaa nuxurka
  • .collapsingwaxa lagu daraa marka kala guurku bilaabmo, lagana saaro marka uu dhamaado

Fasaladaan waxaa laga heli karaa _transitions.scss.

Iyada oo loo marayo sifooyinka xogta

Kaliya ku dar data-toggle="collapse"oo a data-targetcuriyaha si si toos ah loogu qoondeeyo kantaroolka hal ama in ka badan oo walxo burburi kara. Sifadu data-targetwaxay aqbashaa xulashada CSS si loogu dabaqo burburka. U hubso inaad fasalka ku darto collapsewalxaha duminaya. Haddii aad rabto in uu furmo, ku dar fasalka dheeraadka ah show.

Si loogu daro maamulka kooxda accordion u eg aag burburi kara, ku dar xogta sifada data-parent="#selector". Tixraac demo si aad u aragto tan ficil ahaan

Iyadoo loo marayo JavaScript

Ku oggolow gacanta:

$('.collapse').collapse()

Ikhtiyaarada

Ikhtiyaarada waxaa lagu gudbi karaa sifada xogta ama JavaScript. Sifooyinka xogta, ku dheji magaca ikhtiyaarka data-, sida ku jira data-parent="".

Magaca Nooca Asal ahaan Sharaxaada
waalid xule | shayga jQuery | Qaybta DOM been ah Haddii waalid la bixiyo, markaas dhammaan walxaha burburi kara ee hoos yimaada waalidka la cayimay waa la xidhi doonaa marka shaygan dumin kara la muujiyo. (oo la mid ah hab-dhaqanka wadajirka ah ee dhaqanka - tani waxay ku xiran tahay cardfasalka). Sifada waa in lagu dejiyaa aagga la beegsanayo ee burburi kara.
leexleex booliyan run Wuxuu beddelaa cunsurka burburi kara marka la codsado

Hababka

Hababka iyo kala-guurka aan isku midka ahayn

Dhammaan hababka API waa isku mid waxayna bilaabaan kala-guurka . Waxay ku soo noqdaan qofka soo wacaya isla markii uu bilaabmo kala-guurka laakiin ka hor inta uusan dhammaan . Intaa waxaa dheer, hab ku baaqaya in qayb ka beddelka waa la iska indhatiray .

Ka eeg dukumeentiyada JavaScript wixii macluumaad dheeraad ah

.collapse(options)

Waxay u hawlgelisaa macluumaadkaaga sidii shay burburi kara. Aqbala ikhtiyaarka ikhtiyaariga ah object.

$('#myCollapsible').collapse({
  toggle: false
})

.collapse('toggle')

U rogaa shay burburi kara si loo muujiyo ama loo qariyo. Ku soo noqda qofka soo wacay ka hor inta aan la muujin ama la qarin walxaha burburi kara (tusaale ka hor intaanay dhacdada shown.bs.collapseama hidden.bs.collapsedhacdada dhicin).

.collapse('show')

Wuxuu muujiyaa shay burburi kara. Ku soo noqda qofka soo wacaya ka hor inta aan dhab ahaantii la muujin walxaha burburi kara (tusaale ka hor intaanay shown.bs.collapseshilku dhicin).

.collapse('hide')

Qariyaa shay burburi kara. Ku soo noqda qofka soo wacay ka hor inta aan la qarin walxaha burburi kara (tusaale ka hor intaanay hidden.bs.collapseshilku dhicin).

.collapse('dispose')

Waxay baabi'isaa burburka curiye.

Dhacdooyinka

Fasalka burburka Bootstrap wuxuu daaha ka qaadaa dhowr dhacdo oo loogu talagalay ku xirida shaqeynta burburka.

Nooca Dhacdada Sharaxaada
show.bs.burbur Dhacdadani waxay isla markaaba gubataa marka showhabka tusaalaha la yiraahdo.
la tusay.bs.burbur Dhacdadan waxa la eryaa marka curiyaha burburay loo muujiyo isticmaalaha (waxay sugi doontaa inta CSS ka wareejinta la dhamaystirayo).
qari.bs.burbur Dhacdadan ayaa isla markiiba la eryaa marka hidehabka loo waco.
qarsoon.bs.burbur Dhacdadan waxa la eryaa marka walxaha burburay laga qariyay isticmaalaha (waxa ay sugi doontaa inta uu CSS ka gudbayo dhamaystirka). 
$('#myCollapsible').on('hidden.bs.collapse', function () {
  // do something…
})