Takahurihia nga whakakikorua horopaki mo te whakaatu i nga rarangi hononga me te maha atu me te Bootstrap takaiho monomai.
Tirohanga
Ka takahurihia nga whakahekenga, he whakakikorua horopaki mo te whakaatu i nga rarangi hononga me etahi atu. He mea tauwhitiwhiti me te whakauru Bootstrap takaiho mono JavaScript. Ka takahurihia ma te panui, kaua ma te whakaparo; he whakatau hoahoa tenei .
Ka hangaia nga whakahekenga ki runga i te whare pukapuka tuatoru, Popper.js , e whakarato ana i te tuunga hihiri me te tirohanga tirohanga. Kia mahara ki te whakauru i te popper.min.js i mua i te JavaScript a Bootstrap me te whakamahi bootstrap.bundle.min.js/ bootstrap.bundle.jskei roto Popper.js. Kare a Popper.js e whakamahia ana ki te tuu i nga takaiho i roto i nga pae whakatere ahakoa kaore e hiahiatia te tuunga hihiri.
Mena kei te hanga koe i to maatau JavaScript mai i te puna, meutil.js .
Te urunga
Ko te paerewa WAI ARIArole="menu" e tautuhi ana i tetahi widget tuuturu , engari he mea motuhake tenei ki nga tahua-a-tono e whakaohooho ana i nga mahi, i nga mahi ranei. Ka taea anake e nga tahua ARIA nga taonga tahua, nga taonga tahua pouakataki, nga taonga tahua patene reo irirangi, nga roopu paatene reo irirangi, me nga tahua-iti.
Ko nga whakahekenga a Bootstrap, i tetahi atu taha, he mea hoahoa kia whanui me te whai waahi ki nga momo ahuatanga me nga hanganga tohu. Hei tauira, ka taea te hanga i nga takaiho kei roto etahi atu whakaurunga me nga mana puka, penei i nga mara rapu me nga puka takiuru. Mo konei, kaore a Bootstrap e tatari (kaore ano e taapiri aunoa) tetahi o nga roleme nga aria-huanga e hiahiatia ana mo nga tahua ARIA pono. Me whakauru e nga kaituhi enei huanga ake ake.
Heoi, ka taapirihia e Bootstrap te tautoko i hangaia mo te nuinga o nga taunekeneke tahua papapātuhi paerewa, penei i te kaha ki te neke i roto i nga .dropdown-itemhuānga takitahi ma te whakamahi i nga kii pehu me te kati i te tahua me te ESCki.
Tauira
Takaia te takahuri o te takaiho (to patene, hono ranei) me te tahua takaiho ki roto .dropdown, tetahi atu huānga ranei e whakaatu ana position: relative;. Ka taea te whakaheke mai i nga huānga <a>ranei <button>kia pai ake ai to hiahia.
Patene kotahi
Ka .btntaea te huri ki te takahuri takahuri me etahi huringa tohu. Anei me pehea e taea ai e koe te mahi me nga <button>huānga e rua:
Waihoki, hangahia nga takahanga patene ritua me te tohu rite tonu ki nga takahanga patene kotahi, engari me te .dropdown-toggle-splittaapiri mo te mokowhiti tika huri noa i te kaata takaiho.
Ka whakamahia e matou tenei karaehe taapiri hei whakaiti i te whakapae paddingi tetahi taha o te kareti ma te 25% me te tango margin-lefti te taapiri mo te whakaheke i nga paatene. Ko enei huringa taapiri ka noho tonu te tiaki ki roto i te paatene wehe me te whakarato i te waahanga tika ake i te taha o te paatene matua.
I nga wa o mua ko nga ihirangi tahua takaiho me hono, engari kua kore e pera me te v4. Inaianei ka taea e koe te whakamahi i <button>nga huānga i roto i o takaiho hei utu <a>s noa.
Ka taea hoki e koe te hanga i nga taonga takaiho-kore me te .dropdown-item-text. Kaua e pai ki te hanga taapiri me te CSS ritenga me nga taputapu tuhinga.
Ma te taunoa, ka tuu aunoa he tahua takaiho 100% mai i runga me te taha maui o tona matua. Tāpirihia .dropdown-menu-rightki te .dropdown-menutaha matau tiaarohia te tahua takaiho.
Mahunga ake! Whakatakotohia te tuunga he mihi ki a Popper.js (haunga ina kei roto i te pae whakatere).
Tirohanga aro
Mena kei te pirangi koe ki te whakamahi i te tirohanga urupare, monohia te tuunga hihiri ma te taapiri i te data-display="static"huanga me te whakamahi i nga karaehe rerekee urupare.
Hei whakahāngai matau i te tahua takaiho ki te waahi wehe, nui ake ranei, taapirihia .dropdown-menu{-sm|-md|-lg|-xl}-right.
Hei whakahāngai i te tahua takaiho ki te taha maui ki te waahi wehe, nui ake ranei, taapiri .dropdown-menu-rightme te .dropdown-menu{-sm|-md|-lg|-xl}-left.
Kia mahara kaore koe e hiahia ki te taapiri i tetahi data-display="static"huanga ki nga paatene takaiho i roto i nga pae whakatere, i te mea kaore a Popper.js i te whakamahi i nga pae whakatere.
Ihirangi tahua
Pane
Tāpirihia he pane hei tapanga i nga waahanga o nga hohenga ki tetahi tahua takaiho.
Whakanohoia he kupu tuhi noa ki roto i te tahua takaiho me te tuhinga me te whakamahi taputapu mokowhiti . Kia mahara ka hiahia koe ki etahi atu momo rahinga hei aukati i te whanui tahua.
Ko etahi tauira kuputuhi e rere noa ana i roto i te tahua takaiho.
A he tuhinga tauira ake tenei.
Puka
Tuhia he puka ki roto i te tahua takaiho, waiho ranei ki roto i te tahua takaiho, ka whakamahi i te tawhē, i nga taputapu padding ranei hei hoatu i te waahi kino e hiahia ana koe.
Ma nga huanga raraunga, JavaScript ranei, ka takahurihia e te mono takaiho nga ihirangi huna (nga tahua takaiho) ma te takahuri i te .showkaraehe ki te rarangi matua. Ka whakawhirinakihia te data-toggle="dropdown"huanga mo te kati i nga tahua takaiho i te taumata tono, no reira he pai ki te whakamahi i nga wa katoa.
I runga i nga taputapu pa-whakahohe, te whakatuwhera i te takaiho ka taapirihia nga kaikawe ( $.noop) putua mouseoverki nga tamariki tonu o te <body>huānga. Ko tenei hack tino kino he mea tika ki te mahi i tetahi quirk i roto i te roopu huihuinga a iOS , ka kore e taea te paopao ki tetahi wahi i waho o te maturuturunga iho mai i te whakaoho i te waehere ka kati i te takaiho. Ina katia te takaiho, ka mouseovertangohia enei kaihautu putunga.
Ma nga huanga raraunga
Tāpirihia data-toggle="dropdown"ki tētahi hono, pātene rānei hei takahuri i te takaiho.
Ma te JavaScript
Karangatia nga takaiho ma te JavaScript:
data-toggle="dropdown"hiahiatia tonu
Ahakoa ka karanga koe i to takaiho ma te JavaScript, me whakamahi ranei i te raraunga-api, data-toggle="dropdown"me noho tonu koe ki te huānga whakaoho o te takaiho.
Kōwhiringa
Ko nga whiringa ka taea te tuku ma nga huanga raraunga, JavaScript ranei. Mo nga huanga raraunga, apitihia te ingoa whiringa ki data-, penei i te data-offset="".
Ingoa
Momo
Taunoa
Whakaahuatanga
whakatiki
tau | aho | mahi
0
Wehenga o te takaiho e pa ana ki tana whaainga.
Ina whakamahia he taumahi ki te whakatau i te wehenga, ka karangahia me tetahi ahanoa kei roto nga raraunga whakawhiwhinga hei tohenga tuatahi. Me whakahoki te mahi i tetahi mea he rite tonu te hanganga. Ka tukuna te node DOM huānga whakaoho hei tohenga tuarua.
Mo etahi atu korero tirohia nga tuhinga a Popper.js .
takahuri
boolean
pono
Whakaaetia te Whakataka ki te huri i te mea kei te inaki te huānga tohutoro. Mo etahi atu korero tirohia nga tuhinga whakawhiti a Popper.js .
rohe
aho | huānga
'scrollParent'
Te rohe herenga waipuke o te tahua takaiho. Ka whakaae ki nga uara o 'viewport', 'window', 'scrollParent', he tohutoro HTMLElement ranei (JavaScript anake). Mo etahi atu korero tirohia nga tuhinga a Popper.js preventOverflow .
tohutoro
aho | huānga
'takahuri'
Huānga tohutoro o te tahua takaiho. Ka whakaae ki nga uara o 'toggle', 'parent', he tohutoro HTMLElement ranei. Mo etahi atu korero tirohia nga tuhinga a Popper.js referenceObject .
whakaatu
aho
'he hihiri'
Ma te taunoa, ka whakamahia e matou te Popper.js mo te tuunga hihiri. Monokia tenei ki te static.
Kia mahara ki te wa boundaryka tautuhia ki tetahi uara atu i 'scrollParent'te , ka tukuna te ahua position: staticki te .dropdownipu.
Nga tikanga
Tikanga
Whakaahuatanga
$().dropdown('toggle')
Ka takahuri i te tahua takaiho o te pae whakaterenga kua tohua, te whakatere ripa ranei.
$().dropdown('show')
He whakaatu i te tahua takaiho o te pae whakaterenga kua tohua, te whakatere ripa ranei.
$().dropdown('hide')
Hunaia te tahua takaiho o te pae whakaterenga kua tohua, te whakatere ripa ranei.
$().dropdown('update')
He whakahōu i te tūnga o te takaiho o te huānga.
$().dropdown('dispose')
Ka whakakore i te takaiho o tetahi huānga.
Nga huihuinga
Ko nga takahanga taka-iho katoa ka panaia ki te .dropdown-menuhuānga matua o te me te whai relatedTargetrawa, ko tona uara ko te huānga punga takahuri. hide.bs.dropdownme hidden.bs.dropdownnga huihuinga he clickEventtaonga (anake ko te momo takahanga taketake click) kei roto he Ahanoa Takahanga mo te takahanga paato.
Takahanga
Whakaahuatanga
show.bs.dropdown
Ka pupuhi tonu tenei takahanga ina ka karangahia te aratuka tauira whakaatu.
shown.bs.dropdown
Ka pupuhihia tenei takahanga i te wa kua kitea te takaiho ki te kaiwhakamahi (ka tatari mo nga whakawhitinga CSS, kia oti).
hide.bs.dropdown
Ka puhia tonutia tenei takahanga ina kua karangahia te aratuka huna.
hidden.bs.dropdown
Ka pupuhihia tenei kaupapa ka mutu te hunanga o te takaiho mai i te kaiwhakamahi (ka tatari mo nga whakawhitinga CSS, kia oti).