Source

Kollass

Aqleb il-viżibilità tal-kontenut fil-proġett tiegħek bi ftit klassijiet u l-plugins JavaScript tagħna.

Kif taħdem

Il-plugin JavaScript kollass jintuża biex juri u jaħbi l-kontenut. Buttuni jew ankri jintużaw bħala triggers li huma mmappjati għal elementi speċifiċi li taqleb. Il-kollass ta' element se janima l- heightmill-valur attwali tiegħu għal 0. Minħabba kif is-CSS jimmaniġġja l-animazzjonijiet, ma tistax tuża paddingfuq .collapseelement. Minflok, uża l-klassi bħala element indipendenti tat-tgeżwir.

Eżempju

Ikklikkja l-buttuni hawn taħt biex turi u taħbi element ieħor permezz ta' bidliet fil-klassi:

  • .collapsejaħbi l-kontenut
  • .collapsinghija applikata waqt transizzjonijiet
  • .collapse.showjuri kontenut

Tista' tuża link bl- hrefattribut, jew buttuna bl- data-targetattribut. Fiż-żewġ każijiet, data-toggle="collapse"huwa meħtieġ.

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>

Miri multipli

A <button>jew <a>jista 'juri u jaħbi elementi multipli billi jirreferenzjahom b'selettur JQuery fl- attribut tiegħu hrefjew . data-targetMultipli <button>jew <a>jistgħu juru u jaħbu element jekk kull wieħed jirreferu għalih bl- attribut hrefjew tagħhomdata-target

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>

Eżempju tal-akkordju

Bl-użu tal-komponent tal- karta , tista 'testendi l-imġieba tal-kollass default biex toħloq accordion.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad klamari. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 lupu qamar tempor, sunt aliqua poġġi għasfur fuqu klamari ta 'oriġini waħda kafè nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur biċċier viċi lomo. Leggings occaecat craft birra farm-to-table, raw denim aesthetic synth nesciunt inti probabilment ma smajtx minnhom 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.
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>

Aċċessibilità

Kun żgur li żżid aria-expandedmal-element ta 'kontroll. Dan l-attribut iwassal b'mod espliċitu l-istat attwali tal-element kollassabbli marbut mal-kontroll lill-qarrejja tal-iskrin u teknoloġiji assistivi simili. Jekk l-element kollassabbli jingħalaq awtomatikament, l-attribut fuq l-element ta 'kontroll għandu jkollu valur ta' aria-expanded="false". Jekk issettjajt l-element kollassabbli biex ikun miftuħ awtomatikament billi tuża l- showklassi, issettja aria-expanded="true"fuq il-kontroll minflok. Il-plugin awtomatikament ibiddel dan l-attribut fuq il-kontroll ibbażat fuq jekk l-element kollassabbli infetaħ jew ingħalaqx jew le (permezz ta' JavaScript, jew minħabba li l-utent qajjem element ta' kontroll ieħor marbut ukoll mal-istess element collapsbile). Jekk l-element HTML tal-element ta' kontroll mhuwiex buttuna (eż., <a>jew <div>), l-attributrole="button"għandhom jiġu miżjuda mal-element.

Jekk l-element ta' kontroll tiegħek qed jimmira għal element wieħed li jista' jiġġarraf – jiġifieri l- data-targetattribut qed jindika idselettur – għandek iżżid l- aria-controlsattribut ma' l-element ta' kontroll, li jkun fih l id-element li jista' jiġġarraf. Screen readers moderni u teknoloġiji ta' assistenza simili jagħmlu użu minn dan l-attribut biex jipprovdu lill-utenti b'shortcuts addizzjonali biex jinnavigaw direttament lejn l-element kollassabbli innifsu.

Innota li l-implimentazzjoni attwali ta 'Bootstrap ma tkoprix l-interazzjonijiet varji tat-tastiera deskritti fil- mudell tal-accordion WAI-ARIA Authoring Practices 1.1 - ser ikollok bżonn tinkludi dawn lilek innifsek b'JavaScript personalizzat.

Użu

Il-plugin tal-kollass juża ftit klassijiet biex jimmaniġġja l-irfigħ tqil:

  • .collapsejaħbi l-kontenut
  • .collapse.showjuri l-kontenut
  • .collapsingtiżdied meta tibda t-tranżizzjoni, u titneħħa meta tispiċċa

