ئامرازەکان هەست دەکەیت وەک بچووکترین کێشەی UI وایە کە دەتوانیت هەتبێت. ئەوان بچووکن و بەزۆری شاراوەن. کاتێک کەسێک پرسیاری ئەوە دەکات کە چۆن یەکێکیان دروست بکەیت، نزیکەی هەمیشە وەڵامی تەقلیدی بە بەکارهێنانی هەندێک کتێبخانەی جاڤاسکڕێپت دەگەڕێتەوە. وە بۆ ماوەیەکی زۆر، ئەوە ئامۆژگارییەکی عەقڵانی بوو. منیش بەدوایدا ڕۆیشتم. لە ڕووکەشدا، ئامرازێک سادەیە. هۆڤەر یان فۆکەس لەسەر توخمێک بکە، سندوقێکی بچووک پیشان بدە کە هەندێک دەقی تێدایە، پاشان بیشارەوە کاتێک بەکارهێنەرەکە دوور دەکەوێتەوە. بەڵام کاتێک یەکێکیان دەنێری بۆ بەکارهێنەرانی ڕاستەقینە، لێوارەکانی دەست دەکەن بە دەرکەوتن. بەکارهێنەرانی کیبۆرد تاب بکە بۆ ناو تریگەرەکە، بەڵام هەرگیز ئامرازەکە نابینە. خوێنەرانی شاشە دوو جار ڕایدەگەیەنن، یان بە هیچ شێوەیەک نایکەن. کاتێک ماوسەکە زۆر بە خێرایی دەجوڵێنیت، ئامرازەکە دەچرپێت. ناوەڕۆک لەسەر شاشە بچووکەکان سەریەک دەخات. فشاردان لەسەر Esc دایناخات. فۆکەس ون دەبێت. بە تێپەڕبوونی کات، کۆدی ئامرازەکانم گەشەی کرد و بوو بە شتێک کە بەڕاستی نەمدەویست چیتر خاوەندارێتی بکەم. گوێگرانی ڕووداوەکان کەڵەکە بوون. دەبوو هۆڤەر و فۆکەس بە جیا مامەڵەیان لەگەڵدا بکرێت. کلیکەکانی دەرەوە پێویستیان بە حاڵەتی تایبەت بوو. سیفاتەکانی ARIA دەبوو بە دەست لە هاوئاهەنگدا بمێننەوە. هەر چاککردنەوەیەکی بچووک چینێکی تری لۆژیکی زیاد دەکرد. کتێبخانەکان یارمەتیدەر بوون، بەڵام زیاتر لە سندوقە ڕەشەکانیش دەچوو کە لەبری ئەوەی بە تەواوی لەوە تێبگەم کە لە پشت پەردەوە چی ڕوودەدات. ئەوە بوو کە پاڵم پێنا بۆ ئەوەی سەیری API ی نوێتری Popover بکەم. من ویستم بزانم چی ڕوودەدات ئەگەر یەک ئامرازی دووبارە دروست بکەمەوە بە بەکارهێنانی مۆدێلی ڕەسەنی وێبگەڕەکە بەبێ یارمەتی کتێبخانە. لەکاتێکدا دەست پێدەکەین، شایەنی باسە کە وەک هەر تایبەتمەندییەکی نوێ، هەندێک شت هەیە لەگەڵیدا کە هێشتا ئوتو دەکرێن. کە ووتمان، لە ئێستادا چێژ لە پشتگیرییەکی گەورەی وێبگەڕ وەردەگرێت، هەرچەندە چەند پارچەیەک هەیە بۆ API گشتی کە لە گۆڕاندان. شایەنی ئەوەیە لەم نێوەندەدا چاوت لەسەر کانیوس بێت. ئامرازی “کۆن”. پێش Popover API، بەکارهێنانی کتێبخانەی ئامرازی ئاماژە کورتکراوە نەبوو. ئەوە دیفۆڵت بوو. وێبگەڕەکان چەمکێکی سروشتییان نەبوو کە ئامرازێک بێت کە لە سەرانسەری ماوس، کیبۆرد و تەکنەلۆژیای یارمەتیدەردا کار بکات. ئەگەر گرنگیت بە ڕاستگۆیی دەدا، تاکە بژاردەت ئەوە بوو کە کتێبخانە بەکاربهێنیت و منیش ڕێک ئەوەم کرد. لە ئاستێکی بەرزدا، نەخشەکە هەمیشە وەک یەک بوو: توخمێکی دەستپێکەر، توخمێکی ئامرازی شاراوە و جاڤاسکڕێپت بۆ هەماهەنگی ئەو دووانە.
<دوگمەی class="info">؟
کتێبخانەکە مامەڵەی لەگەڵ وایەرەکاندا دەکرد کە ڕێگەی بە توخمەکە دەدا لە کاتی هۆڤەر یان فۆکەسدا دەربکەوێت، لە کاتی کاڵبوونەوە یان جێهێشتنی ماوسدا خۆی بشارێتەوە، و لە کاتی سکڕۆڵدا شوێنی خۆی بگۆڕێت/قەبارە بگۆڕێت.
بە تێپەڕبوونی کات، ئامرازەکە دەتوانێت ناسک بێت. گۆڕانکارییە بچووکەکان مەترسییان لەسەر بوو. چاکسازییە بچووکەکان بووە هۆی پاشەکشە. لەوەش خراپتر، زیادکردنی ئامرازی نوێ هەمان ئاڵۆزیی بە میرات گرت. شتەکان لە ڕووی تەکنیکییەوە کاریان دەکرد، بەڵام هەرگیز هەستیان بە جێگیربوون و تەواوبوون نەدەکرد. ئەوە دۆخی شتەکان بوو کاتێک بڕیارمدا ئامرازەکە بنیات بنێمەوە بە بەکارهێنانی Popover API ی ڕەسەنی وێبگەڕەکە. ئەو ساتەی کە تاقیم کردەوە The Popover API من نەگۆڕام بۆ بەکارهێنانی Popover API چونکە ویستم شتێکی نوێ تاقی بکەمەوە. من سویچم کرد چونکە بێزار بووم لە پاراستنی هەڵسوکەوتی توولتیپ کە پێم وابوو دەبوو وێبگەڕەکە پێشتر لێی تێبگات. سەرەتا گومانم هەبوو. زۆربەی وێب API نوێیەکان بەڵێنی سادەیی دەدەن، بەڵام هێشتا پێویستیان بە چەسپ، مامەڵەکردن لەگەڵ کەیسی لێوار، یان لۆژیکی پاشەکشە هەیە کە بە هێمنی هەمان ئاڵۆزی دروست بکاتەوە کە تۆ هەوڵت دەدا لێی ڕزگارت بێت. بۆیە، من بە بچووکترین شێوە API ی Popover م تاقیکردەوە. لێرەدا ئەوە چۆن بوو:
دروست دەکات <دوگمەی popovertarget="tip-1">؟
1. کیبۆردەکە “تەنها کاردەکات” پشتگیری کیبۆرد پەیوەست بوو بە چەندین چین کە بە دروستی ڕیز بوون: فۆکەس دەبوو نوکی ئامرازەکە دەستپێبکات، کاڵ دەبوو بیشارێتەوە، Esc دەبوو بە دەست وایەر بکرێت و کاتی گرنگ بوو. ئەگەر یەک کەیسی لێوارت لەدەستدا، ئەوا ئامرازەکە یان زۆر بە کراوەیی دەمێنێتەوە یان پێش ئەوەی بخوێنرێتەوە نامێنێت. بە دانانی تایبەتمەندی popover لەسەر auto یان manual، وێبگەڕەکە دەست بەسەر بنەماکاندا دەگرێت: Tab و Shift+Tab بە شێوەیەکی ئاسایی ڕەفتار دەکەن، Esc هەموو جارێک ئامرازەکە دادەخات، و پێویست بە گوێگرێکی زیادە ناکات.
ئەوەی لە بنکەدراوەی کۆدەکانمدا نەما، مامەڵەکاری جیهانی کیداون، لۆژیکی پاککردنەوەی تایبەت بە Esc و پشکنینی دۆخ بوو لە کاتی گەشتکردن بە کیبۆرددا. ئەزموونی کیبۆرد وازی لە شتێک هێنا کە دەبوو پارێزگاری لێ بکەم، و بوو بە گەرەنتی وێبگەڕ. 2. پێشبینیکردنی شاشەخوێنەر ئەمە بوو کە...گەورەترین پێشکەوتن. تەنانەت بە کاری وردی ARIA، ڕەفتارەکان جیاواز بوون، وەک پێشتر باسم کرد. هەر گۆڕانکارییەکی بچووک هەستی بە مەترسی دەکرد. بەکارهێنانی پۆپۆڤەرێک کە ڕۆڵێکی دروستی هەبێت زۆر جێگیرتر و پێشبینیکراوتر دەردەکەوێت و هەست دەکات تا ئەو شوێنەی کە چی ڕوودەدات:
وە لێرەدا سەرکەوتنێکی تر: دوای گۆڕانکارییەکە، لایتهاوس وازی لە ئاڵاکردنی هۆشدارییە هەڵەکانی دۆخی ARIA هێنا بۆ کارلێکەکە، بە شێوەیەکی بەرچاو لەبەر ئەوەی ئیتر باری ARIA تایبەتمەند نییە بۆ ئەوەی من بە هەڵە هەڵە بم.
3. بەڕێوەبردنی فۆکەس جاران فۆکەس ناسک بوو. پێشتر یاساکانی وەک: با focus trigger tooltip پیشان بدات، فۆکەس بگوازەرەوە بۆ tooltip و دامەخە، trigger کاڵ بکە کاتێک زۆر نزیک بوو، و tooltip دابخە و فۆکەس بە دەستی بگەڕێنەرەوە. ئەمە تا ئەو کاتەی کە نەیتوانی کار بکات. لەگەڵ Popover API، وێبگەڕ مۆدێلێکی سادەتر جێبەجێ دەکات کە تێیدا فۆکەس دەتوانێت بە شێوەیەکی سروشتیتر بچێتە ناو popover. داخستنی پۆپۆڤەر فۆکەس دەگەڕێنێتەوە بۆ تریگەرەکە، و هیچ تەڵەی فۆکەسی نەبینراو یان ساتەکانی فۆکەسی لەدەستچوو نییە. وە من کۆدی گەڕاندنەوەی فۆکەسم زیاد نەکردووە؛ لابردم.
دەرەنجام Popover API بەو مانایەیە کە ئامرازەکان چیتر شتێک نین کە تۆ ھاوشێوەیان بکەیت. ئەوان شتێکن کە وێبگەڕەکە لێی تێدەگات. ئێستا کردنەوەی، داخستنی، هەڵسوکەوتی کیبۆرد، مامەڵەکردنی Escape و بەشێکی گەورەی دەستڕاگەیشتن لە خودی پلاتفۆرمەکەوە دێت نەک لە جاڤاسکڕێپتی تایبەتەوە. ئەمە بەو مانایە نییە کە کتێبخانەکانی ئامرازەکانی بەسەرچووە چونکە هێشتا بۆ سیستەمی دیزاینی ئاڵۆز، خۆکارکردنی قورس، یان سنووردارکردنی میراتی مانای هەیە، بەڵام پێشوەختە گۆڕاوە. بۆ یەکەمجار، سادەترین ئامرازی ئامرازیش دەتوانێت ڕاستترین ئامۆژگاری بێت. ئەگەر کنجکۆڵیت، ئەم تاقیکردنەوە تاقی بکەرەوە: تەنها تەنها یەک ئامرازی ناو بەرهەمەکەت بگۆڕە بە Popover API، هەموو شتێک مەنووسەوە، تەواوی سیستەمێک کۆچ مەکە و تەنها یەکێکیان هەڵبژێرە و بزانە چی لە کۆدەکەتدا نامێنێت. کاتێک پلاتفۆرمەکە سەرەتایییەکی باشترت پێدەدات، بردنەوەکە تەنها دێڕی کەمتری جاڤاسکڕێپت نییە، بەڵکو شتگەلێکی کەمترە کە دەبێت بەهیچ شێوەیەک نیگەران بیت. کۆدی سەرچاوەی تەواو لە ڕیپۆی GitHub ـمدا ببینە. خوێندنەوەی زیاتر بۆ قووڵتر نوقمبوون لە پۆپۆڤەر و API پەیوەندیدارەکان:
“Poppin’ In”، جۆف گراهام "ڕوونکردنەوەی پەیوەندی نێوان پۆپۆڤەر و دیالۆگەکان"، زێل لیو "پۆپۆڤەر=هانت چییە؟"، ئونا کراڤێتس “فەرمانەکانی بانگەوازکەر”، دانیال شوارز “دروستکردنی ئاگادارکردنەوەیەکی داخستنی ئۆتۆماتیکی بە HTML Popover”، Preethi ڕوونکەرەوەی API Popover UI بکەرەوە “پۆپ(ئۆڤەر) باڵۆنەکان”، جۆن ڕیا “پێگەی لەنگەری CSS”، خوان دیێگۆ ڕۆدریگێز
هەروەها MDN بەڵگەنامەی تەکنیکی گشتگیر بۆ Popover API پێشکەش دەکات.
