Iingcebiso zesixhobo ziziva ngathi yeyona ngxaki incinci ye-UI onokuba nayo. Zincinci kwaye zihlala zifihliwe. Xa umntu ebuza ukuba yakhiwe njani enye, impendulo yemveli phantse isoloko ibuya isebenzisa ithala leencwadi leJavaScript. Yaye kangangexesha elide, elo yayilicebiso elisengqiqweni. Ndayilandela, nam. Kumphezulu, i-tooltip ilula. Hambisa okanye ugxininise kwinto ethile, bonisa ibhokisi encinci enombhalo othile, emva koko uyifihle xa umsebenzisi esimka. Kodwa nje ukuba uthumele enye kubasebenzisi bokwenyani, imiphetho iqala ukubonakala. Abasebenzisi bekhibhodi Tab kwi-trigger, kodwa ungaze ubone i-tooltip. Abafundi besikrini bayayibhengeza kabini, okanye hayi kwaphela. Isixhobo siyaqhwanyaza xa uhambisa imouse ngokukhawuleza kakhulu. Igubungela umxholo kwizikrini ezincinci. Ukucofa u-Esc akuyivali. Ugxininiso luyalahleka. Ngokuhamba kwexesha, ikhowudi yam yesixhobo iye yakhula yaba yinto endandingafuni ukuba nayo. Abaphulaphuli besiganeko bayifumba. I-Hover kunye nokugxila kuye kwafuneka kusingathwe ngokwahlukeneyo. Ukucofa ngaphandle kwakudingeka iimeko ezikhethekileyo. Iimpawu zeARIA kwafuneka zigcinwe zihambelana ngesandla. Yonke into encinci yongeza enye ingqimba yengqiqo. Amathala eencwadi aye anceda, kodwa ayefana neebhokisi ezimnyama endandisebenza kuzo endaweni yokuqonda ngokupheleleyo okwenzekayo emva kweziganeko. Yiloo nto eyandityhala ukuba ndijonge iPopover API entsha. Bendifuna ukubona ukuba kuya kwenzeka ntoni ukuba ndiphinda ndakhe isixhobo esinye ndisebenzisa imodeli yemveli yesikhangeli ngaphandle koncedo lwethala leencwadi. Njengoko siqala, kubalulekile ukuqaphela ukuba, njengalo naliphi na inqaku elitsha, kukho ezinye izinto ezisalungiswayo. Oko kuthethiweyo, okwangoku iyonwabela inkxaso enkulu yesikhangeli, nangona kukho iziqwenga ezininzi kwi-API iyonke eguquguqukayo. Kufanelekile ukubeka iliso kwiCaniuse okwangoku. Ingcebiso yesixhobo "Endala". Phambi kwePopover API, ukusebenzisa ilayibrari yesixhobo ibingeyondlela imfutshane. Ibiyintsilelo. Abakhangeli babengenayo ingcamango yemveli yesixhobo esisebenza kwimawusi, ikhibhodi, kunye neteknoloji yokuncedisa. Ukuba ubunenkathalo malunga nokuchaneka, ekuphela kwenketho yakho ibikukusebenzisa ithala leencwadi, yiloo nto kanye endiyenzileyo. Kwinqanaba eliphezulu, ipateni yayisoloko ifana: isiqalo, isixhobo esifihlakeleyo sesixhobo, kunye neJavaScript ukulungelelanisa ezi zimbini.
Ithala leencwadi liphethe iingcingo ezivumela i-elementi ukuba ibonise kwi-hover okanye kugxininiso, ukufihla kwi-blur okanye ikhefu lempuku, kunye nokubeka ngokutsha/ubungakanani bobungakanani ekusongeleni.
Ngokuhamba kwexesha, isixhobo sinokuba buthathaka. Utshintsho oluncinci luthwele umngcipheko. Ulungiso oluncinci lubangele ukuhlehla. Okubi kakhulu, ukongeza izixhobo ezitsha kuzuze ilifa ubunzima obufanayo. Izinto zasebenza ngobuchwephesha, kodwa zange zizive zizinzile okanye ziphelele. Leyo yayiyimeko yezinto xa ndaye ndagqiba ekubeni ndakhe kwakhona isixhobo ndisebenzisa iPopover API yesikhangeli. Umzuzu ndizama iPopover API Khange nditshintshele ekusebenziseni iPopover API kuba bendifuna ukuzama into entsha. Ndiye ndatshintsha kuba bendidiniwe kukugcina impatho yesixhobo endikholelwa ukuba isikhangeli bekufanele ukuba sele siyiqondile. Ndandithandabuza ekuqaleni. Uninzi lwee-APIs zewebhu zithembisa ngokulula, kodwa zisafuna iglu, ukuphathwa kwe-edge-case, okanye ukubuyisela umva logic ethe cwaka iphinda iphinde ibenzima obuzama ukuyibaleka. Ke, ndizamile iPopover API ngeyona ndlela incinci. Nantsi into eyayibonakala ngathi:
1. Ikhibhodi "Isebenza nje" Inkxaso ye-keyboard ixhomekeke kumaleko amaninzi adibanisa ngokuchanekileyo: ugxininiso bekufuneka luvuse i-tooltip, ukufiphala kuye kwayifihla, i-Esc kwafuneka ifakwe iintambo ngesandla, kwaye ixesha libalulekile. Ukuba uphose icala elinye elisecaleni, incam yesixhobo iya kuhlala ivuliwe ixesha elide kakhulu okanye inyamalale phambi kokuba ifundwe. Ngophawu lwe-popover olusetelwe kwi-auto okanye ngesandla, isikhangeli sithatha izinto ezisisiseko: I-Tab kunye ne-Shift+Tab ziziphatha ngokuqhelekileyo, i-Esc ivala i-tooltip rhoqo, kwaye akukho baphulaphuli bongezelelweyo bayafuneka.
Into eyanyamalalayo kwi-codebase yam yayizizitshixo zelizwe jikelele, i-Esc-specific cleanup logic, kunye nokujonga imeko ngexesha lokukhangela kwebhodibhodi. Amava ekhibhodi ayeka ukuba yinto ekufuneka ndiyigcine, kwaye yaba sisiqinisekiso somkhangeli zincwadi. 2. Ukuqikelelwa komfundi wesikrini Le yayiyiyouphuculo olukhulu. Nokuba kunomsebenzi ocokisekileyo we-ARIA, indlela yokuziphatha yahlukile, njengoko bendichazile ngaphambili. Lonke utshintsho oluncinci lwaluziva lunobungozi. Ukusebenzisa i-popover enendima efanelekileyo ijongeka kwaye iziva izinzile kwaye iqikeleleke ukuba kuza kwenzeka ntoni na:
Kwaye nantsi enye impumelelo: Emva kokutshintsha, i-Lighthouse iyekile ukuphawula izilumkiso ze-ARIA ezingachanekanga ngonxibelelwano, ubukhulu becala ngenxa yokuba akusekho zizwe ze-ARIA zokuba ndiphazame ngempazamo.
3. ULawulo lokuGqalisela Ugxininiso lwalukade lubuthathaka. Ngaphambili, bendinemithetho efana nale: vumela ugxininiso luqalise umboniso wesixhobo, hambisa ingqwalasela kwincam yesixhobo kwaye ungavali, blur trigger xa isondele kakhulu, kwaye uvale isixhobo kwaye ubuyisele ugxininiso ngesandla. Oku kwasebenza kwaze kwaba njalo. NgePopover API, isikhangeli sinyanzelisa imodeli elula apho ugxininiso lunokuhamba ngokwendalo kwi-popover. Ukuvala i-popover ibuyisela ukugxila kwi-trigger, kwaye akukho migibe yokugxila engabonakaliyo okanye ukulahleka kwexesha lokugxila. Kwaye andizange ndongeze ikhowudi yokubuyisela ekugxininiseni; Ndiyisusile.
Ukuqukumbela I-Popover API ithetha ukuba i-tooltips ayisekho into oyilinganisayo. Yinto isikhangeli esiyiqondayo. Ukuvulwa, ukuvala, ukuziphatha kwebhodibhodi, ukuphatha ukubaleka, kunye ne-chunk enkulu yokufikeleleka ngoku ivela kwiqonga ngokwalo, kungekhona kwi-ad-hoc JavaScript. Oko akuthethi ukuba iilayibrari zesixhobo ziphelelwe lixesha ngenxa yokuba zisenengqiqo kwiinkqubo zoyilo oluntsonkothileyo, uhlengahlengiso olunzima, okanye imiqobo yelifa, kodwa ukungagqibeki kutshintshile. Okokuqala, eyona ngcebiso ilula inokuba sesona sichanekileyo. Ukuba unomdla, zama olu vavanyo: Faka ngokulula inqaku lesixhobo kwimveliso yakho ngePopover API, ungaphindi ubhale yonke into, ungafuduki inkqubo yonke, kwaye ukhethe nje enye kwaye ubone ukuba yintoni enyamalalayo kwikhowudi yakho. Xa iqonga likunika i-primitive engcono, impumelelo ayikho imigca embalwa yeJavaScript, kodwa zizinto ezimbalwa omele uzikhathaze ngazo zonke. Jonga ikhowudi yomthombo ogcweleyo kwi-repo yam ye-GitHub. UFundo olongezelelweyo Ukuntywila nzulu kwiipopovers kunye nee-APIs ezinxulumeneyo:
“Poppin’ In”, uGeoff Graham "Ukucacisa uBudlelwane phakathi kwePopovers kunye neengxoxo", uZell Liew "Yintoni i-popover=ingcebiso?", Una Kravets "Imiyalelo ye-Invoker", uDaniel Schwarz "Ukudala iSaziso sokuVala ngokuzenzekelayo nge-HTML Popover", Preethi Vula i-UI Popover API Explainer "Pop (ngaphaya) kwiiBhaluni", uJohn Rhea "I-CSS Anchor Positioning", uJuan Diego Rodríguez
I-MDN ikwabonelela ngamaxwebhu obugcisa abanzi kwiPopover API.
Enjoyed This Article?
Get weekly tips on growing your audience and monetizing your content — straight to your inbox.
No spam. Join 138,000+ creators. Unsubscribe anytime.