Dawn il-klassijiet jistgħu jinstabu fi _transitions.scss.

Via attributi tad-data

Żid biss data-toggle="collapse"u a data-targetmal-element biex awtomatikament tassenja l-kontroll ta 'element kollassabbli wieħed jew aktar. L- data-targetattribut jaċċetta selettur CSS biex japplika l-kollass għalih. Kun żgur li żżid il-klassi collapsemal-element kollassabbli. Jekk tixtieq li tiftaħ awtomatikament, żid il-klassi addizzjonali show.

Biex iżżid ġestjoni tal-gruppi bħal accordion f'żona li tista 'tiġġarraf, żid l-attribut tad-dejta data-parent="#selector". Irreferi għad-demo biex tara dan fl-azzjoni.

Via JavaScript

Ippermetti manwalment ma':

$('.collapse').collapse()

Għażliet

L-għażliet jistgħu jiġu mgħoddija permezz ta' attributi tad-dejta jew JavaScript. Għal attributi tad-dejta, ehmeż l-isem tal-għażla ma' data-, bħal f' data-parent="".

Isem Tip Default Deskrizzjoni
ġenitur selettur | Oġġett jQuery | Element DOM falza Jekk jiġi pprovdut ġenitur, allura l-elementi kollha li jistgħu jiġġarfu taħt il-ġenitur speċifikat jingħalqu meta jintwera dan l-oġġett kollassabbli. (simili għall-imġieba tradizzjonali tal-accordion - dan jiddependi fuq il- cardklassi). L-attribut għandu jiġi stabbilit fuq iż-żona mira kollassabbli.
toggle boolean veru Jiddawwar l-element kollassabbli fuq l-invokazzjoni

Metodi

Metodi asinkroniċi u tranżizzjonijiet

Il-metodi kollha tal-API huma asinkroniċi u jibdew transizzjoni . Jirritornaw għand min iċempel hekk kif tinbeda t-tranżizzjoni iżda qabel ma tispiċċa . Barra minn hekk, sejħa ta' metodu fuq komponent ta' tranżizzjoni se tiġi injorata .

Ara d-dokumentazzjoni JavaScript tagħna għal aktar informazzjoni.

.collapse(options)

Jattiva l-kontenut tiegħek bħala element kollassabbli. Jaċċetta għażliet fakultattivi object.

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

.collapse('toggle')

Jitbiddel element kollassabbli biex jintwera jew moħbi. Jirritorna lil min iċempel qabel ma l-element kollassabbli fil-fatt ġie muri jew moħbi (jiġifieri qabel ma jseħħ l-avveniment shown.bs.collapsejew ).hidden.bs.collapse

.collapse('show')

Juri element kollassabbli. Jirritorna lil min iċempel qabel ma l-element kollassabbli jkun fil-fatt intwera (jiġifieri qabel ma shown.bs.collapsejseħħ l-avveniment).

.collapse('hide')

Jaħbi element kollassabbli. Jirritorna lil min iċempel qabel ma l-element kollassabbli fil-fatt ġie moħbi (jiġifieri qabel ma hidden.bs.collapsejseħħ l-avveniment).

.collapse('dispose')

Jeqred il-kollass ta' element.

Avvenimenti

Il-klassi tal-kollass ta 'Bootstrap tesponi ftit avvenimenti għall-ganċ fil-funzjonalità tal-kollass.

Tip ta' Avveniment Deskrizzjoni
juru.bs.kollass Dan l-avveniment jispara immedjatament meta showjissejjaħ il-metodu tal-istanza.
muri.bs.kollass Dan l-avveniment jiġi sparat meta element ta 'kollass ikun sar viżibbli għall-utent (se jistenna li t-tranżizzjonijiet CSS jitlestew).
jaħbi.bs.kollass Dan l-avveniment jiġi sparat immedjatament meta l- hidemetodu jkun ġie msejjaħ.
moħbija.bs.kollass Dan l-avveniment jiġi sparat meta element ta 'kollass ikun ġie moħbi mill-utent (se jistenna li t-tranżizzjonijiet CSS jitlestew). 
$('#myCollapsible').on('hidden.bs.collapse', function () {
  // do something…
})