Apseимерелү

Проект буенча эчтәлекнең күренүен берничә класс һәм безнең JavaScript плагиннары белән алыштырыгыз.

Ничек бу эшли

JavaScript плагины җимерелү эчтәлекне күрсәтү һәм яшерү өчен кулланыла. Кнопка яки анкор триггер буларак кулланыла, сез алыштырган конкрет элементларга күчерелгән. Элементны җимерү heightхәзерге кыйммәтеннән җанландырачак 0. CSS анимацияләрне ничек эшләвен исәпкә алып, сез элементта куллана paddingалмыйсыз . .collapseКиресенчә, классны мөстәкыйль төрү элементы итеп кулланыгыз.

Бу компонентның анимация эффекты prefers-reduced-motionмедиа соравына бәйле. Безнең документларның кыскартылган хәрәкәт бүлеген карагыз .

Мисал

Класс үзгәртүләре аша бүтән элементны күрсәтү һәм яшерү өчен астагы төймәләргә басыгыз:

.collapseэчтәлекне яшерә
.collapsingкүчү вакытында кулланыла
.collapse.showэчтәлек күрсәтә

Сез атрибут белән сылтама href, яки атрибутлы төймә куллана аласыз data-target. Ике очракта data-toggle="collapse"да таләп ителә.

Href белән сылтама

Anim pariatur cliche reprehenderit, enim eiusmod югары тормыш аккусамус терри ричардсон реклама сквид. Nihil anim keffiyeh helvetica, һөнәрчелек сырасы лабораториясе андерсон кредит 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>

Берничә максат

А <button>яки <a>JQuery селекторы белән сылтама ясап, берничә элементны күрсәтә һәм яшерә hrefала data-target. Берничә <button>яки <a>элементны күрсәтә һәм яшерә ала, әгәр алар һәрберсе үз атрибутикасы белән hrefмөрәҗәгать data-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.

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

Аккордеон мисалы

Карта компонентын кулланып, аккордеон булдыру өчен, килешү буенча җимерелү тәртибен киңәйтә аласыз. Аккордеон стиленә дөрес ирешү өчен, төргәк итеп кулланыгыз .accordion.

Anim pariatur cliche reprehenderit, enim eiusmod югары тормыш аккусамус терри ричардсон реклама сквид. 3 бүре ай оффия ауте, купидат булмаган тимераякта долор иртәнге аш. Азык-төлек машинасы quinoa nesciunt laborum eiusmod. Иртәнге 3 бүре ай температурасы, алтик сунт аңа кош куйды, бер чыбыклы кофе нулла ассоменда шоредитч һ.б. Nihil anim keffiyeh helvetica, һөнәрчелек сырасы лабораториясе андерсон кредит nesciunt sapiente ea proident. Реклама вегетарианнан тыш касапчы вице-ломо. Леггинглар окаекат һөнәрчелек сырасы фермасы-өстәл, чимал джинсы эстетик синт нессиунты, сез алар турында ишетмәгәнсездер, мөгаен, 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">
      <h2 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>
      </h2>
    </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">
      <h2 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>
      </h2>
    </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">
      <h2 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>
      </h2>
    </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>

Уңайлык

aria-expandedКонтроль элементка өстәргә онытмагыз . Бу атрибут контроль белән бәйләнгән җимерелә торган элементның хәзерге торышын ачык күрсәтә, укучыларга һәм охшаш ярдәмче технологияләргә. Әгәр җимерелә торган элемент килешү буенча ябылса, контроль элементтагы атрибутның кыйммәте булырга тиеш aria-expanded="false". Әгәр дә син җимерелә торган элементны showкласс ярдәмендә килешү буенча ачык итеп куйсаң, aria-expanded="true"аның урынына контрольгә куй. Плагин бу атрибутны автоматик рәвештә контрольдә алыштырачак, җимерелә торган элемент ачылган яки ябылган (JavaScript аша, яисә кулланучы шул ук җимерелә торган элементка бәйләнгән бүтән контроль элементны этәргәнгә). Әгәр контроль элементның HTML элементы төймә булмаса (мәсәлән, ан <a>яки <div>), атрибутrole="button"элементка кушылырга тиеш.

Әгәр сезнең контроль элемент бер җимерелә торган элементны максат итә икән - ягъни data-targetатрибут idселекторга күрсәтә - сез атылучы элементны үз aria-controlsэченә алган контроль элементына өстәргә тиеш id. Заманча экран укучылары һәм охшаш ярдәмче технологияләр бу атрибутны кулланучыларга җимерелә торган элементның үзенә юнәлтү өчен өстәмә кыска юллар белән тәэмин итү өчен кулланалар.

