Зөвлөмжүүд нь танд тохиолдож болох хамгийн жижиг UI асуудал мэт санагддаг. Тэд жижигхэн бөгөөд ихэвчлэн далд байдаг. Хэн нэгэн үүнийг хэрхэн бүтээх талаар асуухад уламжлалт хариулт бараг үргэлж JavaScript номын санг ашиглан ирдэг. Удаан хугацааны турш энэ нь ухаалаг зөвлөгөө байсан. Би ч бас дагаж явсан. Гаднаас нь харахад зөвлөмж нь энгийн зүйл юм. Элемент дээр хулганаа аваачиж эсвэл анхаарлаа төвлөрүүлж, текст бүхий жижиг хайрцгийг үзүүлээд, хэрэглэгч холдох үед үүнийг нуу. Гэхдээ та нэгийг нь жинхэнэ хэрэглэгчдэд хүргэсний дараа ирмэгүүд нь харагдаж эхэлдэг. Гар хэрэглэгчид гохыг дарна уу, гэхдээ зааврыг хэзээ ч харахгүй. Дэлгэц уншигчид үүнийг хоёр удаа зарладаг, эсвэл огт зарладаггүй. Хулганыг хэт хурдан хөдөлгөхөд заавар нь анивчих болно. Энэ нь жижиг дэлгэц дээрх контентыг давхцуулдаг. Esc дарахад хаагдахгүй. Анхаарал төвлөрөл алдагдана. Цаг хугацаа өнгөрөхөд миний зааварчилгааны код миний эзэмшихийг үнэхээр хүсээгүй зүйл болж хувирав. Арга хэмжээ сонсогчид бөөгнөрөв. Хүрээ болон фокусыг тусад нь зохицуулах шаардлагатай байв. Гаднах товшилтуудад онцгой тохиолдлууд хэрэгтэй байв. ARIA шинж чанаруудыг гараар синхрончлох хэрэгтэй. Жижиг засвар бүр өөр нэг логик давхаргыг нэмсэн. Номын сангууд тусалсан ч хөшигний ард юу болж байгааг бүрэн ойлгохын оронд миний ажиллаж байсан хар хайрцаг шиг байсан. Энэ нь намайг шинэ Popover API-г үзэхэд түлхэц болсон юм. Хэрэв би номын сангийн тусламжгүйгээр хөтчийн төрөлх загварыг ашиглан нэг зөвлөмжийг дахин бүтээвэл юу болохыг харахыг хүссэн. Эхлэхдээ аливаа шинэ функцийн нэгэн адил үүнтэй холбоотой зарим зүйл шийдэгдээгүй байдгийг тэмдэглэх нь зүйтэй. Энэ нь одоогоор ерөнхий API-д хэд хэдэн хэсэг байдаг ч хөтчийн маш сайн дэмжлэгтэй байгаа гэж хэлсэн. Энэ хооронд Каниусыг ажиглах нь зүйтэй. "Хуучин" зөвлөмж Popover API-аас өмнө хэрэгслийн мэдээллийн санг ашиглах нь товчлол биш байсан. Энэ нь анхдагч байсан. Хөтөчүүдэд хулгана, гар болон туслах технологи дээр ажилладаг хэрэгслийн зөвлөмжийн эх ойлголт байдаггүй байв. Хэрэв та зөв байдлын талаар санаа тавьдаг байсан бол таны цорын ганц сонголт бол номын сан ашиглах явдал байсан бөгөөд би үүнийг яг таг хийсэн. Өндөр түвшинд хэв маяг нь үргэлж ижил байсан: гох элемент, далд зөвлөмжийн элемент, энэ хоёрыг зохицуулах JavaScript.
Номын сан нь тухайн элементийг хулганаа аваачих эсвэл анхаарлаа төвлөрүүлэх, бүдгэрүүлэх эсвэл хулгана орхих үед нуух, гүйлгэх үед байршлыг өөрчлөх/хэмжээг өөрчлөх боломжийг олгодог утсыг зохицуулсан.
Цаг хугацаа өнгөрөхөд зөвлөмж нь хэврэг болж магадгүй юм. Жижиг өөрчлөлтүүд эрсдэл дагуулсан. Бага зэргийн засварууд нь регресс үүсгэдэг. Хамгийн муу нь, шинэ зөвлөмж нэмэх нь ижил төвөгтэй байдлыг өвлөн авсан. Техникийн хувьд бүх зүйл үр дүнтэй байсан ч хэзээ ч шийдэгдээгүй эсвэл бүрэн гүйцэд санагдсангүй. Хөтчийн уугуул Popover API-г ашиглан зааварчилгааг дахин бүтээхээр шийдсэн үед ийм нөхцөл байдал үүссэн. Миний Popover API-г туршиж үзсэн мөч Би шинэ зүйл туршиж үзэхийг хүссэн учраас Popover API ашиглах руу шилжээгүй. Хөтөч аль хэдийн ойлгосон байх ёстой гэж бодсон хэрэгслийн зааварчилгааг хадгалахаас залхсан тул би сэлгэсэн. Би эхэндээ эргэлзэж байсан. Ихэнх шинэ вэб API-ууд нь энгийн байдлыг амлаж байгаа боловч таны зугтахыг оролдож байсан нарийн төвөгтэй байдлыг чимээгүйхэн сэргээдэг цавуу, захын хэрэгслээр ажиллах эсвэл нөөц логикийг шаарддаг. Тиймээс би Popover API-г хамгийн бага аргаар туршиж үзсэн. Энэ нь юу харагдаж байсныг энд харуулав:
-тай холболт үүсгэдэг
байдлаар удирддаг
1. "Зүгээр л ажилладаг" гар Гарын дэмжлэг нь олон давхаргыг зөв байрлуулахаас шалтгаална: фокус нь хэрэгслийн зөвлөмжийг идэвхжүүлэх, бүдгэрүүлэхийг нуух, Esc-г гараар холбох, цаг хугацаа чухал байсан. Хэрэв та нэг захын тохиолдлыг орхигдуулсан бол заавар нь хэт удаан нээлттэй байх эсвэл уншихаас өмнө алга болно. Popover шинж чанарыг автоматаар эсвэл гарын авлагад тохируулснаар хөтөч үндсэн ойлголтуудыг авдаг: Tab болон Shift+Tab нь хэвийн ажиллаж, Esc хэрэглүүрийн зөвлөмжийг тухай бүр хаадаг бөгөөд нэмэлт сонсогч шаардлагагүй.
Миний кодын баазаас алга болсон зүйл бол дэлхийн товчлуурын тохируулагч, Esc-д зориулсан цэвэрлэх логик, гарын навигацийн үеийн төлөвийг шалгах явдал байв. Гарын туршлага нь миний хадгалах ёстой зүйл байхаа больсон бөгөөд энэ нь хөтөчийн баталгаа болсон. 2. Дэлгэц уншигчийн урьдчилан таамаглах чадвар Энэ байсанхамгийн том сайжруулалт. ARIA-г анхааралтай ажилласан ч гэсэн миний өмнө дурьдсанчлан зан байдал өөр өөр байсан. Жижиг өөрчлөлт бүр эрсдэлтэй санагддаг. Зохих үүрэг бүхий поповер ашиглах нь юу болох талаар илүү тогтвортой, урьдчилан таамаглах боломжтой харагдаж байна:
Энд бас нэг ялалт байна: Шилжүүлсний дараа Гэрэлт цамхаг харилцан үйлчлэлийн буруу ARIA төлөвийн сэрэмжлүүлгийг тэмдэглэхээ больсон, учир нь надад санамсаргүй байдлаар алдаа гаргах ARIA төлөв байхаа больсон.
3. Анхаарал төвлөрүүлэх менежмент Анхаарал төвлөрөл нь эмзэг байсан. Өмнө нь би фокус гохыг хэрэгслийн зөвлөмжийг харуулахыг зөвшөөрөх, фокусыг хэрэгслийн зөвлөмж рүү шилжүүлж, хааж болохгүй, хэт ойрхон үед гохыг бүдгэрүүлэх, хэрэгслийн зөвлөмжийг хааж фокусыг гараар сэргээх зэрэг дүрэмтэй байсан. Энэ нь ажиллахгүй болтлоо ажилласан. Popover API-ийн тусламжтайгаар хөтөч нь илүү энгийн загвартай бөгөөд ингэснээр фокус нь поповер руу шилжих боломжтой болно. Поповерыг хааснаар фокусыг гох руу буцаадаг бөгөөд үл үзэгдэх фокусын зангилаа эсвэл алдагдсан фокусын мөч байхгүй. Мөн би фокусыг сэргээх код нэмээгүй; Би хассан.
Дүгнэлт Popover API нь зөвлөмжүүд нь таны загварчлах зүйл байхаа больсон гэсэн үг юм. Эдгээр нь хөтөчийн ойлгодог зүйл юм. Нээх, хаах, гарын үйл ажиллагаа, Escape-ийн зохицуулалт болон олон тооны хандалтууд нь түр зуурын JavaScript-ээс биш харин платформ өөрөөс нь ирдэг. Энэ нь нарийн төвөгтэй дизайны систем, хүнд тохируулга эсвэл хуучин хязгаарлалт зэрэгт утга учиртай хэвээр байгаа тул хэрэгслийн мэдээллийн сангууд хуучирсан гэсэн үг биш боловч анхдагч нь өөрчлөгдсөн байна. Эхний удаад хамгийн энгийн зөвлөгөө нь хамгийн зөв байх болно. Хэрэв та сонирхож байгаа бол энэ туршилтыг туршаад үзээрэй: Бүтээгдэхүүн дээрээ зүгээр л нэг зөвлөмжийг Popover API-ээр сольж, бүгдийг дахин бичиж болохгүй, бүхэл бүтэн системийг шилжүүлж болохгүй, зүгээр л нэгийг сонгоод таны кодоос юу алга болохыг хараарай. Платформ нь танд илүү сайн командыг өгөхөд ялалт нь JavaScript-ийн цөөн мөр биш, харин таны санаа зовох зүйл бага байх болно. Миний GitHub репо дахь эх кодыг бүрэн эхээр нь үзээрэй. Цааш унших Поповерууд болон холбогдох API-г илүү гүнзгий судлахын тулд:
"Поппин' In", Жеофф Грэхэм Зелл Лиев, "Поповер ба харилцан ярианы хоорондын харилцааг тодруулах нь" "Popover = зөвлөгөө гэж юу вэ?", Уна Кравец "Дохигчийн тушаалууд", Даниел Шварц "HTML Popover ашиглан автоматаар хаах мэдэгдлийг үүсгэх нь", Преети UI Popover API тайлбарлагчийг нээнэ үү "Бөмбөлөгүүдийг цохих" Жон Риа "CSS зангууны байрлал", Хуан Диего Родригес
MDN нь Popover API-д зориулсан техникийн дэлгэрэнгүй баримт бичгийг санал болгодог.
