Tog ath-chòmhdach co-theacsail gus liostaichean de cheanglaichean agus barrachd a thaisbeanadh leis a’ plugan tuiteam-sìos Bootstrap.
Ro-shealladh
Tha dropdowns nan ath-chòmhdach co-theacsail toggle airson liostaichean de cheanglaichean agus barrachd a thaisbeanadh. Tha iad air an dèanamh eadar-ghnìomhach leis a’ plugan tuiteam-sìos Bootstrap JavaScript. Tha iad air an togail le cliogadh, chan ann le hovering; is e co-dhùnadh dealbhaidh a tha seo a dh’aona ghnothach.
Tha dropdowns air an togail air leabharlann treas pàrtaidh, Popper.js , a bheir seachad suidheachadh fiùghantach agus lorg sealladh. Dèan cinnteach gun cuir thu a-steach popper.min.js ro JavaScript Bootstrap no cleachd bootstrap.bundle.min.js/ bootstrap.bundle.jsanns a bheil Popper.js. Chan eil Popper.js air a chleachdadh gus dropdowns a shuidheachadh ann am bàraichean seòlaidh ged nach eil feum air suidheachadh fiùghantach.
Ma tha thu a’ togail ar JavaScript bhon tùs, feumaidhutil.js e .
Ruigsinneachd
Tha inbhe WAI ARIA a’ mìneachadh fìor role="menu"widget , ach tha seo sònraichte do chlàran-bìdh coltach ri tagradh a bhrosnaicheas gnìomhan no gnìomhan. Chan fhaod a bhith ann an clàir-bìdh ARIA ach nithean clàr, nithean clàr bogsa-seic, nithean clàr putan rèidio, buidhnean putan rèidio, agus fo-chlàran.
Air an làimh eile, tha dropdowns Bootstrap air an dealbhadh gus a bhith coitcheann agus iomchaidh airson grunn shuidheachaidhean agus structaran comharrachaidh. Mar eisimpleir, tha e comasach dropdowns a chruthachadh anns a bheil cuir a-steach a bharrachd agus smachdan foirm, leithid raointean sgrùdaidh no foirmean logadh a-steach. Air an adhbhar seo, chan eil Bootstrap a’ dùileachadh (no a’ cur ris gu fèin-ghluasadach) gin de na roleagus na aria-buadhan a tha riatanach airson fìor chlàran ARIA . Feumaidh ùghdaran na buadhan nas sònraichte sin a ghabhail a-steach iad fhèin.
Ach, bidh Bootstrap a’ cur taic a-staigh airson a’ mhòr-chuid de eadar-obrachaidhean clàr meur-chlàr àbhaisteach, leithid an comas gluasad tro .dropdown-itemeileamaidean fa leth a’ cleachdadh iuchraichean a’ chursair agus an clàr a dhùnadh leis an ESCiuchair.
Eisimpleirean
Còmhdaich tog an tuiteam-sìos (am putan no an ceangal agad) agus an clàr a-nuas taobh a-staigh .dropdown, no eileamaid eile a dhearbhas position: relative;. Faodar dropdowns a bhrosnachadh bho <a>no <button>eileamaidean a fhreagras air na feumalachdan a dh’ fhaodadh a bhith agad.
Putan singilte
Faodar singilte sam bith .btna thionndadh gu bhith na tog sìos le beagan atharrachaidhean comharrachaidh. Seo mar as urrainn dhut an cur gu obair le gach <button>eileamaid:
San aon dòigh, cruthaich dropdowns putan sgoltadh le cha mhòr an aon chomharra ri tuiteam sìos putan singilte, ach le bhith a’ cur a-steach .dropdown-toggle-splitfarsaingeachd cheart timcheall air a ’chùram tuiteam-sìos.
Bidh sinn a’ cleachdadh a’ chlas a bharrachd seo gus a’ chòmhnard paddingair gach taobh den chùram a lughdachadh 25% agus thoir air falbh an margin-leftfheadhainn a tha air a chur ris airson putanan sìos gu cunbhalach. Bidh na h-atharrachaidhean a bharrachd sin a’ cumail a’ chùram sa mheadhan anns a’ phutan sgoltadh agus a’ toirt seachad àite bualaidh nas freagarraiche ri taobh a’ phrìomh phutan.
Gu h-eachdraidheil dh'fheumadh susbaint clàr-taice a bhith mar cheanglaichean, ach chan eil sin fìor tuilleadh le v4. A-nis faodaidh tu <button>eileamaidean a chleachdadh gu roghnach anns na dropdowns agad an àite dìreach <a>s.
Faodaidh tu cuideachd nithean tuiteam-sìos neo-eadar-ghnìomhach a chruthachadh le .dropdown-item-text. Faodaidh tu stoidhle a bharrachd a dhèanamh le CSS àbhaisteach no goireasan teacsa.
Gu gnàthach, tha clàr tuiteam-sìos air a shuidheachadh gu fèin-ghluasadach 100% bhon mhullach agus air taobh clì a phàrant. Cuir .dropdown-menu-rightri a .dropdown-menugu deas co-thaobhadh ris a’ chlàr tuiteam-sìos.
Cinn suas! Tha dropdowns air an suidheachadh le taing dha Popper.js (ach a-mhàin nuair a tha iad ann am bàr seòlaidh).
Susbaint clàr-taice
Cinn-cinn
Cuir bann-cinn ris gus earrannan de ghnìomhan a chomharrachadh ann an clàr-taice sam bith.
Cuir teacsa an-asgaidh sam bith taobh a-staigh clàr-taice le teacsa agus cleachd goireasan eadar-dhealaichte . Thoir an aire gur dòcha gum feum thu stoidhlichean meudachaidh a bharrachd gus leud a’ chlàr a chuingealachadh.
Cuid de theacsa eisimpleir a tha a ’sruthadh gu saor taobh a-staigh a’ chlàr tuiteam-sìos.
Agus seo barrachd eisimpleir teacsa.
Foirmean
Cuir foirm taobh a-staigh clàr tuiteam-sìos, no dèan a-steach do chlàr tuiteam-sìos, agus cleachd goireasan iomaill no pleadhaig gus an àite àicheil a tha a dhìth ort a thoirt dha.
Tro bhuadhan dàta no JavaScript, bidh am plugan a tha a’ tuiteam sìos a’ togail susbaint falaichte (clàran-taice sìos) le bhith a’ togail a’ .showchlas air an liosta phàrant. Thathas data-toggle="dropdown"an urra ris a’ fheart airson clàran-bìdh a dhùnadh sìos aig ìre tagraidh, agus mar sin is e deagh bheachd a th’ ann a chleachdadh an-còmhnaidh.
Air innealan le comas suathaidh, bidh fosgladh tuiteam-sìos a’ cur innealan-làimhe falamh ( $.noop) mouseoverris a’ chloinn a tha faisg air làimh den <body>eileamaid. Feumar am hack grànda seo aideachadh gus obrachadh timcheall air quirk ann an tiomnadh tachartais iOS , a chuireadh casg air tap an àite sam bith taobh a-muigh an tuiteam-sìos bho bhith a’ brosnachadh a ’chòd a dhùineas an tuiteam-sìos. Aon uair ‘s gu bheil an tuiteam-sìos dùinte, thèid na mouseoverlàimhseachadh falamh a bharrachd sin a thoirt air falbh.
Tro fheartan dàta
Cuir data-toggle="dropdown"ri ceangal no putan gus tuiteam sìos a thogail.
Air sgàth javascript
Cuir fòn gu na dropdowns tro JavaScript:
data-toggle="dropdown"fhathast a dhìth
Ge bith co-dhiù an cuir thu fios chun chlàr tuiteam-sìos agad tro JavaScript no an àite sin cleachd an data-api, data-toggle="dropdown"feumaidh tu an-còmhnaidh a bhith an làthair air eileamaid brosnachaidh an tuiteam-sìos.
Roghainnean
Faodar roghainnean a thoirt seachad tro bhuadhan dàta no JavaScript. Airson buadhan dàta, cuir ainm an roghainn ri data-, mar ann an data-offset="".
Ainm
Seòrsa
Deònach
Tuairisgeul
dheth
àireamh | sreang | gnìomh
0
Cuir dheth an tuiteam sìos an coimeas ris an targaid aige. Airson tuilleadh fiosrachaidh thoir sùil air na docaichean dheth Popper.js .
flip
boolean
fìor
Leig le Dropdown sleamhnachadh gun fhios nach bi an eileamaid iomraidh a’ dol thairis air. Airson tuilleadh fiosrachaidh thoir sùil air na docaichean flip aig Popper.js .
crìoch
sreang | eileamaid
'scrollParent'
Crìochan casg thar-shruth den chlàr tuiteam-sìos. A’ gabhail ri luachan 'viewport', 'window', , 'scrollParent', no iomradh HTMLElement (JavaScript a-mhàin). Airson tuilleadh fiosrachaidh thoir sùil air na docaichean preventOverflow aig Popper.js .
iomradh
sreang | eileamaid
'tog'
Eileamaid fiosrachaidh den chlàr tuiteam-sìos. A’ gabhail ri luachan 'toggle', 'parent', no iomradh HTMLElement. Airson tuilleadh fiosrachaidh thoir sùil air Popper.jsiomradhObject docs .
taisbeanadh
sreang
'fiùghantach'
Gu gnàthach, bidh sinn a’ cleachdadh Popper.js airson suidheachadh fiùghantach. Cuir seo à comas le static.
Thoir an aire nuair a thèid boundarya shuidheachadh gu luach sam bith a bharrachd air 'scrollParent', tha an stoidhle position: staticair a chuir a-steach don t- .dropdownsoitheach.
Dòighean-obrach
Dòigh-obrach
Tuairisgeul
$().dropdown('toggle')
Tog an clàr-taice sìos de bhàr-seòlaidh ainmichte no seòladh tabaichte.
$().dropdown('update')
Ag ùrachadh suidheachadh tuiteam-sìos eileamaid.
$().dropdown('dispose')
A 'sgrios tuiteam-sìos eileamaid.
Tachartasan
Tha a h-uile tachartas tuiteam-sìos air a losgadh aig an .dropdown-menueileamaid phàrant agus tha relatedTargetseilbh aca, aig a bheil luach mar an eileamaid acair toglach. hide.bs.dropdownagus hidden.bs.dropdowntha seilbh aig tachartasan clickEvent(dìreach nuair a tha an seòrsa tachartais tùsail click) anns a bheil Rud Tachartas airson an tachartas cliog.
Tachartas
Tuairisgeul
show.bs.dropdown
Bidh an tachartas seo a’ losgadh sa bhad nuair a chanar ris an dòigh eisimpleir taisbeanaidh.
shown.bs.dropdown
Thèid an tachartas seo a losgadh nuair a bhios an tuiteam-sìos ri fhaicinn don neach-cleachdaidh (feitheamh ri eadar-ghluasadan CSS, gus a chrìochnachadh).
hide.bs.dropdown
Thèid an tachartas seo a losgadh sa bhad nuair a thèid an dòigh seiche seiche a ghairm.
hidden.bs.dropdown
Thèid an tachartas seo a losgadh nuair a tha an tuiteam-sìos deiseil a bhith falaichte bhon neach-cleachdaidh (feitheamh ri eadar-ghluasadan CSS, gus a chrìochnachadh).