Ашылма тизмелер

Bootstrap ачылуучу плагини менен шилтемелердин тизмелерин жана башкаларды көрсөтүү үчүн контексттик катмарларды которуштуруу.

Обзор

Ашылма тизмелер шилтемелердин тизмесин жана башкаларды көрсөтүү үчүн которула турган, контексттик катмарлар. Алар камтылган Bootstrap ачылуучу JavaScript плагини менен интерактивдүү жасалды. Алар чычкан менен эмес, чыкылдатуу менен которулат; бул атайылап жасалган дизайн чечими.

Үчүнчү тараптын Popper.js китепканасында ачылуучу тизмелер түзүлөт , ал динамикалык жайгашууну жана көрүү терезесин аныктоону камсыз кылат. Bootstrap'тин JavaScript'инен мурун popper.min.js камтууну унутпаңыз же Popper.js камтылган bootstrap.bundle.min.js/ колдонуңуз. bootstrap.bundle.jsPopper.js динамикалык жайгаштыруу талап кылынбагандыктан, навигация тилкелеринде ачылуучу тизмелерди жайгаштыруу үчүн колдонулбайт.

Эгер сиз биздин JavaScript булактан куруп жатсаңыз, андаutil.js .

Жеткиликтүүлүк

WAI ARIA стандарты чыныгы role="menu"виджетти аныктайт, бирок бул иш - аракеттерди же функцияларды ишке киргизген колдонмого окшош менюларга мүнөздүү. ARIA менюлары меню пункттарын, белги кутучасынын меню пункттарын, радио баскыч меню пункттарын, радио баскыч топторун жана кошумча менюларды гана камтышы мүмкүн.

Башка жагынан алганда, Bootstrap'тин ачылуучу ылдыйлары жалпы жана ар кандай кырдаалдарга жана белгилөө структураларына колдонула турган болуп иштелип чыккан. Мисалы, издөө талаалары же кирүү формалары сыяктуу кошумча киргизүүлөрдү жана форманы башкаруу элементтерин камтыган ачылуучу тизмелерди түзсө болот. Ушул себептен, Bootstrap чыныгы ARIA менюлары үчүн талап кылынган roleжана aria-атрибуттардын бирин да күтпөйт (же автоматтык түрдө кошпойт) . Авторлор бул өзгөчө атрибуттарды өздөрү камтышы керек.

Бирок, Bootstrap клавиатура менюсунун көпчүлүк стандарттуу өз ара аракеттешүүсү үчүн орнотулган колдоону кошот, мисалы .dropdown-itemкурсор баскычтарын колдонуу менен айрым элементтерди жылдыруу жана ESCбаскыч менен менюну жабуу.

Мисалдар

Ашылма баскычты (баскычыңыз же шилтемеңиз) жана ачылуучу менюну .dropdown, же жарыялаган башка элементти ороп алыңыз position: relative;. Ыкчам ылдый түшүүлөр потенциалдуу муктаждыктарыңызга ылайыктуураак элементтерден <a>же элементтерден иштетилиши мүмкүн .<button>

Жалгыз баскыч ачылуучу тизмелер

Кандайдыр бир синглди .btnбелгилөөнүн айрым өзгөртүүлөрү менен ачылуучу которуштурууга айландырса болот. Бул жерде сиз аларды эки <button>элемент менен иштөөгө кантип кое аласыз:

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown button
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</div>

Жана <a>элементтер менен:

<div class="dropdown show">
  <a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown link
  </a>

  <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</div>

Эң жакшы жери, сиз муну каалаган баскычтын варианты менен жасай аласыз:

<!-- Example single danger button -->
<div class="btn-group">
  <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Action
  </button>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
    <div class="dropdown-divider"></div>
    <a class="dropdown-item" href="#">Separated link</a>
  </div>
</div>

Бөлүнүүчү баскычтардын ачылуучу тизмелери

Ошо сыяктуу эле, бир баскыч ачылуучу ылдыйкылар менен дээрлик бирдей белгилөө менен, бирок .dropdown-toggle-splitачылуучу каретанын айланасында туура аралыкты кошуу менен бөлүнгөн баскычтарды түзүңүз.

Биз бул кошумча классты каретканын paddingэки тарабындагы горизонталдыкты 25% кыскартуу жана margin-leftкадимки баскычтар үчүн кошулгандарды алып салуу үчүн колдонобуз. Бул кошумча өзгөртүүлөр каретаны бөлүү баскычынын ортосунда кармап турат жана негизги баскычтын жанында ылайыктуураак өлчөмдү камсыз кылат.

