Жыйыштыруу
Бир нече класстар жана JavaScript плагиндерибиз менен долбооруңуз боюнча мазмундун көрүнүү мүмкүнчүлүгүн которуштуруу.
Бул кантип иштейт
Жыйратуу JavaScript плагини мазмунду көрсөтүү жана жашыруу үчүн колдонулат. Баскычтар же анкерлер сиз которуштуруучу белгилүү бир элементтерге түшүрүлгөн триггерлер катары колдонулат. Элементти жыйыштыруу height
анын учурдагы маанисин жандандырат 0
. padding
CSS анимацияларды кантип иштетээрин эске алып, сиз .collapse
элементте колдоно албайсыз . Анын ордуна, классты көз карандысыз таңуу элементи катары колдонуңуз.
prefers-reduced-motion
медиа суроосуна көз каранды. Биздин жеткиликтүүлүк документтерибиздин кыскартылган кыймыл бөлүмүн караңыз
.
Мисал
Класстын өзгөртүүлөрү аркылуу башка элементти көрсөтүү жана жашыруу үчүн төмөнкү баскычтарды басыңыз:
.collapse
мазмунду жашырат.collapsing
өтүү учурунда колдонулат.collapse.show
мазмунду көрсөтөт
data-target
Негизинен атрибуту бар баскычты колдонууну сунуштайбыз . Семантикалык көз караштан сунушталбаса да, href
атрибуту (жана a 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>
Горизонталдуу
Кыйратуу плагини да горизонталдуу кыйроону колдойт. Анын ордуна .width
өтүү үчүн модификатор классын кошуңуз жана дароо бала элементке a орнотуңуз . Өзүңүздүн ыңгайлаштырылган 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>
Бир нече максаттар
A <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 Authoring Practices Guide аккордеон үлгүсүндө сүрөттөлгөн ар кандай клавиатуранын өз ара аракеттенүүсүн камтыбайт - сиз аларды ыңгайлаштырылган JavaScript менен өзүңүз камтышыңыз керек.
Колдонуу
Кыйратуу плагини оор жүктөрдү көтөрүү үчүн бир нече класстарды колдонот:
.collapse
мазмунун жашырат.collapse.show
мазмунун көрсөтөт.collapsing
өтүү башталганда кошулат жана ал аяктаганда алынып салынат
Бул класстарды тапса болот _transitions.scss
.
Маалымат атрибуттары аркылуу
Бир же бир нече жыйыла турган элементтерди башкарууну автоматтык түрдө дайындоо үчүн жөн гана элементке data-toggle="collapse"
жана a кошуңуз . data-target
Атрибут data-target
кыйратууну колдонуу үчүн CSS селекторун кабыл алат. collapse
Классты жыйыла турган элементке кошууну унутпаңыз . Эгер анын демейки ачылуусун кааласаңыз, кошумча классты кошуңуз show
.
Аккордеон сыяктуу топту башкарууну жыйылган аймакка кошуу үчүн, маалымат атрибутун кошуңуз data-parent="#selector"
. Муну иш жүзүндө көрүү үчүн демонстрацияга кайрылыңыз.
JavaScript аркылуу
Кол менен иштетүү:
$('.collapse').collapse()
Параметрлер
Параметрлер маалымат атрибуттары же JavaScript аркылуу берилиши мүмкүн. Дайындардын атрибуттары үчүн параметрдин атын data-
, сыяктуу эле кошуңуз data-parent=""
.
аты | Type | Демейки | Description |
---|---|---|---|
ата-эне | селектор | jQuery объекти | DOM элементи | жалган | Эгер ата-эне камсыз кылынса, анда бул жыйыла турган нерсе көрсөтүлгөндө, көрсөтүлгөн ата-эненин астындагы бардык жыйыла турган элементтер жабылат. card (салттуу аккордеон жүрүм-турумуна окшош - бул класска көз каранды ). Атрибут максаттуу жыйыла турган жерге коюлушу керек. |
которуштуруу | логикалык | чын | Чакыруудагы жыйыла турган элементти которуштуруу |
Методдор
Асинхрондук методдор жана өтүүлөр
Бардык API ыкмалары асинхрондуу жана өтүүнү баштайт . Алар чалуучуга өтүү башталаары менен, бирок ал бүтө электе кайтып келишет . Кошумчалай кетсек, өтүүчү компоненттеги ыкма чакырыгы этибарга алынбайт .
Көбүрөөк маалымат алуу үчүн биздин JavaScript документтерибизди караңыз .
.collapse(options)
Мазмунуңузду жыйма элемент катары иштетет. Кошумча варианттарды кабыл алат object
.
$('#myCollapsible').collapse({
toggle: false
})
.collapse('toggle')
Жыйналма элементти көрсөтүүгө же жашырууга которот. Жыйналма элемент иш жүзүндө көрсөтүлө электе же жашырылганга чейин (б.а. shown.bs.collapse
же hidden.bs.collapse
окуя болгонго чейин) чалуучуга кайтып келет.
.collapse('show')
Жыйналма элементти көрсөтөт. Чыгуучу элемент чындыгында көрсөтүлгөнгө чейин (б.а. shown.bs.collapse
окуя болгонго чейин) чалуучуга кайтып келет.
.collapse('hide')
Жыйналма элементти жашырат. Жыйналма элемент чындыгында жашырылганга чейин (б.а. hidden.bs.collapse
окуя болгонго чейин) чалуучуга кайтып келет.
.collapse('dispose')
Элементтин кыйрашын жок кылат.
Окуялар
Bootstrap'тин кыйратуу классы кыйратуу функциясына кирүү үчүн бир нече окуяларды ачып берет.
Окуя түрү | Description |
---|---|
show.bs.collapse | Бул окуя show инстанция ыкмасы чакырылганда дароо күйөт. |
көрсөтүлгөн.bs.кыйрыш | Бул окуя кыйратуу элементи колдонуучуга көрүнгөндөн кийин өчүрүлөт (CSS өтүүлөрү бүткүчө күтөт). |
жашыруу.б.кыйруу | Бул окуя hide ыкма чакырылганда дароо өчүрүлөт. |
hidden.bs.collapse | Коллапс элементи колдонуучудан жашырылганда, бул окуя өчүрүлөт (CSS өтүүлөрү бүткүчө күтөт). |
$('#myCollapsible').on('hidden.bs.collapse', function () {
// do something...
})