Source

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

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

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

Сиз ошондой эле менен интерактивдүү эмес ачылуучу элементтерди түзө аласыз .dropdown-item-text. Ыңгайлаштырылган CSS же тексттик утилиталар менен стилди тартыңыз.

<div class="dropdown-menu">
  <span class="dropdown-item-text">Dropdown item text</span>
  <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>

Активдүү

Аларды активдүү катары.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>

Демейки боюнча, ылдый түшүүчү меню автоматтык түрдө ата-эненин жогору жагында жана сол жагында 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 p-4 text-muted" style="max-width: 200px;">
  <p>
    Some example text that's free-flowing within the dropdown menu.
  </p>
  <p class="mb-0">
    And this is more example text.
  </p>
</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>

Ашылма тизменин жайгашкан жерин өзгөртүү үчүн data-offsetже колдонуңуз .data-reference

<div class="d-flex">
  <div class="dropdown mr-1">
    <button type="button" class="btn btn-secondary dropdown-toggle" id="dropdownMenuOffset" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-offset="10,20">
      Offset
    </button>
    <div class="dropdown-menu" aria-labelledby="dropdownMenuOffset">
      <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>
  <div class="btn-group">
    <button type="button" class="btn btn-secondary">Reference</button>
    <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" id="dropdownMenuReference" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-reference="parent">
      <span class="sr-only">Toggle Dropdown</span>
    </button>
    <div class="dropdown-menu" aria-labelledby="dropdownMenuReference">
      <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>
</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 документтерине кайрылыңыз .
шилтеме	string \| элемент	'которуу'	Ашылма менюнун маалымдама элементи. `'toggle'`, `'parent'`же HTMLElement шилтеменин маанилерин кабыл алат . Көбүрөөк маалымат алуу үчүн Popper.js'тин referenceObject документтерине кайрылыңыз .
көрсөтүү	сап	'динамикалык'	Демейки боюнча, динамикалык жайгаштыруу үчүн Popper.js колдонобуз. Муну менен өчүрүңүз `static`.

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

Методдор

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

Окуялар

Бардык ылдый түшүүчү окуялар анын .dropdown-menuнегизги элементинде relatedTargetиштетилет жана касиетке ээ, анын мааниси которулуучу анкер элементи болуп саналат. hide.bs.dropdownжана hidden.bs.dropdownокуялар , чыкылдатуу окуясы үчүн Окуя объектисин камтыган касиетке ээ clickEvent(окуянын баштапкы түрү болгондо гана ).click

Окуя	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

Dropleft

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

Активдүү

Өчүрүлгөн

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

Меню мазмуну

Баштар

Бөлүүчүлөр

Текст

Формалар

Колдонуу

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

JavaScript аркылуу

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

Параметрлер

Методдор

Окуялар

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

Обзор

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

Мисалдар

Жалгыз баскыч

Бөлүү баскычы

Өлчөмү

Багыттар

Dropup

Dropright

Dropleft

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

Активдүү

Өчүрүлгөн

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

Меню мазмуну

Баштар

Ашылма баш

Бөлүүчүлөр

Текст

Формалар

Ашылма параметрлер

Колдонуу

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

JavaScript аркылуу

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

Параметрлер

Методдор

Окуялар

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