Awọn imọran irinṣẹ lero bi iṣoro UI ti o kere julọ ti o le ni. Wọn jẹ kekere ati nigbagbogbo pamọ. Nigbati ẹnikan ba beere bi o ṣe le kọ ọkan, idahun ti aṣa nigbagbogbo n pada wa ni lilo diẹ ninu ile-ikawe JavaScript. Ati fun igba pipẹ, iyẹn ni imọran ti o ni oye. Mo tun tẹle e. Lori dada, ọpa irinṣẹ jẹ rọrun. Rababa tabi idojukọ lori ohun kan, ṣafihan apoti kekere kan pẹlu ọrọ diẹ, lẹhinna tọju rẹ nigbati olumulo ba lọ kuro. Ṣugbọn ni kete ti o ba gbe ọkan lọ si awọn olumulo gidi, awọn egbegbe bẹrẹ lati ṣafihan. Awọn olumulo Keyboard Taabu sinu okunfa, ṣugbọn ko rii itọsi irinṣẹ. Awọn oluka iboju kede rẹ lẹẹmeji, tabi rara rara. Itọpa irinṣẹ n lọ nigbati o ba gbe Asin naa yarayara. O ni lqkan akoonu lori kere iboju. Titẹ Esc ko pa a. Idojukọ n sọnu. Ni akoko pupọ, koodu ọpa irinṣẹ mi dagba si nkan ti Emi ko fẹ gaan lati ni mọ. Awọn olutẹtisi iṣẹlẹ kojọpọ. Rababa ati idojukọ ni lati mu ni lọtọ. Ita awọn jinna nilo pataki igba. Awọn abuda ARIA ni lati tọju ni amuṣiṣẹpọ nipasẹ ọwọ. Gbogbo kekere fix afikun miiran Layer ti kannaa. Awọn ile-ikawe ṣe iranlọwọ, ṣugbọn wọn tun dabi awọn apoti dudu ti Mo ṣiṣẹ ni ayika dipo oye kikun ohun ti n ṣẹlẹ lẹhin awọn iṣẹlẹ. Ìyẹn ló sún mi láti wo API Popover tuntun. Mo fẹ lati rii ohun ti yoo ṣẹlẹ ti MO ba tun kọ ọpa irinṣẹ kan ni lilo awoṣe abinibi ẹrọ aṣawakiri laisi iranlọwọ ti ile-ikawe kan. Bi a ṣe bẹrẹ, o tọ lati ṣe akiyesi pe, bi pẹlu eyikeyi ẹya tuntun, awọn nkan kan wa pẹlu rẹ ti o tun jẹ iron. Iyẹn ti sọ, lọwọlọwọ gbadun atilẹyin aṣawakiri nla, botilẹjẹpe ọpọlọpọ awọn ege wa si API gbogbogbo ti o wa ni ṣiṣan. O tọ lati tọju oju Caniuse ni akoko yii. Ohun elo “Atijọ” naa Ṣaaju API Popover, lilo ile-ikawe ọpa irinṣẹ kii ṣe ọna abuja. O jẹ aiyipada. Awọn aṣawakiri ko ni imọran abinibi ti ọpa irinṣẹ ti o ṣiṣẹ kọja Asin, keyboard, ati imọ-ẹrọ iranlọwọ. Ti o ba bikita nipa titọ, aṣayan nikan ni lati lo ile-ikawe kan, ati pe ohun ti Mo ṣe gan-an niyẹn. Ni ipele giga kan, apẹẹrẹ nigbagbogbo jẹ kanna: eroja ti o nfa, ohun elo ọpa ti o farapamọ, ati JavaScript lati ṣe ipoidojuko awọn meji.
Ile-ikawe naa ṣe itọju onirin ti o fun laaye ni eroja lati ṣafihan lori rababa tabi idojukọ, tọju lori blur tabi isinmi Asin, ati tunpo / iwọn lori yi lọ.
Ni akoko pupọ, ọpa irinṣẹ le di ẹlẹgẹ. Awọn iyipada kekere gbe ewu. Awọn atunṣe kekere ti fa awọn atunṣe. Buru, fifi awọn imọran irinṣẹ tuntun jogun idiju kanna. Ohun ti tekinikali sise, sugbon ko ro nibẹ tabi pipe. Iyẹn ni ipo awọn nkan nigbati Mo pinnu lati tun ohun elo irinṣẹ ṣe ni lilo aṣawakiri abinibi Popover API. Akoko ti Mo gbiyanju API Agbejade naa Emi ko yipada si lilo Agbejade API nitori Mo fẹ lati ṣe idanwo pẹlu nkan tuntun. Mo yipada nitori pe o rẹ mi lati ṣetọju ihuwasi irinṣẹ ti Mo gbagbọ pe aṣawakiri yẹ ki o ti loye tẹlẹ. Mo ṣiyemeji ni akọkọ. Pupọ julọ awọn API wẹẹbu tuntun ṣe ileri ayedero, ṣugbọn tun nilo lẹ pọ, mimu-ọran-eti, tabi ọgbọn-ipadabọ ti o dakẹ ti o tun ṣe idiju kanna ti o n gbiyanju lati sa fun. Nitorinaa, Mo gbiyanju API Popover ni ọna ti o kere julọ ti o ṣeeṣe. Eyi ni ohun ti iyẹn dabi:
1. Keyboard “O kan Ṣiṣẹ” Atilẹyin bọtini itẹwe da lori awọn ipele fẹlẹfẹlẹ pupọ ti o tọ ni deede: idojukọ ni lati ma nfa ohun elo irinṣẹ, blur ni lati tọju rẹ, Esc ni lati firanṣẹ pẹlu ọwọ, ati akoko ṣe pataki. Ti o ba padanu ọran eti kan, ọpa irinṣẹ yoo wa ni sisi gun ju tabi parẹ ṣaaju ki o to le ka. Pẹlu abuda popover ti a ṣeto si adaṣe tabi afọwọṣe, aṣawakiri naa gba awọn ipilẹ: Taabu ati Shift + Tab huwa ni deede, Esc tilekun ọpa irinṣẹ ni gbogbo igba, ko si nilo awọn olutẹtisi afikun.
Ohun ti o sọnu lati ipilẹ koodu mi jẹ awọn oluṣakoso bọtini bọtini agbaye, ọgbọn-ọgbọn mimọ-kan pato, ati awọn sọwedowo ipinlẹ lakoko lilọ kiri keyboard. Iriri keyboard duro jẹ nkan ti Mo ni lati ṣetọju, o si di ẹri aṣawakiri kan. 2. Screenreader Predictability Eyi nitobi ilọsiwaju. Paapaa pẹlu iṣọra iṣẹ ARIA, ihuwasi yatọ, bi mo ti ṣe alaye tẹlẹ. Gbogbo iyipada kekere ni o ni eewu. Lilo popover kan pẹlu ipa to tọ wo ati rilara iduroṣinṣin diẹ sii ati asọtẹlẹ niwọn bi ohun ti yoo ṣẹlẹ:
Ati pe eyi ni iṣẹgun miiran: Lẹhin iyipada, Lighthouse duro asia ti ko tọ si awọn ikilọ ipinlẹ ARIA fun ibaraenisepo, ni pataki nitori pe ko si awọn ipinlẹ ARIA aṣa mọ fun mi lati ṣe aṣiṣe lairotẹlẹ.
3. Ifojusi Management Idojukọ lo lati jẹ ẹlẹgẹ. Ṣaaju ki o to, Mo ni awọn ofin bii: jẹ ki idojukọ aifọwọyi ṣe afihan ọpa irinṣẹ, gbe idojukọ sinu ọpa ọpa ati ki o maṣe sunmọ, blur fa nigba ti o sunmọ ju, ati ki o sunmọ ọpa ọpa ati mimu-pada sipo aifọwọyi pẹlu ọwọ. Eyi ṣiṣẹ titi ti ko ṣe. Pẹlu API Popover, ẹrọ aṣawakiri n ṣe imudara awoṣe ti o rọrun nibiti idojukọ le lọ nipa ti ara si agbejade. Pipade popover pada idojukọ si okunfa, ati pe ko si awọn ẹgẹ idojukọ alaihan tabi awọn akoko idojukọ sọnu. Ati pe Emi ko ṣafikun koodu imupadabọ idojukọ; Mo yọ kuro.
Ipari Agbejade API tumọ si pe awọn itọnisọna irinṣẹ kii ṣe nkan ti o ṣe adaṣe mọ. Wọn jẹ nkan ti aṣawakiri loye. Šiši, pipade, ihuwasi keyboard, Imudani abayo, ati ikankan ti iraye si bayi wa lati pẹpẹ funrararẹ, kii ṣe lati ad-hoc JavaScript. Iyẹn ko tumọ si awọn ile-ikawe ohun elo irinṣẹ jẹ ti atijo nitori wọn tun ni oye fun awọn ọna ṣiṣe apẹrẹ eka, isọdi ti o wuwo, tabi awọn ihamọ inira, ṣugbọn aiyipada ti yipada. Fun igba akọkọ, ọpa irinṣẹ ti o rọrun julọ tun le jẹ ọkan ti o pe julọ. Ti o ba ni iyanilenu, gbiyanju idanwo yii: Nìkan rọpo ọpa irinṣẹ kan kan ninu ọja rẹ pẹlu Agbejade API, maṣe tun kọ ohun gbogbo, maṣe ṣilọ gbogbo eto kan, ki o kan mu ọkan ki o wo ohun ti o padanu lati koodu rẹ. Nigbati pẹpẹ ba fun ọ ni alakoko ti o dara julọ, win kii ṣe awọn laini diẹ ti JavaScript, ṣugbọn o jẹ awọn nkan diẹ ti o ni lati ṣe aniyan nipa rara. Ṣayẹwo koodu orisun ni kikun ni GitHub repo mi. Siwaju kika Fun omi jinle sinu awọn agbejade ati awọn API ti o jọmọ:
"Poppin 'Ni", Geoff Graham "Ṣiṣalaye Ibasepo Laarin Popovers ati Awọn ibaraẹnisọrọ", Zell Liew "Kini popover = ofiri?", Una Kravets "Awọn aṣẹ olupe", Daniel Schwarz "Ṣiṣẹda Ifitonileti Titiipa Aifọwọyi pẹlu HTML Popover", Preethi Ṣii UI Popover API Explainer "Agbejade (lori) awọn fọndugbẹ", John Rhea "CSS Anchor Positioning", Juan Diego Rodríguez
MDN tun funni ni iwe imọ-ẹrọ okeerẹ fun API Popover.
