Tuitidh

Tog faicsinneachd susbaint thairis air do phròiseact le beagan chlasaichean agus na plugins JavaScript againn.

Mar a tha e ag obair

Tha am plugan tuiteam JavaScript air a chleachdadh gus susbaint a shealltainn agus fhalach. Bithear a’ cleachdadh putanan no acraichean mar luchd-brosnachaidh a tha air am mapadh gu eileamaidean sònraichte a thogas tu. Le bhith a’ tuiteam às eileamaid beothaichidh heighte an luach làithreach gu 0. Leis mar a làimhsicheas CSS beòthachaidhean, chan urrainn dhut a chleachdadh paddingair .collapseeileamaid. An àite sin, cleachd an clas mar eileamaid còmhdaich neo-eisimeileach.

eisimpleir

Cliog air na putanan gu h-ìosal gus eileamaid eile a shealltainn agus fhalach tro atharrachaidhean clas:

.collapsea’ falach susbaint
.collapsingair a chur an sàs rè eadar-ghluasadan
.collapse.showa’ nochdadh susbaint

Faodaidh tu ceangal a chleachdadh leis a’ hrefbhuadh, no putan leis a’ data-targetbhuadh. Anns an dà chùis, tha data-toggle="collapse"e riatanach.

Ceangal le href

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>

Ioma targaidean

A <button>no <a>is urrainn dha grunn eileamaidean a shealltainn agus fhalach le bhith a’ toirt iomradh orra le roghnaiche JQuery na fheart hrefno na data-targetfheart. Iomadaich <button>no <a>faodaidh iad eileamaid a shealltainn agus fhalach ma tha iad uile a’ toirt iomradh air leis a’ hrefbhuadhan data-targetaca

Tog a’ chiad eileamaid

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>

Eisimpleir bogsa-ciùil

Le bhith a’ cleachdadh pàirt na cairt , faodaidh tu an giùlan tuiteam sìos àbhaisteach a leudachadh gus bogsa a chruthachadh.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson agus squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Tha an làraidh bìdh a’ tighinn gu ìre nas lugha na labourum euusmod. Brunch 3 wolf moon tempor, sunt aliqua cuir eun air squid cofaidh aon-tùs nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur bùidsear iar lomo. Leggings occaecat craft beer farm-to-table, raw denim esthetic synth nesciunt is dòcha nach cuala tu iomradh orra accusamus laboure seasmhach 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>

Ruigsinneachd

Dèan cinnteach gun cuir thu ris aria-expandedan eileamaid smachd. Tha am feart seo gu soilleir a’ toirt iomradh air staid làithreach na h-eileamaid tuiteamach ceangailte ri smachd leughadairean sgrion agus teicneòlasan taice coltach ris. Ma tha an eileamaid collapsible dùinte gu bunaiteach, bu chòir luach aria-expanded="false". Ma tha thu air an eileamaid tuiteamach a shuidheachadh gus a bhith fosgailte gu bunaiteach a’ cleachdadh a’ showchlas, cuir aria-expanded="true"air an smachd an àite sin. Togaidh am plugan am feart seo gu fèin-ghluasadach air an smachd stèidhichte air co-dhiù a chaidh an eileamaid tuiteamach fhosgladh no a dhùnadh (tro JavaScript, no leis gu bheil an neach-cleachdaidh air eileamaid smachd eile a bhrosnachadh cuideachd ceangailte ris an aon eileamaid tuiteamach). Mura h-eil putan HTML an eileamaid smachd (me, an <a>no <div>), am feartrole="button"bu chòir a chur ris an eileamaid.

Ma tha an eileamaid smachd agad ag amas air aon eileamaid a ghabhas tuiteam - is e sin am data-targetfeart a’ comharrachadh idroghnaiche - bu chòir dhut am aria-controlsfeart a chuir ris an eileamaid smachd, anns a bheil an ideileamaid a ghabhas tuiteam. Bidh leughadairean sgrion ùr-nodha agus teicneòlasan taice coltach ris a’ cleachdadh a’ fheart seo gus geàrr-liostaichean a bharrachd a thoirt do luchd-cleachdaidh gus seòladh gu dìreach chun eileamaid tuiteamach fhèin.

Thoir an aire nach eil buileachadh gnàthach Bootstrap a’ còmhdach na diofar eadar-obrachaidhean meur-chlàr a tha air am mìneachadh ann am pàtran bogsa 1.1 Cleachdaidhean Ùghdarrachaidh WAI-ARIA - feumaidh tu iad sin a thoirt a-steach le JavaScript àbhaisteach.

Cleachdadh

Bidh am plugan tuiteam a’ cleachdadh beagan chlasaichean gus an togail trom a làimhseachadh:

