Lisebelisoa li ikutloa joalo ka bothata bo bonyenyane ba UI boo u ka bang le bona. Li nyane 'me hangata li patiloe. Ha motho a botsa hore na e etsoa joang, karabo ea setso e batla e khutla a sebelisa laebrari e itseng ea JavaScript. 'Me ka nako e telele, eo e ne e le keletso e utloahalang. Ke ile ka e latela, le nna. Ka holim'a metsi, sesebelisoa se bonolo. Tsamaisa kapa sheba ntho e itseng, hlahisa lebokose le nang le mongolo, ebe u le pata ha mosebelisi a tloha. Empa hang ha o romella e le 'ngoe ho basebelisi ba' nete, likhahla li qala ho bonahala. Basebelisi ba Keyboard Tobetsa ho "trigger", empa le ka mohla u se ke ua bona sesebelisoa. Babali ba skrine ba e phatlalatsa habeli, kapa che ho hang. Sesebelisoa sea panya-panya ha u tsamaisa toeba kapele haholo. E fetana ka har'a li-skrini tse nyane. Ho tobetsa Esc ha ho e koale. Tsepamiso ea lahleha. Ha nako e ntse e ea, khoutu ea ka ea lisebelisoa e ile ea hola ho ba ntho eo ke neng ke se ke sa batle ho ba le eona. Bamameli ba ketsahalo ba ile ba bokellana. Hover le ho tsepamisa maikutlo li ne li tlameha ho sebetsoa ka thoko. Ho tobetsa ka ntle ho ne ho hlokahala linyeoe tse khethehileng. Litšobotsi tsa ARIA li ne li tlameha ho lula li hokahantsoe ka letsoho. Tokiso e 'ngoe le e' ngoe e nyane e ekelitse karolo e 'ngoe ea logic. Lilaebrari li ile tsa thusa, empa hape li ne li tšoana le mabokose a matšo ao ke neng ke sebetsa ho pota-pota ho e-na le ho utloisisa ka botlalo se neng se etsahala ka morao. Ke sona se ileng sa ntšusumelletsa ho sheba Popover API e ncha. Ke ne ke batla ho bona hore na ho tla etsahala'ng haeba ke ka tsosolosa sesebelisoa se le seng ke sebelisa mohlala oa sebatli ntle le thuso ea laeborari. Ha re qala, ke habohlokoa ho hlokomela hore, joalo ka karolo leha e le efe e ncha, ho na le lintho tse ling tse ntseng li etsoa ka eona. Ho boletse joalo, hajoale e natefeloa ke ts'ehetso e kholo ea sebatli, leha ho na le likotoana tse 'maloa ho API ka kakaretso tse ntseng li fetoha. Ho bohlokoa ho beha leihlo Caniuse hajoale. "Khale" Tooltip Pele ho Popover API, ho sebelisa laeborari ea lisebelisoa e ne e se tsela e khuts'oane. E ne e le ea kamehla. Bashebelli ba ne ba sena mohopolo oa tlhaho oa sesebelisoa se sebetsang ho panya, keyboard, le theknoloji e thusang. Haeba u ne u tsotella ho nepahala, khetho ea hau feela e ne e le ho sebelisa laeborari, 'me ke sona seo ke se entseng. Boemong bo phahameng, mohlala o ne o lula o tšoana: ntho e qalang, ntho e patiloeng ea lisebelisoa, le JavaScript ho hokahanya tse peli.
Laeborari e ne e sebetsana le likhoele tse lumellang element hore e hlahe holima holimo kapa ho tsepamisitsoe maikutlo, ho ipata sebakeng se lerootho kapa ho tloha ho toeba, le ho beha sebaka bocha/ho fetola boholo ba moqolo.
Ha nako e ntse e ea, sesebelisoa se ka senyeha. Liphetoho tse nyane li ne li beha kotsi. Litokiso tse nyane li bakile ho fokotseha. Ho hobe le ho feta, ho eketsa lisebelisoa tse ncha ho futsitse ho rarahana ho tšoanang. Lintho li ile tsa sebetsa ka botekgeniki, empa ha ho mohla li kileng tsa ikutloa li hlophisitsoe kapa li felletse. Eo e ne e le boemo ba lintho ha ke etsa qeto ea ho aha sesebelisoa hape ke sebelisa popover API ea sebatli. Nako eo ke Lekileng The Popover API Ha kea fetohela ho sebelisa Popover API hobane ke ne ke batla ho leka ntho e ncha. Ke ile ka fetoha hobane ke ne ke khathetse ke ho boloka boits'oaro ba lisebelisoa tseo ke neng ke lumela hore sebatli se tlameha ebe se se se se utloisisa. Qalong ke ne ke belaela. Boholo ba li-API tse ncha tsa tepo li ts'episa ho ba bonolo, empa li ntse li hloka sekhomaretsi, ho ts'oaroa ha li-edge-case, kapa logic e khutlisetsang morao ka khutso e bopang bothata bo tšoanang boo u neng u leka ho bo baleha. Kahoo, ke ile ka leka Popover API ka tsela e nyenyane ka ho fetisisa. Mona ke hore na e ne e shebahala joang:
1. Keyboard "E sebetsa Feela" Ts'ehetso ea keyboard e ne e ipapisitse le likarolo tse ngata tse hokahaneng ka nepo: ho tsepamiso e ne e tlameha ho qala sesebelisoa, blur e ne e tlameha ho e pata, Esc e ne e tlameha ho kengoa ka terata ka letsoho, 'me nako e bohlokoa. Haeba u fositse ntlha e le 'ngoe, sesebelisoa se ka lula se butsoe nako e telele haholo kapa se nyamele pele se ka baloa. Ka tšobotsi ea popover e behiloeng ho auto kapa manual, sebatli se nka lintho tsa motheo: Tab le Shift+Tab li itšoara ka mokhoa o tloaelehileng, Esc e koala lisebelisoa nako le nako, 'me ha ho hlokahale bamameli ba eketsehileng.
Se ileng sa nyamela ho codebase ea ka e ne e le li-keydown handlers tsa lefats'e, logic ea ho hloekisa Esc-specific, le licheke tsa boemo nakong ea ho tsamaea ha keyboard. Boiphihlelo ba keyboard bo ile ba emisa ho ba ntho eo ke neng ke tlameha ho e boloka, mme e ile ea fetoha tiiso ea sebatli. 2. Screenreader Predictability Ena e ne e le eonantlafatso e kholo. Leha ho na le mosebetsi o hlokolosi oa ARIA, boitšoaro bo ne bo fapana, joalo ka ha ke hlalositse pejana. Phetoho e 'ngoe le e 'ngoe e nyenyane e ne e ikutloa e le kotsi. Ho sebelisa popover e nang le karolo e nepahetseng ho shebahala ebile ho ikutloa ho tsitsitse ebile ho lebelloa ho fihlela se tla etsahala:
Mona ke tlhōlo e 'ngoe: Kamora ho fetoha, Lighthouse e ile ea emisa ho tšoaea litemoso tse fosahetseng tsa mmuso oa ARIA bakeng sa tšebelisano, haholo hobane ha ho sa na maemo a tloaelehileng a ARIA hore ke fose ka phoso.
3. Tsepamiso ea Maikutlo Focus e kile ea senyeha. Pele, ke ne ke e-na le melao e kang: tlohella ho tsepamisa maikutlo ho bonts'a sesebelisoa, suthela ho tsepamisa mohopolo ntlheng ea lisebelisoa 'me u se ke oa koala, sekoahelo se lerootho ha se le haufi haholo, 'me u koale lisebelisoa ebe u khutlisetsa tsepamiso ka letsoho. Sena se ile sa sebetsa ho fihlela ha se sa etsahala. Ka Popover API, sebatli se sebelisa mohlala o bonolo moo ho tsepamisa maikutlo ho ka kenang popover. Ho koala popover ho khutlisetsa mohopolo ho "trigger", 'me ha ho na maraba a sa bonahaleng kapa linako tse lahlehileng tsa ho tsepamisa maikutlo. 'Me ha kea eketsa khoutu ea tsosoloso; Ke e tlositse.
Qetello Popover API e bolela hore lisebelisoa ha e sa le ntho eo u e etsisang. Ke ntho eo sebatli se e utloisisang. Ho bula, ho koala, boits'oaro ba keyboard, Ho sebetsana le ho baleha, le karolo e kholo ea phihlello joale li tsoa sethaleng ka bosona, eseng ho tsoa ho JavaScript ea ad-hoc. Seo ha se bolele hore lilaeborari tsa lisebelisoa ha li sa sebetsa hobane li ntse li utloahala bakeng sa lits'ebetso tse rarahaneng tsa meralo, ho etsa lintho tse ngata, kapa lithibelo tsa lefa, empa tse sa sebetseng li fetohile. Ka lekhetlo la pele, sesebelisoa se bonolo ka ho fetisisa le sona e ka ba se nepahetseng ka ho fetisisa. Haeba u labalabela ho tseba, leka teko ena: Tlosa sesebelisoa se le seng feela sehlahisoa sa hau ka Popover API, u se ke oa ngola ntho e 'ngoe le e' ngoe hape, u se ke ua falla tsamaiso eohle, 'me u khethe e le' ngoe feela 'me u bone hore na ke eng e nyamelang khoutu ea hau. Ha sethala se u fa bophelo bo botle ba pele, katleho ha se mela e fokolang ea JavaScript, empa ke lintho tse fokolang tseo u lokelang ho tšoenyeha ka tsona ho hang. Sheba khoutu e felletseng ea mohloli ho repo ea ka ea GitHub. Ho Tsoela Pele ho Bala Bakeng sa ho ikakhela ka setotsoana ho popover le li-API tse amanang:
"Poppin 'In", Geoff Graham "Ho Hlakisa Kamano lipakeng tsa Popovers le Dialog", Zell Liew "Popover=keletso ke eng?", Una Kravets "Litaelo tsa Invoker", Daniel Schwarz "Ho Etsa Tsebiso ea ho Koala ka Boithaopo ka HTML Popover", Preethi Bula UI Popover API Explainer "Pona (ka holim'a) Libalune", John Rhea "CSS Anchor Positioning", Juan Diego Rodríguez
MDN e boetse e fana ka litokomane tse felletseng tsa tekheniki bakeng sa Popover 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.