Ijaarsi kufuu

Mul'achuu qabiyyee pirojektii kee guutuu keessatti gita muraasaa fi ifteessitoota JaavaScript keenyaan jijjiiri.

Akkaataa itti hojjetu

Ijaarsi JaavaScript kufaa qabiyyee agarsiisuu fi dhoksuuf fayyadama. Qabduu ykn ankuroonni akka kaka'umsaa kanneen elementoota murtaa'oo ati jijjiirtutti kaartaa ta'anitti fayyadamu. Elementii tokko kuffisuun heightgatii isaa ammaa irraa gara 0. Akkaataa CSS sochiiwwan itti qabatu kennameef, elementii paddingirratti fayyadamuu hin dandeessu . .collapseInumaayyuu, gita akka qaama marfata of danda'etti fayyadami.

Fakkeenya

Qaaqa biraa karaa jijjiirama gitaa agarsiisuu fi dhoksuuf qareewwan armaan gadii cuqaasi:

• .collapseqabiyyee dhoksa
• .collapsingyeroo ce’umsaa hojiirra oola
• .collapse.showqabiyyee agarsiisa

data-targetWalumaagalatti, qaree amaloota qabu fayyadamuu ni gorsina . Ija hiikaatiin kan hin gorfamin yoo ta'ellee, walqabsiisa hrefamalli (fi a role="button") waliin fayyadamuu dandeessa. Haala lamaan keessatti, the data-toggle="collapse"ni barbaachisa.

<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">
    Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.
  </div>
</div>

Dalga-galii

Ijaarsi kufaatii akkasumas kufaatii qajeelaa ni deeggara. Bakka .widthkan ce'uuf gita fooyyessaa dabali fi a qaama mucaa battalaa irratti saagi . Sass amala mataa keetii barreessuudhaaf, akkaataa sarara keessaa fayyadamuuf, ykn faayidaa bal'ina keenya fayyadamuuf bilisa ta'i .widthheightwidth

<p>
  <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseWidthExample" aria-expanded="false" aria-controls="collapseWidthExample">
    Toggle width collapse
  </button>
</p>
<div style="min-height: 120px;">
  <div class="collapse width" id="collapseWidthExample">
    <div class="card card-body" style="width: 320px;">
      This is some placeholder content for a horizontal collapse. It's hidden by default and shown when triggered.
    </div>
  </div>
</div>

Target dachaa

A <button>ykn <a>elementoota hedduu agarsiisuu fi dhoksuu danda'a filannoo JQuery amaloota isaa hrefykn keessatti wabeeffachuun. data-targetDachaa <button>ykn <a>elementii agarsiisuu fi dhoksuu danda'u yoo tokkoon tokkoon isaanii amaloota isaanii hrefykn waliin wabeeffatandata-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">
        Some placeholder content for the first collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.
      </div>
    </div>
  </div>
  <div class="col">
    <div class="collapse multi-collapse" id="multiCollapseExample2">
      <div class="card card-body">
        Some placeholder content for the second collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.
      </div>
    </div>
  </div>
</div>

Fakkeenya akkoordiyoonii

Qaama kaardii fayyadamuun , amala kufaatii durtii dheeressuun akkoordiyoon uumuu dandeessa. Akkaataa accordion sirnaan galmaan ga'uuf, .accordionakka marfataatti fayyadamuu kee mirkaneessi.

<div class="accordion" id="accordionExample">
  <div class="card">
    <div class="card-header" id="headingOne">
      <h2 class="mb-0">
        <button class="btn btn-link btn-block text-left" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Collapsible Group Item #1
        </button>
      </h2>
    </div>

    <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
      <div class="card-body">
        Some placeholder content for the first accordion panel. This panel is shown by default, thanks to the <code>.show</code> class.
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="headingTwo">
      <h2 class="mb-0">
        <button class="btn btn-link btn-block text-left collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Collapsible Group Item #2
        </button>
      </h2>
    </div>
    <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
      <div class="card-body">
        Some placeholder content for the second accordion panel. This panel is hidden by default.
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="headingThree">
      <h2 class="mb-0">
        <button class="btn btn-link btn-block text-left collapsed" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
          Collapsible Group Item #3
        </button>
      </h2>
    </div>
    <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
      <div class="card-body">
        And lastly, the placeholder content for the third and final accordion panel. This panel is hidden by default.
      </div>
    </div>
  </div>
</div>

Dhaqqabummaa