Игътибар итегез, Bootstrap-ның хәзерге гамәлгә ашыруы WAI-ARIA Авторлык Практикасы 1.1 аккордеон үрнәгендә тасвирланган төрле клавиатура үзара бәйләнешен үз эченә алмый - сезгә аларны махсус JavaScript белән кертергә кирәк булачак.

Куллану

Apseимерелү плагины авыр күтәрү өчен берничә класс куллана:

.collapseэчтәлекне яшерә
.collapse.showэчтәлеген күрсәтә
.collapsingкүчү башлангач өстәлә, беткәч бетерелә

Бу классларны табып була _transitions.scss.

Мәгълүмат атрибутлары аша

Бер яки берничә җимерелә торган элементларга контрольне автоматик рәвештә билгеләү data-toggle="collapse"өчен data-targetэлементка өстәгез. data-targetАтрибут җимерелүне куллану өчен CSS селекторын кабул итә . Классны collapseҗимерелә торган элементка өстәргә онытмагыз. Килешү буенча ачыласыгыз килсә, өстәмә класс өстәгез show.

Accимерелә торган мәйданга аккордеонга охшаган төркем белән идарә итү өчен, мәгълүмат атрибутын өстәгез data-parent="#selector". Моны эштә күрү өчен демога мөрәҗәгать итегез.

JavaScript аша

Кул белән эшләгез:

$('.collapse').collapse()

Вариантлар

Вариантларны мәгълүмат атрибутлары яки JavaScript аша бирергә мөмкин. Мәгълүмат атрибутлары өчен вариант исемен data-өстәгез data-parent="".

Исем	Тип	Килешү	Тасвирлау
ата-ана	селектор \| jQuery объект \| DOM элементы	ялган	Әгәр дә ата-ана тәэмин ителсә, күрсәтелгән ата-ана астында барлык җимерелә торган элементлар бу җимерелә торган әйбер күрсәтелгәндә ябылачак. (традицион аккордеон тәртибенә охшаган - бу `card`класска бәйле). Атрибут максатчан җимерелә торган мәйданда куелырга тиеш.
күчү	буле	дөрес	Чакырыла торган элементны алыштыра

Методлар

Асинхрон ысуллар һәм күчү

Барлык API ысуллары да асинхрон һәм күчү башлый . Күчерелеш башлангач, ләкин ул беткәнче алар шалтыратучыга кире кайталар . Моннан тыш, күчү компонентына методик чакыру игътибарсыз калачак .

Күбрәк мәгълүмат алу өчен безнең JavaScript документларын карагыз .

`.collapse(options)`

Эчтәлекне җимерелә торган элемент буларак активлаштыра. Өстәмә вариантларны кабул итә object.

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

`.collapse('toggle')`

Collимерелә торган элементны күрсәтә яки яшерә. Apsимерелә торган элемент чынбарлыкта күрсәтелгән яки яшерелгәнче (ягъни вакыйга булганчы) шалтыратучыга кире кайта.shown.bs.collapsehidden.bs.collapse

`.collapse('show')`

Apsимерелә торган элементны күрсәтә. Apsимерелә торган элемент чынбарлыкта күрсәтелгәнче (ягъни shown.bs.collapseвакыйга булганчы) шалтыратучыга кире кайта.

`.collapse('hide')`

Apsимерелә торган элементны яшерә. Apsимерелә торган элемент яшерелгәнче (ягъни hidden.bs.collapseвакыйга булганчы) шалтыратучыга кире кайта.

`.collapse('dispose')`

Элементның җимерелүен юк итә.

Вакыйгалар

Bootstrap-ның җимерелү классы җимерелү функциясенә кушылу өчен берничә вакыйганы фаш итә.

Вакыйга төре	Тасвирлау
show.bs.collapse	`show`Бу вакыйга инстанция ысулы чакырылганда шунда ук янып тора .
күрсәтелгән.bs.collapse	Бу вакыйга кулланучыга җимерелгән элемент күренгәндә эшләнә (CSS күчү тәмамлануын көтәр).
hide.bs.collapse	Бу вакыйга `hide`метод чакырылганнан соң ук җибәрелә.
hidden.bs.collapse	Бу вакыйга кулланучының таркалу элементы яшерелгәндә эшләнә (CSS күчү тәмамлануын көтәр).

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