<!-- Example split danger button -->
<div class="btn-group">
  <button type="button" class="btn btn-danger">Action</button>
  <button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
    <div class="dropdown-divider"></div>
    <a class="dropdown-item" href="#">Separated link</a>
  </div>
</div>

Өлчөмү

Баскыч ачылуучу баскычтар бардык өлчөмдөгү баскычтар менен иштейт, анын ичинде демейки жана бөлүнгөн ачылуучу баскычтар.

<!-- Large button groups (default and split) -->
<div class="btn-group">
  <button class="btn btn-secondary btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Large button
  </button>
  <div class="dropdown-menu">
    ...
  </div>
</div>
<div class="btn-group">
  <button class="btn btn-secondary btn-lg" type="button">
    Large split button
  </button>
  <button type="button" class="btn btn-lg btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <div class="dropdown-menu">
    ...
  </div>
</div>

<!-- Small button groups (default and split) -->
<div class="btn-group">
  <button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Small button
  </button>
  <div class="dropdown-menu">
    ...
  </div>
</div>
<div class="btn-group">
  <button class="btn btn-secondary btn-sm" type="button">
    Small split button
  </button>
  <button type="button" class="btn btn-sm btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <div class="dropdown-menu">
    ...
  </div>
</div>

Dropup вариациясы

.dropupНегизги элементке кошуу менен элементтердин үстүндө ылдый түшүүчү менюларды иштетиңиз .

<!-- Default dropup button -->
<div class="btn-group dropup">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropup
  </button>
  <div class="dropdown-menu">
    <!-- Dropdown menu links -->
  </div>
</div>

<!-- Split dropup button -->
<div class="btn-group dropup">
  <button type="button" class="btn btn-secondary">
    Split dropup
  </button>
  <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <div class="dropdown-menu">
    <!-- Dropdown menu links -->
  </div>
</div>

Dropright вариация

.droprightНегизги элементке кошуу менен элементтердин оң жагындагы ачылуучу менюларды иштетиңиз .

<!-- Default dropright button -->
<div class="btn-group dropright">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropright
  </button>
  <div class="dropdown-menu">
    <!-- Dropdown menu links -->
  </div>
</div>

<!-- Split dropright button -->
<div class="btn-group dropright">
  <button type="button" class="btn btn-secondary">
    Split dropright
  </button>
  <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="sr-only">Toggle Dropright</span>
  </button>
  <div class="dropdown-menu">
    <!-- Dropdown menu links -->
  </div>
</div>

Тамчы вариация

.dropleftНегизги элементке кошуу менен элементтердин сол жагындагы ачылуучу менюларды иштетиңиз .

<!-- Default dropleft button -->
<div class="btn-group dropleft">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropleft
  </button>
  <div class="dropdown-menu">
    <!-- Dropdown menu links -->
  </div>
</div>

<!-- Split dropleft button -->
<div class="btn-group">
  <div class="btn-group dropleft" role="group">
    <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      <span class="sr-only">Toggle Dropleft</span>
    </button>
    <div class="dropdown-menu">
      <!-- Dropdown menu links -->
    </div>
  </div>
  <button type="button" class="btn btn-secondary">
    Split dropleft
  </button>
</div>

Тарыхый жактан ачылуучу менюнун мазмуну шилтемелер болушу керек болчу , бирок v4 менен андай болбой калды. Эми сиз жөн гана s <button>ордуна ылдый түшүүчү элементтерди колдонсоңуз болот .<a>

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenu2">
    <button class="dropdown-item" type="button">Action</button>
    <button class="dropdown-item" type="button">Another action</button>
    <button class="dropdown-item" type="button">Something else here</button>
  </div>
</div>

Демейки боюнча, ылдый түшүүчү меню автоматтык түрдө ата-эненин жогору жагында жана сол жагында 100% жайгаштырылат. Түзүлүүчү менюну оңго тегиздөө .dropdown-menu-right..dropdown-menu

Көңүл бургула! Ашылма тизмелер Popper.js аркасында жайгаштырылат (алар навигация тилкесинде камтылгандан тышкары).

<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Right-aligned menu
  </button>
  <div class="dropdown-menu dropdown-menu-right">
    <button class="dropdown-item" type="button">Action</button>
    <button class="dropdown-item" type="button">Another action</button>
    <button class="dropdown-item" type="button">Something else here</button>
  </div>
</div>

Каалаган түшүүчү менюдагы аракеттердин бөлүмдөрүн белгилөө үчүн башты кошуңуз.

