E hoʻololi i nā uhi ʻokoʻa no ka hōʻike ʻana i nā papa inoa o nā loulou a me nā mea hou aku me ka Bootstrap dropdown plugin.
Nānā nui
Hiki ke hoʻololi ʻia nā hāʻule iho, nā overlay contextual no ka hōʻike ʻana i nā papa inoa o nā loulou a me nā mea hou aku. Hoʻopili ʻia lākou me ka plugin Bootstrap dropdown JavaScript plugin. Hoʻololi ʻia lākou ma ke kaomi ʻana, ʻaʻole ma ka lele ʻana; he hoʻoholo manaʻo hoʻolālā kēia.
Kūkulu ʻia nā dropdown ma kahi waihona ʻaoʻao ʻekolu, ʻo Popper.js , kahi e hāʻawi ai i ke kūlana hoʻoikaika a me ka ʻike ʻana. E ʻoluʻolu e hoʻokomo i ka popper.min.js ma mua o kā Bootstrap JavaScript a i ʻole hoʻohana bootstrap.bundle.min.js/ bootstrap.bundle.jsaia i loko o Popper.js. ʻAʻole hoʻohana ʻia ʻo Popper.js e hoʻonoho i nā hāʻule i lalo i nā navbars ʻoiai ʻaʻole koi ʻia ke kūlana hoʻoikaika.
Inā ʻoe e kūkulu nei i kā mākou JavaScript mai ke kumu, ponoutil.js ia .
Hiki ke komo
ʻO ka WAI ARIA maʻamau ka wehewehe ʻana i kahi role="menu"widget maoli , akā kikoʻī kēia i nā menus e like me ka noi e hoʻomaka ai i nā hana a i ʻole nā hana. Hiki i nā papa kuhikuhi ARIA ke loaʻa nā mea papa inoa, nā mea koho pahu pahu, nā mea papa kuhikuhi kīwila, nā pūʻulu pihi lekiō, a me nā papa kuhikuhi.
ʻO nā hāʻule iho o Bootstrap, ma ka ʻaoʻao ʻē aʻe, ua hoʻolālā ʻia i mea maʻamau a pili i nā ʻano kūlana like ʻole a me nā hoʻolālā markup. No ka laʻana, hiki ke hana i nā hāʻule iho i loaʻa nā mea hoʻokomo hou a me nā mana hoʻoponopono, e like me nā kahua ʻimi a i ʻole nā palapala komo. No kēia kumu, ʻaʻole manaʻo ʻo Bootstrap (ʻaʻole hoʻohui ʻokoʻa) i kekahi o nā ʻano rolea me aria-nā ʻano i koi ʻia no nā menus ARIA ʻoiaʻiʻo. Pono nā mea kākau e hoʻokomo i kēia mau ʻano kikoʻī iā lākou iho.
Eia nō naʻe, hoʻohui ʻo Bootstrap i ke kākoʻo i kūkulu ʻia no ka hapa nui o nā papa kuhikuhi papa kuhikuhi maʻamau, e like me ka hiki ke neʻe i nā .dropdown-itemmea hoʻokahi me ka hoʻohana ʻana i nā kī cursor a pani i ka papa kuhikuhi me ke ESCkī.
Nā laʻana
E kāʻei i ke koli o ka hāʻule iho (kāu pihi a i ʻole ka loulou) a me ka papa kuhikuhi hāʻule i loko o .dropdown, a i ʻole kekahi mea e hōʻike ana position: relative;. Hiki ke hoʻoulu ʻia nā dropdowns mai <a>nā mea ʻē <button>aʻe i kūpono i kāu mau pono kūpono.
pihi hoʻokahi
Hiki ke hoʻololi ʻia kēlā me kēia i kahi .btnhoʻololi i lalo me kekahi mau hoʻololi markup. Eia pehea ʻoe e hoʻohana ai iā lākou me nā <button>mea ʻelua:
Pēlā nō, e hana i nā pihi hoʻokaʻawale me ka hoʻohālikelike like ʻana me nā pihi hoʻokahi, akā me ka hoʻohui ʻana .dropdown-toggle-splitno ka spacing kūpono a puni ka dropdown caret.
Hoʻohana mākou i kēia papa ʻē aʻe e hōʻemi i ka pae ākea paddingma kēlā ʻaoʻao kēia ʻaoʻao o ka caret e 25% a wehe i ka margin-leftmea i hoʻohui ʻia no ka hāʻule iho o nā pihi maʻamau. ʻO kēlā mau hoʻololi ʻē aʻe e hoʻomau i ka mālama mālama i ke pihi hoʻokaʻawale a hāʻawi i kahi ʻāpana kūpono kūpono ma ka ʻaoʻao o ke pihi nui.
Pono nā loulou i ka papa kuhikuhi papa kuhikuhi moʻolelo , akā ʻaʻole ia ka hihia me v4. I kēia manawa hiki iā ʻoe ke hoʻohana i <button>nā mea i loko o kāu dropdown ma kahi o <a>s wale nō.
Hiki nō hoʻi iā ʻoe ke hana i nā mea hoʻokuʻu i lalo me ka .dropdown-item-text. E ʻoluʻolu e hana hou aku me ka CSS maʻamau a i ʻole nā mea pono kikokikona.
Ma ka maʻamau, hoʻonoho ʻia ka papa kuhikuhi iho i lalo 100% mai luna a ma ka ʻaoʻao hema o kona makua. Hoʻohui .dropdown-menu-righti kahi .dropdown-menue hoʻolike ʻākau i ka papa kuhikuhi hāʻule iho.
Nā poʻo i luna! Hoʻonoho ʻia nā hāʻule i lalo e mahalo iā Popper.js (koe wale nō ke kau ʻia i loko o kahi navbar).
Menu maʻiʻo
Nā poʻomanaʻo
Hoʻohui i kahi poʻomanaʻo e hōʻailona i nā ʻāpana o nā hana ma kekahi papa kuhikuhi.
E kau i kekahi kikokikona manuahi i loko o kahi papa kuhikuhi i lalo me ka kikokikona a hoʻohana i nā pono hana spacing . E hoʻomanaʻo e pono paha ʻoe i nā ʻano nui ʻē aʻe e kāohi i ka laulā papa kuhikuhi.
ʻO kekahi laʻana kikokikona e kahe manuahi ana i loko o ka papa kuhikuhi.
A he laʻana kikokikona hou aʻe kēia.
Nā palapala
E hoʻokomo i kahi palapala i loko o kahi papa kuhikuhi hāʻule, a i ʻole e hoʻolilo iā ia i loko o kahi papa kuhikuhi, a hoʻohana i ka margin a i ʻole nā mea padding e hāʻawi iā ia i kahi kūpono ʻole āu e makemake ai.
Ma o nā ʻikepili ʻikepili a i ʻole JavaScript, ua hoʻololi ka plugin dropdown i nā ʻike huna (nā menus dropdown) ma ka hoʻololi ʻana i ka .showpapa ma ka mea papa inoa makua. Ua data-toggle="dropdown"hilinaʻi ʻia ka ʻano no ka pani ʻana i nā menus dropdown ma kahi pae noi, no laila he manaʻo maikaʻi e hoʻohana mau ia.
Ma nā hāmeʻa hiki ke hoʻopā, wehe i kahi hāʻule i lalo e hoʻohui i nā mea lima ʻole ( $.noop) mouseoveri nā keiki koke o ka <body>mea. Pono kēia hack ʻino ʻino e hana a puni i kahi quirk i ka ʻelele hanana hanana ʻo iOS , i ʻole e pale i kahi paʻi ma waho o ka hāʻule iho mai ka hoʻomaka ʻana i ke code e pani i ka hāʻule. Ke pani ʻia ka hāʻule iho mouseover, wehe ʻia kēia mau mea lima ʻole.
Ma o nā hiʻohiʻona ʻikepili
Hoʻohui data-toggle="dropdown"i kahi loulou a i ʻole pihi e hoʻololi i kahi hāʻule iho.
Ma o JavaScript
Kāhea i nā hāʻule iho ma o JavaScript:
data-toggle="dropdown"koi mau
Inā ʻoe e kāhea i kāu hāʻule iho ma o JavaScript a i ʻole e hoʻohana i ka data-api, data-toggle="dropdown"pono mau e noho ma ka mea hoʻoiho o ka dropdown.
Nā koho
Hiki ke hāʻawi ʻia nā koho ma o nā ʻikepili a i ʻole JavaScript. No nā ʻano ʻikepili, e hoʻopili i ka inoa koho i data-, e like me ka data-offset="".
inoa
ʻAno
Default
wehewehe
offset
helu | kaula | hana
0
Offset o ka hāʻule iho e pili ana i kāna pahu hopu. No ka ʻike hou aku e nānā i nā palapala offset a Popper.js .
hoʻohuli
boolean
ʻoiaʻiʻo
E ʻae i ka Dropdown e hoʻohuli i ka wā e kau ana ma luna o ka mea kuhikuhi. No ka ʻike hou aku, e nānā i nā palapala flip a Popper.js .
palena
kaula | ʻeleʻele
'scrollParent'
ʻO ka palena palena o ka papa kuhikuhi. ʻAe i nā waiwai o 'viewport', 'window', 'scrollParent', a i ʻole HTMLElement reference (JavaScript wale nō). No ka ʻike hou aku e nānā i nā palapala preventOverflow a Popper.js .
kuhikuhi
kaula | ʻeleʻele
'hoololi'
Mea kuhikuhi o ka papa kuhikuhi. ʻAe i nā waiwai o 'toggle', 'parent', a i ʻole HTMLElement reference. No ka 'ike hou aku, e nānā i ka Popper.js's referenceObject docs .
hōʻike
kaulahao
'dynamic'
Ma ka paʻamau, hoʻohana mākou iā Popper.js no ka hoʻonohonoho ʻana. Hoʻopau i kēia me static.
E hoʻomaopopo i ka wā boundaryi hoʻonoho ʻia ai i kekahi waiwai ʻē aʻe ma mua o 'scrollParent', ua pili ke ʻano position: statici ka .dropdownipu.
Nā ʻano hana
Kaʻina hana
wehewehe
$().dropdown('toggle')
Hoʻololi i ka papa kuhikuhi hāʻule iho o kahi hoʻokele hoʻokele i hāʻawi ʻia.
$().dropdown('update')
Hoʻohou i ke kūlana o ka hāʻule iho o kahi mea.
$().dropdown('dispose')
Hoʻopau i ka hāʻule iho o kahi mea.
Nā hanana
Hoʻopau ʻia nā hanana hāʻule i lalo i ka ʻeleʻele .dropdown-menumakua a loaʻa iā ia kahi relatedTargetwaiwai, nona ka waiwai o ka mea heleuma e hoʻohuli ana. hide.bs.dropdowna hidden.bs.dropdownhe clickEventwaiwai ko nā hanana (ʻo ia wale nō ke ʻano hanana kumu click) i loaʻa i kahi hanana hanana no ka hanana kaomi.
Hanana
wehewehe
show.bs.dropdown
Hoʻopau koke ʻia kēia hanana ke kāhea ʻia ke ʻano hana hōʻike.
shown.bs.dropdown
Hoʻopau ʻia kēia hanana i ka wā i ʻike ʻia ai ka hāʻule iho i ka mea hoʻohana (e kali no nā hoʻololi CSS, e hoʻopau).
hide.bs.dropdown
Hoʻopau koke ʻia kēia hanana i ka wā i kāhea ʻia ai ke ʻano hide instance.
hidden.bs.dropdown
Hoʻopau ʻia kēia hanana i ka pau ʻana o ka hūnā ʻia mai ka mea hoʻohana (e kali no ka hoʻololi CSS, e hoʻopau).