Source

Okwehliswayo

Guqula izimbondela zokuqukethwe ukuze ubonise izinhlu zezixhumanisi nokunye okwengeziwe nge-plugin eyehlayo ye-Bootstrap.

Uhlolojikelele

Okwehliswayo kuyaguquleka, imbondela yomongo yokubonisa izinhlu zezixhumanisi nokuningi. Enziwe asebenzisane ne-plugin ye-JavaScript eyehlayo ye-Bootstrap efakiwe. Aguqulwa ngokuchofoza, hhayi ngokuhambisa phezulu; lesi yisinqumo sokuklama ngamabomu.

Okwehliswayo kwakhelwe kulabhulali yezinkampani zangaphandle, i- Popper.js , ehlinzeka ngokuma okuguquguqukayo nokutholwa kwendawo yokubuka. Qiniseka ukuthi ufaka i- popper.min.js ngaphambi kweJavaScript ye-Bootstrap noma sebenzisa bootstrap.bundle.min.js/ bootstrap.bundle.jsequkethe i-Popper.js. I-Popper.js ayisetshenziselwa ukubeka okwehlayo kuma-navbar nakuba ukuma okuguquguqukayo kungadingeki.

Uma wakha i-JavaScript yethu ngomthombo, idingautil.js .

Ukufinyeleleka

Izinga le- WAI ARIArole="menu" lichaza iwijethi yangempela , kodwa lokhu kuqondiswe kumamenyu afana nohlelo lokusebenza aqalisa izenzo noma imisebenzi. Amamenyu e -ARIA angaqukatha kuphela izinto zemenyu, izinto zemenyu yebhokisi lokuhlola, izinto zemenyu yezinkinobho zomsakazo, amaqembu ezinkinobho zomsakazo, namamenyu amancane.

Okwehliswayo kwe-Bootstrap, ngakolunye uhlangothi, kuklanyelwe ukuba kube yijenerikhi futhi kusebenze ezimeni ezahlukahlukene kanye nezakhiwo zokumaka. Isibonelo, kungenzeka ukudala okwehliswayo okuqukethe okokufaka okwengeziwe nezilawuli zefomu, njengezinkambu zokusesha noma amafomu okungena ngemvume. Ngalesi sizathu, i-Bootstrap ayilindele (noma yengeze ngokuzenzakalelayo) noma yiziphi roleizibaluli aria-ezidingekayo kumamenyu e -ARIA eqiniso. Ababhali kuyodingeka bafake lezi zibaluli eziqondile ngokwabo.

Kodwa-ke, i-Bootstrap iyengeza usekelo olwakhelwe ngaphakathi lokusebenzisana kwemenyu yekhibhodi ejwayelekile, njengokukwazi ukuhamba phakathi .dropdown-itemkwezakhi ngazinye usebenzisa okhiye bekhesa nokuvala imenyu ESCngokhiye.

Izibonelo

Goqa inguquko yokudonsela phansi (inkinobho noma isixhumanisi sakho) kanye nemenyu yokudonsela phansi ngaphakathi .dropdown, noma enye into ememezela position: relative;. Okwehliswayo kungase kuqaliswe kusuka <a>noma ama <button>-elementi ukuze kulingane kangcono nezidingo zakho ezingaba khona.

Inkinobho eyodwa

Noma iyiphi ingoma eyodwa .btningashintshwa ibe okokudonsela phansi ngezinye izinguquko zemakhaphu. Nansi indlela ongazisebenzisa ngayo noma yiziphi <button>izici:

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

Futhi ngama- <a>elementi:

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

Ingxenye engcono kakhulu ukuthi ungakwenza lokhu nganoma yikuphi okuhlukile kwenkinobho, futhi:

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

Inkinobho yokuhlukanisa

Ngokufanayo, dala okwehliswayo kwenkinobho yokuhlukanisa okunophawu olufanayo nolwehlayo lwenkinobho eyodwa, kodwa ngokungezwa kwesikhala .dropdown-toggle-splitesifanele endaweni yokunakekela okwehlayo.