<div class="dropdown-menu">
  <h6 class="dropdown-header">Dropdown header</h6>
  <a class="dropdown-item" href="#">Action</a>
  <a class="dropdown-item" href="#">Another action</a>
</div>

Бөлүүчү менен тиешелүү меню пункттарынын өзүнчө топтору.

<div class="dropdown-menu">
  <a class="dropdown-item" href="#">Action</a>
  <a class="dropdown-item" href="#">Another action</a>
  <a class="dropdown-item" href="#">Something else here</a>
  <div class="dropdown-divider"></div>
  <a class="dropdown-item" href="#">Separated link</a>
</div>

Форманы ылдый түшүүчү менюга коюңуз же аны ылдыйкы менюга айлантыңыз жана ага керектүү терс орун берүү үчүн маржа же толтуруучу утилиталарды колдонуңуз.

<div class="dropdown-menu">
  <form class="px-4 py-3">
    <div class="form-group">
      <label for="exampleDropdownFormEmail1">Email address</label>
      <input type="email" class="form-control" id="exampleDropdownFormEmail1" placeholder="[email protected]">
    </div>
    <div class="form-group">
      <label for="exampleDropdownFormPassword1">Password</label>
      <input type="password" class="form-control" id="exampleDropdownFormPassword1" placeholder="Password">
    </div>
    <div class="form-check">
      <input type="checkbox" class="form-check-input" id="dropdownCheck">
      <label class="form-check-label" for="dropdownCheck">
        Remember me
      </label>
    </div>
    <button type="submit" class="btn btn-primary">Sign in</button>
  </form>
  <div class="dropdown-divider"></div>
  <a class="dropdown-item" href="#">New around here? Sign up</a>
  <a class="dropdown-item" href="#">Forgot password?</a>
</div>

<form class="dropdown-menu p-4">
  <div class="form-group">
    <label for="exampleDropdownFormEmail2">Email address</label>
    <input type="email" class="form-control" id="exampleDropdownFormEmail2" placeholder="[email protected]">
  </div>
  <div class="form-group">
    <label for="exampleDropdownFormPassword2">Password</label>
    <input type="password" class="form-control" id="exampleDropdownFormPassword2" placeholder="Password">
  </div>
  <div class="form-check">
    <input type="checkbox" class="form-check-input" id="dropdownCheck2">
    <label class="form-check-label" for="dropdownCheck2">
      Remember me
    </label>
  </div>
  <button type="submit" class="btn btn-primary">Sign in</button>
</form>

Аларды активдүү катары.active стилдөө үчүн ачылуучу тизмедеги элементтерге кошуңуз .

<div class="dropdown-menu">
  <a class="dropdown-item" href="#">Regular link</a>
  <a class="dropdown-item active" href="#">Active link</a>
  <a class="dropdown-item" href="#">Another link</a>
</div>

Аларды өчүрүлгөн катары.disabled стилдөө үчүн ачылуучу тизмедеги нерселерди кошуңуз .

<div class="dropdown-menu">
  <a class="dropdown-item" href="#">Regular link</a>
  <a class="dropdown-item disabled" href="#">Disabled link</a>
  <a class="dropdown-item" href="#">Another link</a>
</div>

Колдонуу

.showМаалымат атрибуттары же JavaScript аркылуу ачылуучу плагин ата-энелик тизмедеги классты которуштуруу менен жашыруун мазмунду (ашылма менюлар) которушат . Атрибут data-toggle="dropdown"колдонмо деңгээлинде ылдый түшүүчү менюларды жабууга таянат, андыктан аны дайыма колдонуу жакшы идея.

Тийүү иштетилген түзмөктөрдө, ачылуучу тизмени ачуу элементтин дароо балдарына бош ( $.noop) иштеткичтерди кошот. Ырас, бул жийиркеничтүү бузукулук iOS'тун иш-чара делегациясындагы кызыкчылыктын тегерегинде иштөө үчүн зарыл, антпесе, ачылуучу тизмеден тышкаркы каалаган жерди таптап, ачылуучу тизмени жапкан кодду иштетпейт. Ашылма тизме жабылгандан кийин, бул кошумча бош иштеткичтер алынып салынат.mouseover<body>mouseover

Маалымат атрибуттары аркылуу

Шилтемеге кошуңуз data-toggle="dropdown"же ачылуучу тизмени которуштуруу үчүн баскычты басыңыз.

<div class="dropdown">
  <button id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown trigger
  </button>
  <div class="dropdown-menu" aria-labelledby="dLabel">
    ...
  </div>
</div>

