Toy ny olan'ny UI kely indrindra azonao ananana ny toro-lalana. Kely izy ireo ary matetika miafina. Rehefa misy manontany ny fomba hananganana iray, ny valiny nentim-paharazana dia saika miverina amin'ny fampiasana tranomboky JavaScript sasany. Ary nandritra ny fotoana ela dia izany no torohevitra feno fahendrena. Nanaraka izany koa aho. Eo amin'ny efijery dia tsotra ny toro-hevitra. Mivezivezy na mifantoha amin'ny singa iray, asehoy boaty kely misy lahatsoratra, ary afeno izany rehefa miala ny mpampiasa. Saingy rehefa mandefa iray amin'ireo mpampiasa tena izy ianao dia manomboka miseho ny sisiny. Ireo mpampiasa klavier dia midira ao amin'ny trigger, fa tsy mahita ny tondro fitaovana. Ny mpamaky efijery dia manambara izany indroa, na tsia. Mikitika ny tendron'ny fitaovana rehefa mihetsika haingana loatra ny totozy. Mifanindry votoaty amin'ny efijery kely kokoa izy io. Tsy manidy ny Esc izany. Very ny fifantohana. Rehefa nandeha ny fotoana dia nitombo ho zavatra tsy tena tiako ho azo intsony ny kaodim-pitaovanao. Nivangongo ny mpihaino hetsika. Ny hover sy ny fifantohana dia tsy maintsy nokarakaraina misaraka. Ny kitika ivelany dia nila tranga manokana. Ny toetran'ny ARIA dia tsy maintsy notazonina tamin'ny tanana. Ny fanamboarana kely tsirairay dia nanampy sosona lojika hafa. Nanampy ny trano famakiam-boky, saingy toy ny boaty mainty niasako ihany koa izy ireo fa tsy nahatakatra tanteraka ny zava-nitranga tao ambadiky ny sehatra. Izany no nanosika ahy hijery ny Popover API vaovao kokoa. Te-hijery izay hitranga aho raha manangana tondro-fitaovana tokana amin'ny fampiasana ny maodely teratany an'ny mpitety tranonkala tsy misy fanampian'ny tranomboky. Rehefa manomboka isika, dia tsara ny manamarika fa, toy ny amin'ny endri-javatra vaovao rehetra, dia misy zavatra sasany miaraka aminy izay mbola asiana vy. Izany dia milaza fa mankafy ny fanohanan'ny navigateur lehibe izy amin'izao fotoana izao, na dia misy ampahany maromaro amin'ny API ankapobeny izay mikorontana. Mendrika ny hijery an'i Caniuse mandritra izany fotoana izany. Ny Tooltip "Taloha". Talohan'ny Popover API, ny fampiasana tranomboky torolalana dia tsy hitsin-dàlana. Io no default. Ny navigateur dia tsy nanana foto-kevitra teratany momba ny toro-lalana izay miasa amin'ny totozy, kitendry ary teknolojia manampy. Raha niraharaha ny marina ianao, ny hany safidy azonao dia ny mampiasa tranomboky, ary izany indrindra no nataoko. Amin'ny ambaratonga avo dia nitovy foana ny lamina: singa trigger, singa miafina fitaovana, ary JavaScript handrindrana ny roa.
Ny trano famakiam-boky dia nitantana ny tariby izay nahafahan'ilay singa hiseho amin'ny hover na fifantohana, manafina amin'ny blur na miala amin'ny totozy, ary mamerina mametraka / manova ny haben'ny horonam-boky.
Rehefa mandeha ny fotoana, dia mety ho marefo ny tendron'ny fitaovana. Nitondra risika ny fiovana kely. Ny fanamboarana kely dia niteraka fihemorana. Ny ratsy kokoa, ny fampidirana fitaovana vaovao dia nandova fahasarotana mitovy. Niasa ara-teknika ny zavatra, saingy tsy nahatsiaro ho nilamina na tanteraka. Izany no toe-javatra rehefa nanapa-kevitra ny hanorina indray ny fitaovana aho amin'ny fampiasana ny Popover API teratany an'ny navigateur. Ny fotoana nanandramako ny Popover API Tsy nivadika tamin'ny fampiasana ny Popover API aho satria te hanandrana zava-baovao. Nivadika aho satria reraky ny fitazonana ny fitondran-tenan'ny fitaovana izay inoako fa tokony ho azon'ny navigateur. Nisalasala aho tamin’ny voalohany. Ny ankamaroan'ny API amin'ny tranonkala vaovao dia mampanantena fahatsorana, saingy mbola mila lakaoly, fikirakirana amin'ny sisiny, na lojika mihemotra izay mamerina mangina ny fahasarotana niezahanao nandositra. Noho izany, nanandrana ny Popover API tamin'ny fomba kely indrindra aho. Toy izao ny endriny:
1. Ny klavier "Miasa fotsiny" Ny fanohanan'ny klavier dia niankina tamin'ny sosona maromaro milahatra tsara: ny fifantohana dia tsy maintsy nanetsika ny tondro-fitaovana, tsy maintsy nanafina izany ny blur, tsy maintsy nampitaina tamin'ny tanana ny Esc, ary zava-dehibe ny fotoana. Raha toa ka tsy hita ny tranga iray amin'ny sisiny iray, dia mety hijanona ela loatra na hanjavona alohan'ny hamakiana azy ny tondro-fitaovana. Miaraka amin'ny toetra popover napetraka amin'ny fiara na manual, ny navigateur dia mandray ny fototra: Tab sy Shift+Tab dia mandeha amin'ny fomba mahazatra, Esc dia manidy ny toro-làlana isaky ny mandeha, ary tsy mila mpihaino fanampiny.
Ny nanjavona tao amin'ny codebase-ko dia ireo mpikirakira keydown manerantany, lojika fanadiovana manokana amin'ny Esc, ary fisavana fanjakana mandritra ny fitetezana kitendry. Ny traikefa amin'ny fitendry dia nijanona ho zavatra tsy maintsy notazoniko, ary lasa antoka navigateur izany. 2. Famantarana ny mpamaky efijery Ity dia nyfanatsarana lehibe indrindra. Na dia tamin'ny asa ARIA tamim-pitandremana aza dia niova ny fitondran-tena, araka ny nosoritako teo aloha. Ny fiovana kely rehetra dia nahatsapa ho mampidi-doza. Ny fampiasana popover miaraka amin'ny anjara toerana mety dia mijery sy mahatsapa ho marin-toerana kokoa sy azo vinavinaina raha ny zavatra hitranga:
Ary ity misy fandresena iray hafa: Taorian'ny fifandimbiasana, ny Lighthouse dia nitsahatra nanamarika ny fampitandreman'ny fanjakana ARIA diso momba ny fifaneraserana, indrindra satria tsy misy fanjakana ARIA mahazatra intsony ho ahy tsy nahy.
3. Fitantanana mifantoka Ny fifantohana dia marefo. Talohan'izay dia nanana fitsipika aho toy ny: avelao ny fifantohana amin'ny trigger hampiseho ny fitaovana, ny fifantohana amin'ny fitaovana ary aza manakatona, ny manjavozavo ny trigger rehefa akaiky loatra, ary ny manakatona ny fitaovana ary mamerina ny fifantohana amin'ny tanana. Niasa izany mandra-pahatongan'izany. Miaraka amin'ny Popover API, ny navigateur dia mampihatra modely tsotra kokoa izay ahafahan'ny fifantohana mifindra ho any amin'ny popover. Ny fanakatonana ny popover dia mamerina ny fifantohana amin'ny trigger, ary tsy misy fandrika fifantohana tsy hita maso na fotoana fifantohana very. Ary tsy nampiako kaody famerenana amin'ny laoniny; nesoriko izany.
Fehiny Ny Popover API dia midika fa tsy zavatra alain-tahaka intsony ny toro-làlana. Izy ireo dia zavatra azon'ny navigateur. Ny fanokafana, ny fanakatonana, ny fihetsika kitendry, ny fikarakarana fandosirana, ary ny ampahany betsaka amin'ny fidirana amin'izao fotoana izao dia avy amin'ny sehatra ihany fa tsy avy amin'ny JavaScript ad-hoc. Tsy midika akory izany fa lany andro ny tranomboky amin'ny tooltip satria mbola misy dikany amin'ny rafitra famolavolana sarotra, fanamboarana mavesatra, na teritery lova, saingy niova ny default. Sambany, ny toro-lalana tsotra indrindra dia mety ho ny marina indrindra. Raha te hahafanta-javatra ianao dia andramo ity andrana ity: Soloy fotsiny ny fitaovana iray ao amin'ny vokatrao miaraka amin'ny Popover API, aza averina soratana daholo ny zava-drehetra, aza mifindra rafitra iray manontolo, ary mifidiana iray fotsiny dia jereo izay tsy hita ao amin'ny code-nao. Rehefa manome anao primitive tsara kokoa ny sehatra, ny fandresena dia tsy andalana vitsivitsy amin'ny JavaScript fotsiny, fa zavatra vitsy kokoa tsy maintsy ahianao mihitsy. Jereo ny kaody loharano feno ao amin'ny repo GitHub. Famakiana fanampiny Ho an'ny fitsirihana lalindalina kokoa amin'ny popover sy API mifandraika:
"Poppin' In", Geoff Graham "Manazava ny fifandraisana eo amin'ny Popovers sy ny fifanakalozan-kevitra", Zell Liew “Inona no atao hoe popover=hint?”, Una Kravets "Invoker Commands", Daniel Schwarz "Mamorona fampandrenesana manidy ho azy miaraka amin'ny HTML Popover", Preethi Sokafy ny UI Popover API Explainer "Pop(over) ny Balloons", John Rhea "Css Anchor Positioning", Juan Diego Rodríguez
Manolotra antontan-taratasy ara-teknika feno ho an'ny Popover API ihany koa ny MDN.
