Is dóigh le leideanna uirlisí gurb é an fhadhb Chomhéadain is lú is féidir a bheith agat. Tá siad beag bídeach agus de ghnáth i bhfolach. Nuair a iarrann duine conas ceann a thógáil, tagann an freagra traidisiúnta ar ais beagnach i gcónaí ag baint úsáide as roinnt leabharlann JavaScript. Agus ar feadh i bhfad, ba í sin an chomhairle chiallmhar. Lean mé é, freisin. Ar an dromchla, tá leid uirlisí simplí. Hover nó díriú ar eilimint, taispeáin bosca beag le roinnt téacs, ansin i bhfolach nuair a bhogann an t-úsáideoir ar shiúl. Ach nuair a sheolann tú ceann chuig fíorúsáideoirí, tosaíonn na himill ag taispeáint. Úsáideoirí méarchláir Cuir isteach an truicir, ach ní fheiceann tú an leid uirlisí. Fógraíonn léitheoirí scáileáin faoi dhó é, nó níl sé ar chor ar bith. Caolaíonn an leid uirlisí nuair a bhogann tú an luch ró-thapa. Forluíonn sé ábhar ar scáileáin níos lú. Ní dhúnann brú Esc é. Faigheann fócas caillte. Le himeacht ama, d’fhás mo chód leid uirlisí ina rud nár theastaigh uaim a bheith ina sheilbh níos mó. Tháinig lucht éisteachta na n-imeachtaí suas. Bhí gá le hover agus fócas a láimhseáil ar leithligh. Bhí cásanna speisialta ag teastáil ó chliceanna lasmuigh. B’éigean tréithe ARIA a choinneáil faoi shioncronú de láimh. Chuir gach socrú beag sraith eile den loighic leis. Chabhraigh leabharlanna, ach bhí siad níos cosúla freisin le boscaí dubha ar oibrigh mé timpeall orthu seachas tuiscint iomlán a fháil ar cad a bhí ag tarlú taobh thiar de na radhairc. Ba é sin a bhrúigh mé chun breathnú ar an API Popover níos nuaí. Bhí mé ag iarraidh a fheiceáil cad a tharlódh dá ndéanfainn leid uirlisí amháin a atógáil ag baint úsáide as samhail dúchais an bhrabhsálaí gan cabhair ó leabharlann. Agus muid ag tosú, is fiú a thabhairt faoi deara, mar aon le haon ghné nua, go bhfuil roinnt rudaí leis atá fós á réiteach. É sin ráite, tá tacaíocht iontach brabhsálaí aige faoi láthair, cé go bhfuil roinnt píosaí leis an API foriomlán atá ag sreabhadh. Is fiú súil a choinneáil ar Caniuse idir an dá linn. An Leid Uirlis “Sean”. Roimh an Popover API, níor aicearra é leabharlann leideanna uirlisí a úsáid. Ba é an réamhshocrú. Ní raibh coincheap dúchais ag brabhsálaithe de leid uirlisí a d’oibrigh thar luchóg, méarchlár, agus teicneolaíocht chúnta. Más rud é go raibh cúram ort maidir le cruinneas, ba é an t-aon rogha a bhí agat ná leabharlann a úsáid, agus sin go díreach a rinne mé. Ar leibhéal ard, bhí an patrún mar an gcéanna i gcónaí: eilimint truicear, eilimint leid uirlisí i bhfolach, agus JavaScript chun an dá cheann a chomhordú.
Láimhseáil an leabharlann an sreangú a cheadaigh an eilimint a thaispeáint ar ainliú nó fócas, a chur i bhfolach ar doiléirigh nó saoire luiche, agus a athshuí / a athrú ar an scrollbharra.
Le himeacht ama, d’fhéadfadh an leid uirlisí éirí leochaileach. Bhain riosca le hathruithe beaga. Ba chúis le mioncheartúcháin aischéimnithí. Níos measa ná sin, tháinig an chastacht chéanna le hoidhreacht trí leideanna nua a chur isteach. D’oibrigh rudaí go teicniúil, ach níor mhothaigh siad riamh socraithe nó iomlán. Ba é sin staid na rudaí nuair a chinn mé an leid uirlisí a atógáil ag baint úsáide as API Popover dúchais an bhrabhsálaí. An Nóiméad a Bhain mé triail as an Popover API Níor aistrigh mé chuig Popover API a úsáid mar bhí mé ag iarraidh triail a bhaint as rud éigin nua. D'aistrigh mé toisc go raibh mé tuirseach de bheith ag iompar leideanna uirlisí a chreid mé gur cheart go mbeadh tuiscint ag an mbrabhsálaí air cheana féin. Bhí mé skeptical ar dtús. Geallann an chuid is mó de na APIanna gréasáin nua simplíocht, ach fós éilíonn siad gliú, láimhseáil cás imeall, nó loighic cúl-ais a athchruthaíonn go ciúin an chastacht chéanna a raibh tú ag iarraidh éalú. Mar sin, rinne mé iarracht an Popover API ar an mbealach is lú is féidir. Seo an chuma a bhí air sin:
1. An Méarchláir “Just Works” Bhí tacaíocht an mhéarchláir ag brath ar shraitheanna iolracha a bheith ag líneáil suas i gceart: b'éigean an fócas a spreagadh leis an leid uirlisí, b'éigean doiléireacht a chur i bhfolach, b'éigean an Esc a shreangú de láimh, agus bhí an t-am tábhachtach. Má chaill tú cás ciumhais amháin, d’fhanfadh an leid uirlisí oscailte rófhada nó d’imigh as sula bhféadfaí é a léamh. Agus an aitreabúid popover socraithe mar uathoibríoch nó láimhe, glacann an brabhsálaí na bunghnéithe: Iompraíonn Tab agus Shift+Tab de ghnáth, dúnann Esc an leid uirlisí gach uair, agus níl aon éisteoirí breise ag teastáil.
Ba iad na rudaí a d'imigh as mo bhunachar cód ná láimhseálaithe eochracha domhanda, loighic glanta sonrach Esc, agus seiceálacha stáit le linn loingseoireachta méarchláir. Stop an taithí méarchlár a bheith rud éigin a bhí mé a choimeád ar bun, agus bhí sé ráthaíocht bhrabhsálaí. 2. Intuarthacht an Léitheoir scáileáin Ba é seo anfeabhas is mó. Fiú le hobair chúramach ARIA, tháinig éagsúlacht ar an iompar, mar a mhínigh mé níos luaithe. Mhothaigh gach athrú beag contúirteach. Breathnaítear agus mothaíonn sé i bhfad níos cobhsaí agus níos intuartha nuair a úsáidtear popover le ról ceart chomh fada agus a tharlóidh:
Agus seo bua eile: Tar éis an lasc, chuir an Teach Solais stop le rabhaidh stáit mícheart ARIA don idirghníomhaíocht, den chuid is mó toisc nach bhfuil stáit ARIA saincheaptha ann a thuilleadh chun go dtiocfá mícheart orm.
3. Bainistíocht Fócas Fócas a úsáidtear a bheith leochaileach. Roimhe seo, bhí rialacha mar seo a leanas agam: lig don fhócas an leid uirlisí a thaispeáint, bog an fócas isteach sa leid uirlisí agus ná dún, doiligh an truicir nuair a bhíonn sé ró-ghar, agus dún an leid uirlisí agus cuir an fócas ar ais de láimh. D'oibrigh sé seo go dtí nach raibh. Leis an Popover API, cuireann an brabhsálaí múnla níos simplí i bhfeidhm inar féidir le fócas bogadh isteach sa popover go nádúrtha. Nuair a dhúnann tú an popover filleann fócas ar an truicir, agus níl aon gaistí fócais dofheicthe nó chuimhneacháin fócais caillte. Agus níor chuir mé cód athchóirithe fócais leis; Bhain mé é.
Conclúid Ciallaíonn an Popover API nach bhfuil leideanna uirlisí mar rud a shamhlaíonn tú a thuilleadh. Is rud iad a thuigeann an brabhsálaí. Tagann oscailt, dúnadh, iompar méarchláir, láimhseáil éalaithe, agus smután mór inrochtaineachta ón ardán féin anois, ní ó JavaScript ad-hoc. Ní chiallaíonn sé sin go bhfuil leabharlanna leid uirlisí imithe i léig mar go bhfuil ciall acu fós le córais chasta deartha, saincheaptha trom, nó srianta oidhreachta, ach tá an réamhshocrú athraithe. Don chéad uair, is féidir gurb é an leid uirlisí is simplí an ceann is ceart freisin. Má tá tú fiosrach, bain triail as an turgnamh seo: Níl ort ach leid uirlisí amháin i do tháirge a athsholáthar leis an Popover API, ná athscríobh gach rud, ná aistrigh córas iomlán, agus roghnaigh ceann amháin agus féach cad a imíonn ó do chód. Nuair a thugann an t-ardán primitive níos fearr duit, ní hamháin go bhfuil an bua níos lú línte JavaScript, ach is lú rudaí a gcaithfidh tú a bheith buartha faoi ar chor ar bith. Seiceáil an cód foinse iomlán i mo repo GitHub. Tuilleadh Léitheoireachta Le haghaidh tumadóireacht níos doimhne isteach sna popovers agus APInna gaolmhara:
“Poppin’ In”, Geoff Graham “An Gaol idir Popovers agus Comhráite a Shoiléiriú”, Zell Liew “Cad é popover=leid?”, Una Kravets “Orduithe Invoker”, Daniel Schwarz “Fógra um Uathdhúnadh a Chruthú le Popover HTML”, Preethi Oscail UI Popover API Mínithe “Prap (thar) na Balúin”, John Rhea “Suíomh Ancaire CSS”, Juan Diego Rodríguez
Cuireann MDN doiciméadú teicniúil cuimsitheach ar fáil freisin don Popover API.