JavaScript аркылуу

JavaScript аркылуу ачылуучу тизмелерге чалыңыз:

$('.dropdown-toggle').dropdown()

`data-toggle="dropdown"`дагы эле талап кылынат

Сиз JavaScript аркылуу ачылуучу тизмеңизге чалсаңыз же анын ордуна data-api колдонсоңуз да, data-toggle="dropdown"дайыма ачылуучу тизменин триггер элементинде болушу талап кылынат.

Параметрлер

Параметрлер маалымат атрибуттары же JavaScript аркылуу берилиши мүмкүн. Дайындардын атрибуттары үчүн параметрдин атын data-, сыяктуу эле кошуңуз data-offset="".

аты	Type	Демейки	Description
офсет	саны \| string \| функция	0	Ашылма тизменин максаттуу көрсөткүчүнө салыштырмалуу жылышы. Көбүрөөк маалымат алуу үчүн Popper.js'тин офсет документтерине кайрылыңыз .
айлануу	логикалык	чын	Маалымдама элементи бири-бирине дал келген учурда, Ашылма ылдыйга айланууга уруксат бериңиз. Көбүрөөк маалымат алуу үчүн Popper.js'тин flip docs караңыз .
чек ара	string \| элемент	'scrollParent'	Ашылма менюнун ашыкча чектөө чек арасы. `'viewport'`, `'window'`, `'scrollParent'`, же HTMLElement шилтемесинин маанилерин кабыл алат (JavaScript гана). Көбүрөөк маалымат алуу үчүн Popper.js'тин preventOverflow документтерине кайрылыңыз .

Качан boundaryбашка мааниге коюлса 'scrollParent', стил контейнерге position: staticколдонулат ..dropdown

Методдор

Метод	Description
`$().dropdown('toggle')`	Берилген навигация тилкесинин же өтмөктүү навигациянын ылдый түшүүчү менюну өчүрөт.
`$().dropdown('update')`	Элементтин ылдый түшүүчү позициясын жаңыртат.
`$().dropdown('dispose')`	Элементтин ылдый түшүүчүсүн жок кылат.

Окуялар

Бардык ылдый түшүүчү окуялар анын .dropdown-menuнегизги элементинде relatedTargetиштетилет жана касиетке ээ, анын мааниси которулуучу анкер элементи болуп саналат.

Окуя	Description
`show.bs.dropdown`	Бул окуя шоу инстанция ыкмасы чакырылганда дароо күйөт.
`shown.bs.dropdown`	Бул окуя ачылуучу тизме колдонуучуга көрүнгөндөн кийин өчүрүлөт (CSS өтүүлөрү аягына чейин күтөт).
`hide.bs.dropdown`	Жашыруу инстанция ыкмасы чакырылганда бул окуя дароо өчүрүлөт.
`hidden.bs.dropdown`	Бул окуя ачылуучу тизмени колдонуучудан жашырып бүткөндөн кийин иштен чыгарылат (CSS өтүүлөрү бүткүчө күтөт).

$('#myDropdown').on('show.bs.dropdown', function () {
  // do something…
})

Ашылма тизмелер

Обзор

Жеткиликтүүлүк

Мисалдар

Жалгыз баскыч ачылуучу тизмелер

Бөлүнүүчү баскычтардын ачылуучу тизмелери

Өлчөмү

Dropup вариациясы

Dropright вариация

Тамчы вариация

Меню пункттары

Менюну тегиздөө

Менюнун аталыштары

Меню бөлгүчтөр

Меню формалары

Менюнун активдүү пункттары

Өчүрүлгөн меню пункттары

Колдонуу

Маалымат атрибуттары аркылуу

JavaScript аркылуу

`data-toggle="dropdown"`дагы эле талап кылынат

Параметрлер

Методдор

Окуялар

Ашылма тизмелер

Обзор

Жеткиликтүүлүк

Мисалдар

Жалгыз баскыч ачылуучу тизмелер

Бөлүнүүчү баскычтардын ачылуучу тизмелери

Өлчөмү

Dropup вариациясы

Dropright вариация

Тамчы вариация

Меню пункттары

Менюну тегиздөө

Менюнун аталыштары

Ашылма баш

Меню бөлгүчтөр

Меню формалары

Менюнун активдүү пункттары

Өчүрүлгөн меню пункттары

Колдонуу

Маалымат атрибуттары аркылуу

JavaScript аркылуу

data-toggle="dropdown"дагы эле талап кылынат

Параметрлер

Методдор

Окуялар

`data-toggle="dropdown"`дагы эле талап кылынат