Apseимерелү
Проект буенча эчтәлекнең күренүен берничә класс һәм безнең JavaScript плагиннары белән алыштырыгыз.
Ничек бу эшли
JavaScript плагины җимерелү эчтәлекне күрсәтү һәм яшерү өчен кулланыла. Кнопка яки анкор триггер буларак кулланыла, сез алыштырган конкрет элементларга күчерелгән. Элементны җимерү height
хәзерге кыйммәтеннән җанландырачак 0
. CSS анимацияләрне ничек эшләвен исәпкә алып, сез элементта куллана padding
алмыйсыз . .collapse
Киресенчә, классны мөстәкыйль төрү элементы итеп кулланыгыз.
prefers-reduced-motion
медиа соравына бәйле. Безнең документларның кыскартылган хәрәкәт бүлеген карагыз
.
Мисал
Класс үзгәртүләре аша бүтән элементны күрсәтү һәм яшерү өчен астагы төймәләргә басыгыз:
.collapse
эчтәлекне яшерә.collapsing
күчү вакытында кулланыла.collapse.show
эчтәлек күрсәтә
Гадәттә, без data-target
атрибутлы төймә кулланырга киңәш итәбез. Семантик күзлектән тәкъдим ителмәсә дә, сез href
атрибут (һәм а role="button"
) белән сылтама куллана аласыз. Ике очракта data-toggle="collapse"
да таләп ителә.
<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>
Горизонталь
Apseимерелү плагины горизонталь җимерелүне дә яклый. Аның урынына .width
күчү өчен модификатор классын өстәгез һәм балалар элементына урнаштырыгыз. Customзегезнең махсус Sass язарга, эчке стильләрне кулланырга, яисә безнең киңлек коммуналь хезмәтләрен кулланырга иренегез .width
height
width
min-height
безнең документларда артык буяу булмасын өчен, бу ачык таләп ителми.
Бала элементында гына кирәк .width
<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>
Берничә максат
А <button>
яки JQuery селекторы белән яки аның атрибутында <a>
сылтама белән берничә элементны күрсәтә һәм яшерә ала . Берничә яки элементны күрсәтә һәм яшерә ала, әгәр алар һәрберсе үз атрибутикасы белән мөрәҗәгать итсәләрhref
data-target
<button>
<a>
href
data-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>
Аккордеон мисалы
Карточка компонентын кулланып, аккордеон булдыру өчен, килешү буенча җимерелү тәртибен киңәйтә аласыз. Аккордеон стиленә дөрес ирешү өчен, төргәк итеп кулланыгыз .accordion
.
.show
Бу панель класс
ярдәмендә күрсәтелә
.<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>
Уңайлык
aria-expanded
Контроль элементка өстәргә онытмагыз . Бу атрибут контроль белән бәйләнгән җимерелә торган элементның хәзерге торышын ачык күрсәтә, укучыларга һәм охшаш ярдәмче технологияләргә. Әгәр җимерелә торган элемент килешү буенча ябылса, контроль элементтагы атрибутның кыйммәте булырга тиеш aria-expanded="false"
. Әгәр дә син җимерелә торган элементны show
класс ярдәмендә килешү буенча ачык итеп куйсаң, aria-expanded="true"
аның урынына контрольгә куй. Плагин бу атрибутны автоматик рәвештә контрольдә алыштырачак, җимерелә торган элемент ачылган яки ябылган (JavaScript аша, яисә кулланучы шул ук җимерелә торган элементка бәйләнгән бүтән контроль элементны этәргәнгә). Әгәр контроль элементның HTML элементы төймә булмаса (мәсәлән, ан <a>
яки <div>
), атрибутrole="button"
элементка кушылырга тиеш.
Әгәр сезнең контроль элемент бер җимерелә торган элементны максат итә икән - ягъни data-target
атрибут id
селекторга күрсәтә - сез атылучы элементны үз aria-controls
эченә алган контроль элементына өстәргә тиеш id
. Заманча экран укучылары һәм охшаш ярдәмче технологияләр бу атрибутны кулланучыларга җимерелә торган элементның үзенә юнәлтү өчен өстәмә кыска юллар белән тәэмин итү өчен кулланалар.
Игътибар итегез, Bootstrap-ның хәзерге тормышка ашырылуы ARIA Авторлык Практикасы Белешмәлеге аккордеон формасында тасвирланган төрле клавиатура үзара бәйләнешне үз эченә алмый - сезгә аларны махсус 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.collapse
hidden.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...
})