aria-expandedQaama too'annoo irratti dabaluu kee mirkaneessi . Amalli kun haala ammaa elementii kufaatii to'annootti hidhamee dubbistoota iskiriinii fi teeknooloojiiwwan gargaarsaa walfakkaatan ifatti dabarsa. Yoo qaamni cufamuu danda'u durtiidhaan cufame, amalli qaama too'annoo irratti gatii aria-expanded="false". Yoo qaama kuffamuu danda'u akka durtii showgita fayyadamuun banamu saagde, aria-expanded="true"bakka isaa too'annoo irratti saagi. Ijaarsiin ofumaan amalli kana too'annoo irratti qaamni kuffamuu danda'u banamuu ykn cufamuu dhabuu irratti hundaa'uun ni jijjiira (karaa JaavaScript, ykn sababni isaas fayyadamaan qaama too'annoo biraa qaama kuffamuu danda'u walfakkaataa waliin hidhame waan kakaasef). Yoo qaamni HTML qaama too'annoo qaree hin taane (fkn, an <a>ykn <div>), amallirole="button"elementii irratti dabalamuu qaba.

Yoo qaamni too'annoo kee qaama cufamuu danda'u tokko irratti xiyyeeffate – jechuunis data-targetamalli gara filannootti agarsiisaa jira ta'e – amalli qaama too'annootti iddabaluu qabda , kan qaama kuffamuu danda'u of keessaa qaba. Dubbistoonni iskiriinii ammayyaa fi teeknooloojiiwwan gargaarsaa walfakkaatan amaloota kana fayyadamuun fayyadamtootaaf karaa gabaabaa dabalataa kallattiin gara elementii kufaatii mataa isaatti akka qajeelan ni kennu.aria-controlsid

Hubadhu hojiirra oolmaan Bootstrap ammaa walqunnamtii kiiboordii adda addaa kan Qajeelfama Shaakala Barreessuu ARIA keessatti ibsame akkaataa akkoordiyoon hin uwwisu - kana ofuma keetii JaavaScript amala waliin hammachuu si barbaachisa.

Fayyadama

Ijaarsiin kufaatii gita muraasa fayyadama kaasuun ulfaataa to'achuuf:

• .collapseqabiyyee dhoksa
• .collapse.showqabiyyee agarsiisa
• .collapsingyeroo ce'umsi jalqabu dabalama, yeroo xumuramu immoo ni haqama

Kutaawwan kunniin _transitions.scss.

Karaa amaloota deetaa

Too'annoo elementoota tokkoo fi isaa ol ofumaan ramaduuf elementicha irratti data-toggle="collapse"fi a qofa dabaluu qofa . data-targetAmalli data-targetfilannoo CSS kufaatii itti hojii irra oolchuuf fudhata. collapseGitaa gara qaama cufamuu danda'utti dabaluu kee mirkaneessi . Yoo durtii akka banamu barbaadde, gita dabalataa dabali show.

Bulchiinsa garee akka akkoordiyoonii gara naannoo cufamuu danda'utti dabaluuf, amalli deetaa dabali data-parent="#selector". Kana hojiidhaan ilaaluuf demoo ilaalaa.

Karaa JaavaScript

Harkaan dandeessisi:

$('.collapse').collapse()

Filannoowwan

Filannoon karaa amaloota deetaa ykn JaavaScript darbuu danda'u. Amaloota deetaatiif, maqaa filannoo gara data-, akkuma keessatti dabali data-parent="".

Malawwan

.collapse(options)

Qabiyyee kee akka qaama cufamuu danda'utti hojii irra oolcha. Filannoo filannoo tokko fudhata object.

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

.collapse('toggle')

Qaama kuffamuu danda'u gara agarsiifame ykn dhokfameetti jijjiira. Qabeentiin kuffamuu danda'u qabatamaan osoo hin agarsiifamiin ykn hin dhokatiin dura gara waamichaatti deebi'a (jechuunis osoo taatee shown.bs.collapseykn hin uumamin dura hidden.bs.collapse).

.collapse('show')

Qabeentaa kuffamuu danda'u agarsiisa. Qaamni kuffamuu danda'u qabatamaan osoo hin agarsiifamiin dura gara waamichaatti deebi'a (jechuunis shown.bs.collapsetaatee osoo hin uumamin dura).

.collapse('hide')

Qabeentaa kuffamuu danda'u dhoksa. Qabeentiin kuffamuu danda'u qabatamaan osoo hin dhokatiin dura (jechuunis hidden.bs.collapsetaatee osoo hin uumamin dura) gara waamichaatti deebi'a.

.collapse('dispose')

Kufaatii elementii tokkoo ni balleessa.

Taateewwan

Gitni kufaatii Bootstrap taateewwan muraasa gara dalagaa kufaatiitti hooking gochuuf saaxila.

$('#myCollapsible').on('hidden.bs.collapse', function () {
  // do something...
})