Sisebenzisa lesi sigaba esengeziwe ukuze sinciphise okuvundlile paddingnhlangothi zombili ze-caret ngo-25% futhi sisuse margin-leftlokho okwengezwe ekwehliseni phansi kwezinkinobho ezivamile. Lezo zinguquko ezengeziwe zigcina i-caret igxile enkinobheni yokuhlukanisa futhi inikeza indawo yokushaya enosayizi ofanele eduze kwenkinobho eyinhloko.

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

Ukulinganisa

Okwehliswayo kwezinkinobho kusebenza ngezinkinobho zabo bonke osayizi, okuhlanganisa nezinkinobho ezizenzakalelayo nezihlukanisayo ezidonsela phansi.

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

Izikhombisi-ndlela

Ukwehliswa

Qalisa amamenyu okwehlayo ngenhla kwezici ngokwengeza .dropupkusici esingumzali.

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

I-Droright

Qalisa amamenyu okwehlayo kwesokudla sezakhi ngokwengeza .droprightkusici esingumzali.

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

I-Dropleft

Qalisa amamenyu okwehlayo kwesokunxele sezinto ngokwengeza .dropleftkusici esingumzali.

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

Ngokomlando okuqukethwe kwemenyu eyehlayo bekufanele kube izixhumanisi, kodwa akusenjalo nge-v4. Manje ungakhetha ukusebenzisa <button>izici kokwehliswayo kwakho esikhundleni sika- <a>s nje.

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

Ungakwazi futhi ukudala izinto ezidonsela phansi ezingasebenzisani nge- .dropdown-item-text. Zizwe ukhululekile ukwenza isitayela ngokuqhubekayo nge-CSS yangokwezifiso noma izinsiza zombhalo.

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

Iyasebenza

Engeza .activeezintweni kokwehliswayo ukuze wenze isitayela njengezisebenzayo .

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

Ikhutshaziwe

Engeza .disabledezintweni kokwehliswayo ukuze wenze isitayela njengezikhutshaziwe .

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

Ngokuzenzakalelayo, imenyu yokudonsela phansi imiswa ngokuzenzakalelayo ngo-100% ukusuka phezulu nangakwesokunxele somzali wayo. Engeza .dropdown-menu-rightkokuthi a .dropdown-menuukuze uqondanise kwesokudla imenyu eyehlayo.

Amakhanda phezulu! Okwehliswayo kubekwe ngenxa ye-Popper.js (ngaphandle uma kuqukethwe ku-navbar).

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

Izihloko

Engeza unhlokweni kulebula izigaba zezenzo kunoma iyiphi imenyu eyehlayo.

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

Abahlukanisi

Hlukanisa amaqembu ezinto zemenyu ezihlobene ngesihlukanisi.

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

Umbhalo

Beka noma imuphi umbhalo we-freeform ngaphakathi kwemenyu eyehlayo onombhalo futhi usebenzise izinsiza zokuhlukanisa isikhala . Qaphela ukuthi cishe uzodinga izitayela zokulinganisa ezengeziwe ukuze ucindezele ububanzi bemenyu.

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

Amafomu

Faka ifomu kumenyu eyehlayo, noma ulenze libe yimenyu eyehlayo, bese usebenzisa imajini noma izinto zokunamathisela ukuze ulinikeze isikhala esingesihle osidingayo.

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

Sebenzisa data-offsetnoma data-referenceushintshe indawo yokudonsela phansi.

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

Ukusetshenziswa

Ngezibaluli zedatha noma i-JavaScript, i-plugin eyehlayo iguqula okuqukethwe okufihliwe (amamenyu okwehliswayo) ngokuguqula .showikilasi entweni yohlu lwabazali. Isibaluli data-toggle="dropdown"kuthenjelwe kuso ekuvaleni amamenyu okwehlayo ezingeni lesicelo, ngakho-ke kuwumqondo omuhle ukusisebenzisa njalo.

Kumadivayisi anikwe amandla ukuthinta, ukuvula okwehliswayo kwengeza izibambi ezingenalutho ( $.noop) mouseoverezinganeni eziseduze ze- <body>elementi. Lokhu kugebenga okuvunyiwe ukuthi kubi kuyadingeka ukuze kulungiswe okuthile ekuthunyelweni komcimbi we-iOS , okungavimbela ukuthepha noma yikuphi ngaphandle kokwehliswayo ukuthi kungacuphi ikhodi evala okwehliswayo. Uma okwehliswayo sekuvaliwe, lezi mouseoverzibambi ezengeziwe ezingenalutho ziyasuswa.

