Amathuluzi azwakala njengenkinga encane ye-UI ongaba nayo. Mancane futhi ngokuvamile afihliwe. Uma othile ebuza ukuthi yakha kanjani, impendulo evamile cishe ibuya njalo isebenzisa umtapo wezincwadi we-JavaScript. Futhi isikhathi eside, leso kwakuyiseluleko esinengqondo. Nami ngayilandela. Ngaphandle, ithiphu yamathuluzi ilula. Hambisa phezulu noma gxila entweni, bonisa ibhokisi elincane elinombhalo othile, bese uwufihla lapho umsebenzisi ehamba. Kodwa uma usuthumele eyodwa kubasebenzisi bangempela, imiphetho iqala ukubonakala. Abasebenzisi bekhibhodi Faka i-trigger, kodwa ungalokothi ubone ithiphu yamathuluzi. Izifundi zesikrini ziyimemezele kabili, noma cha nhlobo. Ithulithiphu liyacwayiza uma ususa igundane ngokushesha okukhulu. Igqagqana okuqukethwe ezikrinini ezincane. Ukucindezela u-Esc akuvali. Ukugxila kuyalahleka. Ngokuhamba kwesikhathi, ikhodi yami yamathuluzi yakhula yaba into engangingasafuni ukuba ngeyakho. Abalaleli bomcimbi banqwabelana. Ukuhambisa phezulu nokugxila bekufanele kusingathwe ngokwehlukana. Ukuchofoza kwangaphandle kwakudinga izimo ezikhethekile. Izibaluli ze-ARIA bekufanele zigcinwe zivumelaniswa ngesandla. Konke ukulungiswa okuncane kwengeze esinye isendlalelo se-logic. Imitapo yolwazi yasiza, kodwa futhi yayifana namabhokisi amnyama engangisebenza kuwo esikhundleni sokuqonda ngokugcwele okwakwenzeka ngemva kwezigcawu. Yilokho okwangiphusha ukuthi ngibheke i-Popover API entsha. Bengifuna ukubona ukuthi kuzokwenzekani uma ngakha kabusha ithiphu yamathuluzi eyodwa ngisebenzisa imodeli yomdabu yesiphequluli ngaphandle kosizo lwelabhulali. Njengoba siqala, kubalulekile ukuqaphela ukuthi, njenganoma yisiphi isici esisha, kunezinto ezithile ezisalungiswa ngazo. Sekushiwo lokho, njengamanje ijabulela ukwesekwa kwesiphequluli esihle, yize kunezicucu ezimbalwa ku-API iyonke eziguquguqukayo. Kuyafaneleka ukubeka iso ku-Caniuse okwamanje. Ithulithiphu "Endala". Ngaphambi kwe-Popover API, ukusebenzisa umtapo wezincwadi kwakungesona isinqamuleli. Bekuyiphutha. Iziphequluli bezingenawo umqondo womdabu wethiphu yamathuluzi esebenza kuwo wonke amagundane, ikhibhodi, nobuchwepheshe obusizayo. Uma ubukukhathalela ngokunemba, inketho yakho kuphela bekuwukusebenzisa umtapo wolwazi, futhi yilokho kanye engikwenzile. Ezingeni eliphezulu, iphethini yayihlala ifana: i-elementi yokuqalisa, i-elementi yethiphu yamathuluzi efihliwe, ne-JavaScript yokuxhumanisa kokubili.
Ilabhulali ibiphethe izintambo ezivumela i-elementi ukuthi ibonakale ekuhambiseni phezulu noma ekugxilweni, ukucasha ekuphumeni kokufiphala noma kwegundane, bese ubeka kabusha/ushintshe usayizi ekuskroleni.
Ngokuhamba kwesikhathi, ithiphu lamathuluzi lingase libe ntekenteke. Izinguquko ezincane zibe nengozi. Ukulungiswa okuncane kubangele ukuhlehla. Okubi nakakhulu, ukungeza amathiphu amasha kuzuze njengefa ubunzima obufanayo. Izinto zasebenza ngobuchwepheshe, kodwa azikaze zizizwe zilungisiwe noma ziphelele. Leso kwakuyisimo sezinto lapho nginquma ukwakha kabusha ithiphu yamathuluzi ngisebenzisa i-Popover API yomdabu yesiphequluli. Isikhathi Engizame Ngaso I-Popover API Angizange ngishintshele ekusebenziseni i-Popover API ngoba bengifuna ukuzama okuthile okusha. Ngishintshile ngoba bengikhathele ukugcina i-tooltip ebengikholelwa ukuthi isiphequluli bekumele ngabe sesivele sikuqondisile. Nganginokungabaza ekuqaleni. Iningi lama-API ewebhu amasha athembisa ubulula, kodwa asadinga iglue, ukubamba i-edge-case, noma umqondo wokubuyela emuva okudala buthule ubunkimbinkimbi obufanayo obuzama ukubaleka. Ngakho-ke, ngizamile i-Popover API ngendlela encane kakhulu. Nakhu ukuthi kwakubukeka kanjani:
1. Ikhibhodi "Isebenza Nje" Ukusekelwa kwekhibhodi kwakuncike ezendlalelo eziningi ezikleliswe ngendlela efanele: ukugxila bekufanele kuqalise ithiphu lamathuluzi, ukufiphala kwakudingeka kulifihle, i-Esc kwadingeka ifakwe intambo ngesandla, futhi isikhathi sibalulekile. Uma ugeje ikesi elilodwa lonqenqema, ithiphu yethuluzi izohlala ivuliwe isikhathi eside kakhulu noma inyamalale ngaphambi kokuthi ifundwe. Ngesibaluli se-popover esisethwe ukuze sithi ngokuzenzakalela noma ngesandla, isiphequluli sithatha izinto eziyisisekelo: Ithebhu no-Shift+Tab ziziphatha ngendlela evamile, i-Esc ivala ithiphu yamathuluzi njalo, futhi abekho abalaleli abengeziwe abadingekayo.
Okunyamalele ku-codebase yami izibambi zokhiye zomhlaba wonke, i-Esc-specific cleanup logic, nokuhlola isimo ngesikhathi sokuzulazula kwekhibhodi. Okuhlangenwe nakho kwekhibhodi kuyeka ukuba yinto okufanele ngiyinakekele, futhi yaba isiqinisekiso sesiphequluli. 2. Ukubikezelwa kwesifundi sesikrini Lokhu kwakuyi-ukuthuthukiswa okukhulu. Ngisho nomsebenzi ocophelelayo we-ARIA, ukuziphatha kuye kwahluka, njengoba ngichazile ekuqaleni. Lonke ushintsho oluncane lwaluzwakala luyingozi. Ukusebenzisa i-popover enendima efanele kubukeka futhi kuzwakala kuzinze kakhulu futhi kubikezelwa ngokuzokwenzeka:
Futhi nakhu okunye ukuwina: Ngemva kokushintsha, i-Lighthouse iyeke ukuhlaba umkhosi ngezixwayiso zesimo se-ARIA ezingalungile mayelana nokusebenzisana, ikakhulukazi ngenxa yokuthi azisekho izifunda zangokwezifiso ze-ARIA ukuthi ngenze iphutha ngephutha.
3. Ukuphathwa Okugxilile Ukugxila kwakukade kuntekenteke. Ngaphambilini, benginemithetho efana nokuthi: vumela ukugxilisa kucuphe ithiphu lombukiso, hambisa ukugxila kuthulithiphu futhi ungavali, ukufiphalisa ukucupha uma kuseduze kakhulu, futhi vala ithiphu lamathuluzi futhi ubuyisele ukugxila mathupha. Lokhu kwasebenza kuze kube phakade. Nge-Popover API, isiphequluli sisebenzisa imodeli elula lapho ukugxila kungangena ngokwemvelo ku-popover. Ukuvala i-popover kubuyisela ukugxila kusibangeli, futhi azikho izicupho zokugxila ezingabonakali noma izikhathi zokugxila ezilahlekile. Futhi angizange ngingeze ikhodi yokubuyisela yokugxila; Ngiyisusile.
Isiphetho I-Popover API isho ukuthi izeluleko zamathuluzi akuseyona into oyilingisayo. Ziyinto isiphequluli esiyiqondayo. Ukuvula, ukuvala, ukuziphatha kwekhibhodi, ukuphatha i-Escape, kanye nengxenye enkulu yokufinyeleleka manje kuvela epulatifomu ngokwayo, hhayi ku-JavaScript ye-ad-hoc. Lokho akusho ukuthi imitapo yolwazi yethulithiphu isiphelelwe yisikhathi ngoba isawenza umqondo kumasistimu edizayini ayinkimbinkimbi, ukwenza ngokwezifiso okusindayo, noma imikhawulo yefa, kodwa okuzenzakalelayo kushintshile. Ngokokuqala ngqa, ithiphu lethuluzi elilula lingaba futhi elifanele kakhulu. Uma ufuna ukwazi, zama lokhu kuhlolwa: Vele ubeke ithiphu elilodwa nje kumkhiqizo wakho nge-Popover API, ungabhali kabusha yonke into, ungathuthi lonke uhlelo, bese ukhetha eyodwa nje bese ubona ukuthi yini enyamalalayo kukhodi yakho. Lapho inkundla ikunikeza okwakudala okungcono, ukuwina akuyona nje imigqa embalwa yeJavaScript, kodwa kuyizinto ezimbalwa okufanele ukhathazeke ngazo nhlobo. Bheka ikhodi yomthombo egcwele ku-repo yami ye-GitHub. Ukufunda Okuqhubekayo Ukuze ungene ujule kuma-popvers nama-API ahlobene:
"Poppin' In", uGeoff Graham "Ukucacisa Ubudlelwano Phakathi Kwama-Popovers kanye Nezingxoxo", uZell Liew "Yini i-popover=hint?", Una Kravets "Ama-Invoker Commands", uDaniel Schwarz "Ukudala Isaziso sokuvala ngokuzenzakalelayo nge-HTML Popover", u-Preethi Vula i-UI Popover API Explainer "Pop(over) the Balloons", uJohn Rhea "I-CSS Anchor Positioning", uJuan Diego Rodríguez
I-MDN iphinde inikeze ngemibhalo yezobuchwepheshe ebanzi ye-Popover API.