.collapsea’ falach an t-susbaint
.collapse.showa’ nochdadh an t-susbaint
.collapsingair a chur ris nuair a thòisicheas an gluasad, agus air a thoirt air falbh nuair a bhios e deiseil

Gheibhear na clasaichean seo ann an _transitions.scss.

Tro fheartan dàta

Dìreach cuir ris data-toggle="collapse"agus a data-targetris an eileamaid gus smachd a shònrachadh gu fèin-ghluasadach air aon no barrachd eileamaidean a ghabhas tuiteam. Gabhaidh am data-targetfeart ri roghnaichear CSS gus an tuiteam a chuir an sàs. Dèan cinnteach gun cuir thu an clas collapseris an eileamaid a ghabhas tuiteam. Ma tha thu airson gum fosgail e gu bunaiteach, cuir ris a’ chlas show.

Gus riaghladh buidhne coltach ri bogsa a chuir ri raon a ghabhas tuiteam, cuir am feart dàta data-parent="#selector". Thoir sùil air an demo gus seo fhaicinn ann an gnìomh.

Air sgàth javascript

Dèan comas le làimh le:

$('.collapse').collapse()

Roghainnean

Faodar roghainnean a thoirt seachad tro bhuadhan dàta no JavaScript. Airson buadhan dàta, cuir ainm an roghainn ri data-, mar ann an data-parent="".

Ainm	Seòrsa	Deònach	Tuairisgeul
pàrant	roghnaiche \| nì jQuery \| eileamaid DOM	breugach	Ma tha pàrant air a thoirt seachad, thèid a h-uile eileamaid tuiteamach fon phàrant ainmichte a dhùnadh nuair a thèid an rud tuiteamach seo a shealltainn. (coltach ri giùlan bogsa traidiseanta - tha seo an urra ris a ' `card`chlas). Feumaidh am feart a bhith air a shuidheachadh air an raon targaid a ghabhas tuiteam.
tog	boolean	fìor	Toglaich an eileamaid a ghabhas tuiteam air ionnsaigh

Dòighean-obrach

Modhan asyncronach agus eadar-ghluasadan

Tha a h-uile modh API asyncronach agus tòisichidh iad air eadar- ghluasad . Bidh iad a’ tilleadh chun neach-fios cho luath ‘s a thòisicheas an gluasad ach mus tig e gu crìch . A bharrachd air an sin, cha tèid aire a thoirt do ghairm modh air pàirt gluasaid .

Faic na sgrìobhainnean JavaScript againn airson tuilleadh fiosrachaidh.

`.collapse(options)`

Cuir an susbaint agad an gnìomh mar eileamaid a ghabhas tuiteam. A 'gabhail ri roghainnean roghnach object.

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

`.collapse('toggle')`

Togail eileamaid a ghabhas tuiteam ri fhaicinn no falaichte. Tillidh e chun neach-fios mus deach an eileamaid a ghabhas tuiteam a shealltainn no fhalachshown.bs.collapse ( ie mus tachair an hidden.bs.collapsetachartas).

`.collapse('show')`

A’ sealltainn eileamaid a ghabhas tuiteam. Tillidh e chun neach-fios mus deach an eileamaid a ghabhas tuiteam a shealltainn (ie mus tachair an shown.bs.collapsetachartas).

`.collapse('hide')`

A 'falach eileamaid collapsible. Tilleadh chun neach-fios mus deach an eileamaid a ghabhas tuiteam a chuir am falach (ie mus tachair an hidden.bs.collapsetachartas).

`.collapse('dispose')`

A 'sgrios tuiteam eileamaid.

Tachartasan

Bidh clas tuiteam Bootstrap a’ nochdadh grunn thachartasan airson a dhol an sàs ann an gnìomhachd tuiteam.

Seòrsa Tachartas	Tuairisgeul
seall.bs.tuiteam	Bidh an tachartas seo a’ losgadh sa bhad nuair `show`a chanar ris an dòigh eisimpleir.
air a nochdadh.bs.collapse	Thèid an tachartas seo a losgadh nuair a tha eileamaid tuiteamach air a dhèanamh follaiseach don neach-cleachdaidh (feitheamh ri eadar-ghluasadan CSS a chrìochnachadh).
seiche.bs.collapse	Tha an tachartas seo air a losgadh sa bhad nuair a chaidh am `hide`modh a ghairm.
falaichte.bs.collapse	Thèid an tachartas seo a losgadh nuair a chaidh eileamaid tuiteamach fhalach bhon chleachdaiche (feitheamh ri eadar-ghluasadan CSS a chrìochnachadh).

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

Tuitidh

Mar a tha e ag obair

eisimpleir

Ioma targaidean

Eisimpleir bogsa-ciùil

Nì buidhne a ghabhas tuiteam #1

Nì buidhne a ghabhas tuiteam #2

Nì buidhne a ghabhas tuiteam #3