Ngezibaluli zedatha

Engeza data-toggle="dropdown"kusixhumanisi noma inkinobho ukuze uguqule okwehliswayo.

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

Nge-JavaScript

Shayela okwehliswayo nge-JavaScript:

$('.dropdown-toggle').dropdown()
data-toggle="dropdown"kusadingeka

Kungakhathaliseki ukuthi ushayela okwehliswayo ucingo nge-JavaScript noma esikhundleni salokho sebenzisa i-data-api, data-toggle="dropdown"kuyadingeka njalo ukuthi ube khona kusici sokuqala sokwehliswayo.

Izinketho

Izinketho zingadluliswa ngezibaluli zedatha noma i-JavaScript. Ukuze uthole izibaluli zedatha, faka igama lenketho kokuthi data-, njengaku data-offset="".

Igama Uhlobo Okuzenzakalelayo Incazelo
offset inombolo | umucu | umsebenzi 0 I-offset yokwehliswayo ihlobene nethagethi yakhona. Ukuze uthole ulwazi olwengeziwe bheka ku-Popper.js's offset docs .
flip boolean iqiniso Vumela Okwehlayo ukuthi kuphendulwe uma kwenzeka kugqagqana kusici sesithenjwa. Ukuze uthole ulwazi olwengeziwe bheka ku-Popper.js's flip docs .
umngcele umucu | isici 'scrollParent' Umkhawulo womkhawulo wokuchichima wemenyu eyehlayo. Yamukela amanani we- 'viewport', 'window', 'scrollParent', noma ireferensi ye-HTMLElement (JavaScript kuphela). Ukuze uthole ulwazi olwengeziwe bheka ku-Popper.js's preventOverflow amadokhumenti .
ireferensi umucu | isici 'guqula' Isici esiyisethenjwa semenyu eyehlayo. Yamukela amanani okuthi 'toggle', 'parent', noma ireferensi Yesici se-HTML. Ukuze uthole ulwazi olwengeziwe bheka ku-Popper.js's referenceObject amadokhumenti .
isibonisi umucu 'dynamic' Ngokuzenzakalelayo, sisebenzisa i-Popper.js ekumiseni okuguquguqukayo. Khubaza lokhu nge- static.

Qaphela boundaryukuthi isethwe nini kunoma yiliphi inani ngaphandle kokuthi 'scrollParent', isitayela position: staticsisetshenziswa .dropdownesitsheni.

Izindlela

Indlela Incazelo
$().dropdown('toggle') Iguqula imenyu eyehlayo ye-navbar enikeziwe noma ukuzulazula okunethebhu.
$().dropdown('update') Ibuyekeza indawo yokudonsela phansi kwe-elementi.
$().dropdown('dispose') Icekela phansi i-elementi.

Imicimbi

Yonke imicimbi eyehliswayo ixoshwa ku- .dropdown-menuelementi engumzali futhi relatedTargetinendawo, inani layo eliyi-elementi yehange eshintshayo. hide.bs.dropdownfuthi hidden.bs.dropdownimicimbi clickEventinesici (kuphela uma uhlobo lomcimbi wangempela luyi click) equkethe Into Yomcimbi yomcimbi wokuchofoza.

Umcimbi Incazelo
show.bs.dropdown Lo mcimbi uvutha ngokushesha lapho indlela yesibonelo sombukiso ibizwa.
shown.bs.dropdown Lo mcimbi uxoshwa lapho okwehliswayo kwenziwe kwabonakala kumsebenzisi (sizolinda izinguquko ze-CSS, ukuze ziqedele).
hide.bs.dropdown Lo mcimbi uxoshwa ngokushesha lapho indlela yokufihla isibiziwe.
hidden.bs.dropdown Lo mcimbi uxoshwa lapho okwehliswayo sekuqedile ukufihlwa kumsebenzisi (kuzolinda izinguquko ze-CSS, ukuze ziqedele).
$('#myDropdown').on('show.bs.dropdown', function () {
  // do something…
})