Açylýan ýerler
“Bootstrap” açylýan plugin bilen baglanyşyklaryň sanawyny we başga zatlary görkezmek üçin kontekstdäki örtükleri üýtgediň.
Gysgaça syn
Açylýan ýerler, baglanyşyklaryň sanawlaryny we başgalary görkezmek üçin üýtgedilip bilner, kontekstdäki örtükler. Olara goşulan Bootstrap açylýan JavaScript plugin bilen interaktiw ýasaldy. Olary basmak bilen däl-de, basmak bilen üýtgedýärler; bu bilgeşleýin dizaýn karary .
Açylýan ýerler dinamiki ýerleşiş we görnüşi kesgitlemegi üpjün edýän Popper üçünji tarap kitaphanasynda gurulýar . Bootstrap-yň JavaScript-den öň popper.min.js-i goşuň ýa-da Popper -i ulanýan bootstrap.bundle.min.js
/ ulanyň. bootstrap.bundle.js
Popper, dinamiki ýerleşiş talap edilmeýänligi sebäpli, deňiz panellerinde düşýän ýerleri ýerleşdirmek üçin ulanylmaýar.
JavaScriptimizi çeşmeden gurýan bolsaňyz, talap edýärutil.js
.
Elýeterlilik
WAI ARIA standarty hakyky role="menu"
widjeti kesgitleýär , ýöne bu hereketlere ýa-da funksiýalara itergi berýän programma menýusyna mahsus. ARIA menýularynda diňe menýu elementleri, bellik gutusy menýu elementleri, radio düwmesi menýu elementleri, radio düwme toparlary we kiçi menýular bolup biler.
Beýleki tarapdan, “Bootstrap” -yň aşak düşmegi umumy we dürli ýagdaýlara we bellik gurluşlaryna degişlidir. Mysal üçin, gözleg meýdanlary ýa-da giriş formalary ýaly goşmaça girişleri we forma dolandyryşlaryny öz içine alýan açylan ýerleri döredip bolýar. Şol sebäpli “Bootstrap” hakyky ARIA menýulary üçin zerur bolan atributlara garaşmaýar (ýa-da awtomatiki goşmaýar) role
. Uthorsazyjylar bu has anyk häsiýetleri özleri goşmaly bolarlar.aria-
.dropdown-item
Şeýle-de bolsa, “Bootstrap ” kursor düwmelerini ulanyp aýratyn elementleriň üstünden geçmek we menýu açary bilen ýapmak ýaly adaty klawiatura menýusynyň özara täsirleri üçin içerki goldaw goşýar ESC.
Mysallar
Açylýan açary üýtgetmek (düwmäňiz ýa-da baglanyşyk) we açylýan menýu .dropdown
ýa-da yglan edýän başga bir element bilen örtüň position: relative;
. Mümkin bolan zerurlyklaryňyza has laýyk gelmek üçin aşak gaçmalar ýa- <a>
da elementlerden döräp biler .<button>
Leeke düwme
Islendik .btn
ýekejäni käbir bellik üýtgeşmeleri bilen açylan açyklyga öwrüp bolýar. <button>
Olary iki element bilen işlemek üçin nädip goýup bilersiňiz :
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">
Dropdown button
</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>
</div>
<a>
Elementler bilen :
<div class="dropdown">
<a class="btn btn-secondary dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-expanded="false">
Dropdown link
</a>
<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>
</div>
Iň gowy tarapy, muny islendik düwme görnüşi bilen hem edip bilersiňiz:
<!-- Example single danger button -->
<div class="btn-group">
<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" 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>
Bölmek düwmesi
Edil şonuň ýaly-da, bir düwmäniň aşak düşmegi bilen birmeňzeş bellik bilen bölünen düwmäni açyň, ýöne .dropdown-toggle-split
açylýan kartetiň töwereginde dogry aralyk goşmak bilen.
padding
Karetiň iki gapdalyndaky keseligine 25% azaltmak we margin-left
yzygiderli düwmeleriň açylmagy üçin goşulanlary aýyrmak üçin bu goşmaça synpy ulanýarys . Şol goşmaça üýtgeşmeler, kartany bölmek düwmesinde jemleýär we esasy düwmäniň gapdalyndaky has laýyk ölçeg meýdanyny üpjün edýär.
<!-- 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-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>
Ölçeg
Düwmeleriň açylmagy, ähli ululykdaky düwmeler bilen işleýär, şol sanda deslapky we bölünen açylýan düwmeler.
<!-- 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-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-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-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-expanded="false">
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
...
</div>
</div>
Görkezmeler
Taşlamak
Esasy elemente goşup .dropup
, aşaky menýulary elementleriň üstünde işlediň.
<!-- Default dropup button -->
<div class="btn-group dropup">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" 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-expanded="false">
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
<!-- Dropdown menu links -->
</div>
</div>
Dropright
Esasy elemente goşup, elementleriň sag tarapynda açylan menýulary işlediň .dropright
.
<!-- Default dropright button -->
<div class="btn-group dropright">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" 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-expanded="false">
<span class="sr-only">Toggle Dropright</span>
</button>
<div class="dropdown-menu">
<!-- Dropdown menu links -->
</div>
</div>
Dropleft
.dropleft
Ene elementine goşmak bilen elementleriň çep tarapynda açylan menýulary işlediň .
<!-- Default dropleft button -->
<div class="btn-group dropleft">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" 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">
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" 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>
Menýu elementleri
Taryhy taýdan açylýan menýu mazmuny baglanyşyk bolmalydy , ýöne indi v4 bilen beýle bolmaz. Indi islege görä diňe s <button>
däl-de, açylýan ýerleriňizdäki elementleri ulanyp bilersiňiz.<a>
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">
Dropdown
</button>
<div class="dropdown-menu">
<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>
Şeýle hem, interaktiw däl açylýan zatlary döredip bilersiňiz .dropdown-item-text
. Customörite CSS ýa-da tekst enjamlary bilen hasam stilleşip bilersiňiz.
<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>
Işjeň
Aktiw.active
görnüşde düzmek üçin açylan elementlere goşuň .
<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>
Maýyp
.disabled
Açyk görnüşdäki zatlary goşuň , olary ýapyk görnüşde düzüň .
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Regular link</a>
<a class="dropdown-item disabled">Disabled link</a>
<a class="dropdown-item" href="#">Another link</a>
</div>
Menýu deňleşdirmek
Düzgüne görä, açylýan menýu awtomatiki usulda ýokardan we ene-atasynyň çep tarapynda 100% ýerleşdirilýär. Açylýan menýuny sag .dropdown-menu-right
tarapa goşuň ..dropdown-menu
<div class="btn-group">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" 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>
Jogaply deňleşdirme
Duýgur deňlemäni ulanmak isleseňiz, data-display="static"
atributy goşup dinamiki pozisiýany öçüriň we täsirli üýtgeşiklik synplaryny ulanyň.
Açylýan menýuny berlen bölek ýa-da has ulusy bilen deňleşdirmek üçin goşuň .dropdown-menu{-sm|-md|-lg|-xl}-right
.
<div class="btn-group">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" data-display="static" aria-expanded="false">
Left-aligned but right aligned when large screen
</button>
<div class="dropdown-menu dropdown-menu-lg-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>
Açylýan menýuny berlen bölek ýa-da has ulusy bilen deňleşdirmek üçin goşuň .dropdown-menu-right
we .dropdown-menu{-sm|-md|-lg|-xl}-left
.
<div class="btn-group">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" data-display="static" aria-expanded="false">
Right-aligned but left aligned when large screen
</button>
<div class="dropdown-menu dropdown-menu-right dropdown-menu-lg-left">
<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>
Deňiz panellerinde açylýan düwmelere atribut goşmagyň zerurlygynyň ýokdugyna üns beriň data-display="static"
, sebäbi Popper deňiz panellerinde ulanylmaýar.
Menýu mazmuny
Sözbaşylar
Islendik açylýan menýuda hereketleriň bölümlerini bellemek üçin sözbaşy goşuň.
<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>
Bölünýänler
Baglanyşykly menýu elementleriniň toparlaryny bölüň.
<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>
Tekst
Islendik erkin form tekstini açylýan menýuda ýerleşdiriň we aralyk hyzmatlaryny ulanyň . Menýu giňligini çäklendirmek üçin size goşmaça ululyk stilleriniň gerekdigini unutmaň.
<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>
Formalar
Açylýan menýuda bir forma goýuň ýa-da açylýan menýuda düzüň we zerur negatiw ýer bermek üçin margin ýa-da padding enjamlaryny ulanyň.
<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-group">
<div class="form-check">
<input type="checkbox" class="form-check-input" id="dropdownCheck">
<label class="form-check-label" for="dropdownCheck">
Remember me
</label>
</div>
</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-group">
<div class="form-check">
<input type="checkbox" class="form-check-input" id="dropdownCheck2">
<label class="form-check-label" for="dropdownCheck2">
Remember me
</label>
</div>
</div>
<button type="submit" class="btn btn-primary">Sign in</button>
</form>
Açylyş opsiýalary
Açylýan ýeri ulanyň data-offset
ýa-da üýtgediň.data-reference
<div class="d-flex">
<div class="dropdown mr-1">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false" data-offset="10,20">
Offset
</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>
</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" data-toggle="dropdown" aria-expanded="false" data-reference="parent">
<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>
</div>
Ulanylyşy
Maglumat atributlary ýa-da JavaScript arkaly, açylýan plugin .show
ene-atanyň synpyny üýtgetmek arkaly gizlin mazmuny (açylýan menýulary) üýtgedýär .dropdown-menu
. Sypat data-toggle="dropdown"
, programma derejesinde açylýan menýulary ýapmak üçin bil baglanýar, şonuň üçin ony hemişe ulanmak gowy pikir.
$.noop
)
işleýjileri
goşýar
. Bu ýigrenji hack,
iOS-nyň çäräniň wekiliýetinde bir çekeleşigiň üstünde işlemek üçin zerurdyr , bu bolsa aşak gaçýan kody açmagynyň öňüni alyp biler. Açylma ýapylansoň, bu goşmaça boş
işleýänler aýrylýar.
mouseover
<body>
mouseover
Maglumat atributlary arkaly
data-toggle="dropdown"
Açylýan zady üýtgetmek üçin baglanyşyk ýa-da düwme goşuň .
<div class="dropdown">
<button type="button" data-toggle="dropdown" aria-expanded="false">
Dropdown trigger
</button>
<div class="dropdown-menu">
...
</div>
</div>
JavaScript arkaly
JavaScript arkaly açylanlara jaň ediň:
$('.dropdown-toggle').dropdown()
data-toggle="dropdown"
henizem talap edilýär
Açylýan ýere JavaScript arkaly jaň edýändigiňize ýa-da ýerine maglumat-api ulanýandygyňyza garamazdan, data-toggle="dropdown"
açylan trigger elementinde elmydama bolmaly.
Görnüş
Opsiýalar maglumat atributlary ýa-da JavaScript arkaly geçirilip bilner. Maglumat atributlary üçin, opsiýanyň adyny data-
bolşy ýaly goşuň data-offset=""
.
Ady | Görnüşi | Bellenen | Düşündiriş |
---|---|---|---|
ofset | sany | setir | funksiýasy | 0 | Maksadyna görä aşak düşýän ofset. Ofset kesgitlemek üçin bir funksiýa ulanylanda, ilkinji argumenti hökmünde ofset maglumatlary öz içine alýan obýekt bilen atlandyrylýar. Funksiýa şol bir gurluşly bir obýekti yzyna gaýtarmaly. Tüweleme elementi DOM düwmesi ikinji argument hökmünde geçýär. Has giňişleýin maglumat üçin Popper-iň ofset resminamalaryna serediň . |
flip | boolean | dogry | Salgy elementiniň üstünde bir-biriniň üstünden düşen ýagdaýynda “Dropdown” -yň süýşmegine rugsat beriň. Has giňişleýin maglumat üçin Popperiň flip resminamalaryna serediň . |
araçäk | setir | elementi | 'scrollParent' | Açylýan menýunyň aşýan çäklendiriji araçägi. 'viewport' ,, ora 'window' - 'scrollParent' da HTMLElement salgylanmasynyň bahalaryny kabul edýär (diňe JavaScript). Has giňişleýin maglumat üçin Popper-iň öňüni alyşOverflow resminamalaryna serediň . |
salgylanma | setir | elementi | 'üýtgetmek' | Açylýan menýunyň salgylanma elementi. 'toggle' Bahalaryny ýa - 'parent' da HTMLElement salgylanmasyny kabul edýär . Has giňişleýin maglumat üçin Popper-iň salgylanmaObject resminamalaryna serediň . |
görkezmek | setir | 'dinamiki' | Düzgüne görä, dinamiki ýerleşiş üçin Popper ulanýarys. Muny öçüriň static . |
popperConfig | null | obýekt | null | Bootstrap-yň deslapky Popper konfigurasiýasyny üýtgetmek üçin Popper-iň konfigurasiýasyna serediň |
Haçan boundary
-da başga bir gymmaty kesgitlenende 'scrollParent'
, stil konteýnerde position: static
ulanylýar ..dropdown
Usullar
Usul | Düşündiriş |
---|---|
$().dropdown('toggle') |
Berlen navbar ýa-da bellikli nawigasiýa açylýan menýusyny üýtgedýär. |
$().dropdown('show') |
Berlen navbar ýa-da bellikli nawigasiýa açylýan menýusyny görkezýär. |
$().dropdown('hide') |
Berlen navbar ýa-da bellikli nawigasiýa açylýan menýusyny gizleýär. |
$().dropdown('update') |
Bir elementiň aşak düşýän ýerini täzeleýär. |
$().dropdown('dispose') |
Bir elementiň gaçmagyny ýok edýär. |
Wakalar
.dropdown-menu
Drophli açylan wakalar ene-atanyň elementine atylýar we relatedTarget
gymmaty üýtgeýän labyr elementi bolan emlägi bar. hide.bs.dropdown
we hidden.bs.dropdown
hadysalarda basmak hadysasy üçin Waka obýektini öz içine alýan häsiýet bar clickEvent
(diňe asyl hadysanyň görnüşi bolanda ).click
Waka | Düşündiriş |
---|---|
show.bs.dropdown |
Bu waka görkeziş usuly çagyrylanda derrew ýanýar. |
shown.bs.dropdown |
Bu waka ulanyja görünen mahaly atylýar (CSS geçişlerine garaşýar). |
hide.bs.dropdown |
Gizlin mysal usuly çagyrylanda bu waka derrew atylýar. |
hidden.bs.dropdown |
Bu waka ulanyjydan gizlenip gutarandan soň (CSS geçişleriniň garaşmagyna garaşýar) atylýar. |
$('#myDropdown').on('show.bs.dropdown', function () {
// do something...
})