Source

Жыйыштыруу

Бир нече класстар жана JavaScript плагиндерибиз менен долбооруңуз боюнча мазмундун көрүнүү мүмкүнчүлүгүн которуштуруу.

Бул кантип иштейт

Жыйратуу JavaScript плагини мазмунду көрсөтүү жана жашыруу үчүн колдонулат. Баскычтар же анкерлер сиз которуштуруучу белгилүү бир элементтерге түшүрүлгөн триггерлер катары колдонулат. Элементти жыйыштыруу heightанын учурдагы маанисин жандандырат 0. paddingCSS анимацияларды кантип иштетээрин эске алып, сиз .collapseэлементте колдоно албайсыз . Анын ордуна, классты көз карандысыз таңуу элементи катары колдонуңуз.

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

Мисал

Класстын өзгөртүүлөрү аркылуу башка элементти көрсөтүү жана жашыруу үчүн төмөнкү баскычтарды басыңыз:

  • .collapseмазмунду жашырат
  • .collapsingөтүү учурунда колдонулат
  • .collapse.showмазмунду көрсөтөт

hrefСиз атрибуту бар шилтемени же атрибуттуу баскычты колдоно аласыз data-target. Эки учурда тең data-toggle="collapse"талап кылынат.

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>

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

A <button>же бир нече элементтерди JQuery селекторунун же атрибутуна <a>шилтеме кылуу менен көрсөтүп жана жашыра алат . Бир нече же бир элементти көрсөтүп жана жашыра алат, эгерде алардын ар бири ага өзүнүн же атрибуту менен кайрылсаhrefdata-target<button><a>hrefdata-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>

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

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

Anim pariatur cliche reprehenderit, enim eiusmod жогорку жашоого айыптоо Терри Ричардсон жана кальмар. 3 карышкыр ай officia aute, non cupidatat скейтборд dolor brunch. Азык-түлүк ташуучу quinoa nesciunt laborum eiusmod. Brunch 3 Wol Moon tempor, sunt aliqua ага куш койду кальмар жалгыз келип чыккан кофе nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft pivo labore Wes Anderson Cred nesciunt sapiente ea proident. Ad vegan excepteur касапчы вице-ломо. Легинстер occaecat кол өнөрчүлүк сыра фермасынан столго, чийки джинсы эстетикалык синтетикалык nesciunt, сиз алар жөнүндө accusamus labore туруктуу 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">
      <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көрсөтүп жатса, сиз жыйыла турган элементти камтыган башкаруу элементине атрибутту кошушуңуз керек . Заманбап экранды окугучтар жана ушуга окшогон жардамчы технологиялар бул атрибутту пайдалануучуларга жыйылган элементтин өзүнө түздөн-түз өтүү үчүн кошумча жарлыктар менен камсыз кылуу үчүн колдонушат.idaria-controlsid

Bootstrapтин учурдагы ишке ашырылышы WAI-ARIA Authoring Practices 1.1 аккордеон үлгүсүндө сүрөттөлгөн ар кандай клавиатуранын өз ара аракеттенүүсүн камтыбай турганын эске алыңыз - сиз аларды ыңгайлаштырылган 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...
})