Source

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şi we görnüşi kesgitlemegi üpjün edýän Popper.js üçünji tarap kitaphanasynda gurulýar . Bootstrap-yň JavaScript-den öň popper.min.js-i goşuň ýa-da Popper.js - i öz içine alýan bootstrap.bundle.min.js/ ulanyň. bootstrap.bundle.jsPopper.js dinamiki ýerleşiş talap edilmeýänligi sebäpli, deňiz panellerinde aşak 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üwme 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 elementler ýüze çykyp biler .<button>

Buttoneke düwme

Islendik .btnbelligi käbir üýtgeşmeler bilen açylan açyklyga öwrüp bolýar. <button>Olary iki element bilen işlemek üçin nädip goýup bilersiňiz :

Action Another action Something else here 
<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>Elementler bilen :

Action Another action Something else here 
<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>

Iň gowy tarapy, muny islendik düwme görnüşi bilen hem edip bilersiňiz:

Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link 
<!-- 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>

Düwmeleriň açylan ýerlerini bölüň

Edil şonuň ýaly-da, bir düwmäniň aşak gaçmagy bilen birmeňzeş bellik bilen bölünen düwme açylmalaryny dörediň, ýöne .dropdown-toggle-splitaçylýan karetiň töwereginde dogry aralyk goşmak bilen.

paddingKaretiň iki gapdalyndaky keseligine 25% azaltmak we margin-leftyzygiderli 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.

Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link 
<!-- 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>

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

Damjanyň üýtgemegi

Esasy elemente goşup .dropup, aşaky menýulary elementleriň üstünde işlediň.

Action Another action Something else here
Separated link
Action Another action Something else here
Separated link 
<!-- 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>

Göçme manyda üýtgeşiklik

Esasy elemente goşup, elementleriň sag tarapynda açylan menýulary işlediň .dropright.

Action Another action Something else here
Separated link
Action Another action Something else here
Separated link 
<!-- 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>

Damjanyň üýtgemegi

.dropleftEne elementine goşmak bilen elementleriň çep tarapynda açylan menýulary işlediň .

Action Another action Something else here
Separated link
Action Another action Something else here
Separated link 
<!-- 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>

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

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 saga deňleşdirmek üçin saga .dropdown-menu-rightgoşuň ..dropdown-menu

Başlar! Açylýan ýerler Popper.js-iň kömegi bilen ýerleşýär (deňiz panelinde bolanyndan başga).

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

Islendik açylýan menýuda hereketleriň bölümlerini bellemek üçin sözbaşy goşuň.

Açylýan sözbaşy
Hereket Başga bir hereket 
<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>

Baglanyşykly menýu elementleriniň toparlaryny bölüň.

Hereket Başga bir hereket Bu ýerde başga bir zat
Aýry-aýry baglanyşyk 
<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>

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

Bu ýerde täze? Hasaba giriň Paroly ýatdan çykardyňyzmy? 
<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>

Işjeň menýu elementleri

Aktiw.active görnüşde düzmek üçin açylan elementlere goşuň .

Yzygiderli baglanyşyk Işjeň baglanyşyk Başga bir baglanyşyk 
<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>

Menýu elementleri ýapyk

.disabledAçyk görnüşdäki zatlary goşuň , olary ýapyk görnüşde düzüň .

Yzygiderli baglanyşyk Öçürilen baglanyşyk Başga bir baglanyşyk 
<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>

Ulanylyşy

.showMaglumat atributlary ýa-da JavaScript arkaly, açylan plugin ene mazmuny sanawynda synpy üýtgedip gizlin mazmuny (açylýan menýular) üýtgedýär . Bu data-toggle="dropdown"aýratynlyk, programma derejesinde açylýan menýulary ýapmak üçin bil baglanýar, şonuň üçin ony hemişe ulanmak gowy zat.

Duýgurlyk bilen işleýän enjamlarda, açylmany açmak elementiň ýakyn çagalaryna boş ( $.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çylan zady üýtgetmek üçin baglanyşyk ýa-da düwme goşuň .

<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 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. Has giňişleýin maglumat üçin Popper.js-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 Popper.js-iň 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.js-iň öňüni alyş resminamalaryna serediň .

Haçan boundary-da başga bir gymmaty kesgitlenende 'scrollParent', stil konteýnerde position: staticulanylýar ..dropdown

Usullar

Usul Düşündiriş
$().dropdown('toggle') Berlen navbar ýa-da bellikli nawigasiýa açylýan menýusyny üýtgedýär.
$().dropdown('update') Bir elementiň aşak düşýän ýerini täzeleýär.
$().dropdown('dispose') Bir elementiň gaçmagyny ýok edýär.

Wakalar

.dropdown-menuDrophli açylan wakalar ene-atanyň elementine atylýar we relatedTargetgymmaty üýtgeýän labyr elementi bolan emlägi bar.

Waka Düşündiriş
show.bs.dropdown Bu waka görkeziş usuly çagyrylanda derrew ýanýar.
shown.bs.dropdown Bu waka ulanyja açyk görkezilende (CSS geçişleriniň garaşmagyna garaşýar) atylý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şlerine garaşar) atylýar. 
$('#myDropdown').on('show.bs.dropdown', function () {
  // do something…
})