Zvishandiso zvinonzwa sediki diki UI dambudziko raungave naro. Iwo madiki uye kazhinji akavanzwa. Kana mumwe munhu achibvunza nzira yekuvaka imwe, mhinduro yechinyakare inenge inogara ichidzoka uchishandisa imwe JavaScript raibhurari. Uye kwenguva refu, iro rakanga riri zano rine mufungo. Ndakaiteverawo. Pamusoro, muromo wekushandisa uri nyore. Hover kana kutarisa pane chimwe chinhu, ratidza kabhokisi kadiki kane mamwe mavara, wobva waviga kana mushandisi aenda. Asi kana uchinge watumira imwe kune vashandisi chaivo, mipendero inotanga kuratidza. Vashandisi vekibhodhi Tab mune inokonzeresa, asi usamboona iyo tooltip. Vaverengi veSikirini vazvizivise kaviri, kana kusatombozviita. Iyo yekushandisa inobata kana iwe uchifambisa mbeva nekukasira. Inopindirana nezviri pamasikirini madiki. Kudzvanya Esc hakuivhare. Focus inorasika. Nekufamba kwenguva, kodhi yangu yekushandisa yakawedzera kuita chimwe chinhu chandakanga ndisisade kuva nacho. Vateereri vechiitiko vakaungana. Hover uye kutarisa kwaifanira kubatwa zvakasiyana. Kunze kudzvanya kunoda makesi chaiwo. ARIA hunhu hwaifanira kuchengetwa mu sync nemaoko. Yese diki kugadzirisa yakawedzera imwe layer ye logic. Maraibhurari akabatsira, asi aivewo akafanana nemabhokisi matema andaishandira panzvimbo yekunyatsonzwisisa zvaiitika kuseri kwezviitiko. Ndizvo zvakandisundidzira kuti nditarise iyo nyowani Popover API. Ini ndaida kuona kuti chii chaizoitika kana ndikavaka patsva chishandiso chimwe chete ndichishandisa bhurawuza yerudzi rwemhando pasina rubatsiro rweraibhurari. Sezvatinotanga, zvakakosha kuziva kuti, sekunge chero chinhu chitsva, pane zvimwe zvinhu nazvo izvo zvichiri kugadzirwa. Izvo zvakati, parizvino inonakidzwa nerutsigiro rwakakura rwebrowser, kunyangwe paine zvimedu zvakati wandei kune iyo yakazara API iri kufamba. Zvakakodzera kuchengeta ziso paCaniuse panguva ino. Iyo "Yekare" Tooltip Pamberi pePopover API, kushandisa raibhurari yetip yaisava nzira yekudimbudzira. Yakanga iri default. Mabhurawuza akange asina pfungwa yerudzi rwechishandiso chaishanda pagonzo, keyboard, uye tekinoroji yekubatsira. Kana iwe uine hanya nekurongeka, yako chete sarudzo yaive yekushandisa raibhurari, uye ndizvo chaizvo zvandakaita. Padanho repamusoro, iyo pateni yaigara yakafanana: chinhu chinokonzeresa, chinhu chakavanzika chetip chinhu, uye JavaScript yekubatanidza izvo zviviri.
Raibhurari yaibata waya yaibvumira chinhu kuti chiratidze pane hover kana kutarisa, kuvanda pane blur kana mbeva kusiya, uye reposition/resize pamupumburu.
Nokufamba kwenguva, chidzitiro chekushandisa chinogona kusasimba. Shanduko diki dzakatakura njodzi. Kugadzirisa kudiki kwakakonzera kudzoreredza. Zvakatoipa, kuwedzera matipi matsva akagara nhaka kuoma kwakafanana. Zvinhu zvakashanda nehunyanzvi, asi hazvina kumbonzwa kugadzikana kana kukwana. Ndiyo yaive mamiriro ezvinhu pandakafunga kuvaka patsva chitupa ndichishandisa browser yekwaPopover API. Nguva yandakaedza Iyo Popover API Ini handina kuchinja kushandisa Popover API nekuti ndaida kuyedza chimwe chinhu chitsva. Ndakachinja nekuti ndainge ndaneta nekuchengetedza tooltip maitiro andaitenda kuti browser yaifanira kunge yatonzwisisa. Ndakanga ndisina chokwadi pakutanga. Mazhinji ewebhu APIs matsva anovimbisa kuve nyore, asi achiri kuda glue, edge-kesi kubata, kana fallback logic inogadzirisa chinyararire kuoma kwakafanana kwawanga uchiedza kutiza. Saka, ndakaedza iyo Popover API nenzira diki inogoneka. Hezvino izvo zvaitaridzika:
1. Kiyibhodhi "Inongoshanda" Rutsigiro rwekibhodhi rwaienderana nemateru akawanda akamira zvakanaka: kutarisisa kwaifanira kukonzeresa chishandiso, blur yaifanira kuvanza, Esc yaifanirwa kuvezwa newaya pamaoko, uye nguva yakakosha. Kana wapotsa imwe kesi yemupendero, chekushandisa chaigona kuramba chakavhurika chakareba kana kunyangarika chisati chaverengwa. Iine popover hunhu hwakaiswa kune otomatiki kana manyorerwo, bhurawuza rinotora izvo zvekutanga: Tab uye Shift+Tab zvibate zvakajairwa, Esc inovhara chishandiso nguva dzese, uye hapana vamwe vateereri vanodiwa.
Izvo zvakanyangarika kubva kucodebase yangu zvaive zvepasi rose keydown handlers, Esc-specific cleanup logic, uye macheki ehurumende panguva yekufambisa keyboard. Iyo keyboard chiitiko chakamira kuve chimwe chinhu chandaifanira kuchengetedza, uye chakava chibvumirano chebrowser. 2. Screenreader Predictability Iyi yaive iyokuvandudzwa kukuru. Kunyangwe nebasa rekungwarira reARIA, maitiro akasiyana, sezvandambotaura. Kuchinja kudiki kwese kwainzwa kune njodzi. Kushandisa popover ine basa rakakodzera rinotaridzika uye rinonzwa zvakanyanya kugadzikana uye kufungidzira kusvika pane zvichaitika:
Uye heino imwe kuhwina: Mushure mekuchinja, Lighthouse yakamira kuridza yambiro isiriyo yeARIA yenyika yekudyidzana, zvakanyanya nekuti hapachisina tsika dzeARIA dzinoti ini ndikanganisa netsaona.
3. Focus Management Focus yaimbova isina kusimba. Kare, ndaiva nemitemo yakaita senge: rega kutarisisa kukonzeresa showtip, fambisa kutarisisa kune chishandiso uye usavhara, blur trigger kana yanyanya padhuze, uye vhara mudziyo wekushandisa uye dzosera kutarisisa nemaoko. Izvi zvakashanda kusvika zvaramba. NePopover API, bhurawuza rinomanikidza rakareruka modhi uko kutarisisa kunogona kungofamba mupopover. Kuvhara popover kunodzosera kutarisisa kune inokonzeresa, uye hapana asingaoneki anotarisisa misungo kana yakarasika yekutarisa nguva. Uye ini handina kuwedzera kutarisa kudzoreredza kodhi; Ndakaibvisa.
Mhedziso Iyo Popover API inoreva kuti maturusi haasisiri chinhu chaunotevedzera. Ivo chinhu chinonzwisiswa nebrowser. Kuvhura, kuvhara, hunhu hwekhibhodi, Kutiza kubata, uye hombe chunk yekuwanikwa ikozvino inobva papuratifomu pachayo, kwete kubva ad-hoc JavaScript. Izvo hazvireve kuti matura ekushandisa haachashandi nekuti achiri kuita zvine musoro kune yakaoma dhizaini masisitimu, inorema customization, kana legacy zvimhingamipinyi, asi iyo default yachinja. Kekutanga, iyo yakapfava tooltip inogona zvakare kuve iyo yakanyanya kunaka. Kana iwe uchida kuziva, edza ichi chiyedzo: Ingo tsiva chimwe chete chishandiso muchigadzirwa chako nePopover API, usazonyora zvese, usatame system yese, uye ingotora imwe chete woona inonyangarika kubva kodhi yako. Kana iyo puratifomu ichikupa iwe primitive iri nani, kuhwina hakusi mitsetse mishoma yeJavaScript, asi zvinhu zvishoma zvaunofanira kunetseka nazvo zvachose. Tarisa uone yakazara sosi kodhi mune yangu GitHub repo. Kuwedzera Kuverenga Nekudzika kwakadzika mumapopovers uye ane hukama APIs:
"Poppin 'In", Geoff Graham "Kujekesa Hukama pakati pePopovers uye Dialogs", Zell Liew "Chii chinonzi popover = zano?", Una Kravets "Invoker Commands", Daniel Schwarz "Kugadzira Chiziviso Chekuvhara Otomatiki neHTML Popover", Preethi Vhura UI Popover API Explainer "Pop (pamusoro) maBalloons", John Rhea "CSS Anchor Positioning", Juan Diego Rodríguez
MDN inopawo yakazara tekinoroji zvinyorwa zvePopover 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.