Кеңестер сізде болуы мүмкін ең кішкентай UI мәселесі сияқты. Олар кішкентай және әдетте жасырын. Біреу оны қалай құру керектігін сұрағанда, дәстүрлі жауап әрқашан JavaScript кітапханасының көмегімен қайтарылады. Ұзақ уақыт бойы бұл ақылға қонымды кеңес болды. Мен де соңынан ердім. Сыртынан қарағанда, құралдар кеңесі қарапайым. Меңзерді апарыңыз немесе элементке назар аударыңыз, мәтіні бар кішкене қорапты көрсетіңіз, содан кейін пайдаланушы алыстаған кезде оны жасырыңыз. Бірақ біреуін нақты пайдаланушыларға жібергеннен кейін, шеттер көріне бастайды. Пернетақта пайдаланушылары триггерге қойылады, бірақ құралдар кеңесін ешқашан көрмеңіз. Экраннан оқу құралдары оны екі рет жариялайды немесе мүлде жариялайды. Тінтуірді тым жылдам жылжытқанда құралдар кеңесі жыпылықтайды. Ол кішірек экрандардағы мазмұнды қабаттасады. Esc пернесін басу оны жаппайды. Фокус жоғалады. Уақыт өте келе, менің құралдар кеңесінің коды мен енді иеленгім келмейтін нәрсеге айналды. Оқиғаны тыңдаушылар жиналды. Меңзер мен фокусты бөлек өңдеу керек болды. Сыртқы шертулер арнайы жағдайларды қажет етеді. ARIA атрибуттарын қолмен синхрондауға тура келді. Әрбір шағын түзету логиканың басқа қабатын қосты. Кітапханалар көмектесті, бірақ олар сахнаның артында не болып жатқанын толық түсінудің орнына мен жұмыс істеген қара жәшіктерге ұқсады. Бұл мені жаңа Popover API интерфейсін қарауға итермеледі. Мен кітапхананың көмегінсіз шолғыштың жергілікті үлгісін пайдаланып, бір кеңесті қайта құрсам, не болатынын көргім келді. Бастай отырып, кез келген жаңа мүмкіндік сияқты, оның әлі де өңделіп жатқан кейбір нәрселер бар екенін атап өткен жөн. Айтуынша, ол қазіргі уақытта браузерде тамаша қолдауды пайдаланады, дегенмен жалпы API-де бірнеше бөліктер бар. Осы уақытта Каниусқа назар аударған жөн. «Ескі» құралдар кеңесі Popover API алдында құралдар кеңесі кітапханасын пайдалану төте жол емес еді. Бұл әдепкі болды. Браузерлерде тінтуірде, пернетақтада және көмекші технологияларда жұмыс істейтін құралдар кеңесі туралы түпнұсқа тұжырымдамасы болмады. Егер сіз дұрыстықты ойласаңыз, сіздің жалғыз нұсқаңыз кітапхананы пайдалану болды, мен дәл солай істедім. Жоғары деңгейде үлгі әрқашан бірдей болды: триггер элементі, жасырын құралдар кеңесі элементі және екеуін үйлестіру үшін JavaScript.
Кітапхана элементті меңзерді апару немесе фокустау кезінде көрсетуге, бұлыңғыр немесе тінтуір қалдырғанда жасыруға және айналдыру кезінде орнын өзгертуге/өлшемін өзгертуге мүмкіндік беретін сымдарды өңдеді.
Уақыт өте келе құралдар кеңесі нәзік болуы мүмкін. Кішігірім өзгерістер қауіп төндірді. Шағын түзетулер регрессияларды тудырды. Ең сорақысы, жаңа кеңестер қосу бірдей күрделілікті мұра етті. Істер техникалық тұрғыдан жұмыс істеді, бірақ ешқашан реттелмеген немесе толық сезілген жоқ. Браузердің жергілікті Popover API көмегімен құралдар кеңесін қайта құруды шешкен кездегі жағдай осылай болды. Popover API қолданып көрген сәтім Мен Popover API пайдалануға ауыспадым, өйткені мен жаңа нәрсемен тәжірибе алғым келді. Мен браузер түсінген болуы керек деп ойлайтын құралдар кеңесінің әрекетін сақтаудан шаршағандықтан ауыстырдым. Мен басында күмәнмен қарадым. Көптеген жаңа веб API интерфейстері қарапайымдылықты уәде етеді, бірақ бәрібір желім, шеткі регистрді өңдеу немесе сіз қашуға тырысқан күрделілікті тыныш қайта жасайтын қосалқы логиканы қажет етеді. Осылайша, мен Popover API мүмкіндігін барынша аз жолмен қолданып көрдім. Міне, бұл қалай көрінді:
қосылымын жасайды
ретінде басқарады
1. «Тек жұмыс істейді» пернетақтасы Пернетақта қолдауы бірнеше қабаттардың дұрыс орналасуына байланысты болды: фокус құрал кеңесін іске қосуы керек, бұлыңғырлықты жасыру керек, Esc сымын қолмен қосу керек болды және уақыт маңызды болды. Егер сіз бір шеткі регистрді өткізіп алсаңыз, құралдар кеңесі тым ұзақ ашық қалады немесе оқылмай тұрып жоғалады. Қалқымалы атрибуты автоматты немесе қолмен орнатылса, шолғыш негіздерді қабылдайды: Tab және Shift+Tab қалыпты әрекет етеді, Esc құралдар кеңесін әр уақытта жабады және қосымша тыңдаушылар қажет емес.
Менің кодтық базамнан жаһандық пернелерді өңдеу өңдеушілері, Esc арнайы тазалау логикасы және пернетақта шарлау кезінде күйді тексерулер жоғалып кетті. Пернетақта тәжірибесі мен сақтауым керек нәрсе болуды тоқтатты және ол шолғыш кепілі болды. 2. Экранды оқу құралының болжамдылығы Бұл болдыең үлкен жақсарту. ARIA мұқият жұмыс істегеннің өзінде, мен бұрын айтқанымдай, мінез-құлық әртүрлі болды. Әрбір кішкентай өзгеріс қауіпті болды. Тиісті рөлге ие popover пайдалану не болатынын әлдеқайда тұрақты және болжауға болатын көрінеді және сезінеді:
Міне, тағы бір жеңіс: коммутатордан кейін Lighthouse өзара әрекеттесу үшін қате ARIA күйінің ескертулерін белгілеуді тоқтатты, себебі мен кездейсоқ қателесуім үшін ARIA күйлерінің реттелмеген күйлері жоқ.
3. Фокусты басқару Бұрын фокус нәзік болатын. Бұрын менде мынадай ережелер болды: фокус триггеріне құралдар кеңесін көрсетуге рұқсат етіңіз, фокусты құралдар кеңесіне жылжытыңыз және жаппаңыз, тым жақын болғанда триггерді бұлдыратыңыз және құралдар кеңесін жауып, фокусты қолмен қалпына келтіріңіз. Бұл жұмыс істемейінше жұмыс істеді. Popover API көмегімен шолғыш қарапайым модельді қолданады, онда фокус табиғи түрде қалқымалы терезеге ауысады. Қалқымалы терезені жабу фокусты триггерге қайтарады және көрінбейтін фокус тұзақтары немесе жоғалған фокус сәттері болмайды. Мен фокусты қалпына келтіру кодын қоспадым; Мен оны алып тастадым.
Қорытынды Popover API құралы кеңестер енді сіз модельдейтін нәрсе емес екенін білдіреді. Олар браузер түсінетін нәрсе. Ашу, жабу, пернетақта әрекеті, Escape өңдеу және қол жетімділіктің үлкен бөлігі енді арнайы JavaScript емес, платформаның өзінен келеді. Бұл құралдар кеңесі кітапханаларының ескіргенін білдірмейді, себебі олар әлі де күрделі дизайн жүйелері, күрделі теңшеу немесе бұрынғы шектеулер үшін мағынасы бар, бірақ әдепкі өзгерді. Алғаш рет қарапайым құралдар кеңесі де ең дұрысы болуы мүмкін. Егер сізді қызықтыратын болса, мына экспериментті қолданып көріңіз: өніміңіздегі тек бір кеңесті Popover API интерфейсімен ауыстырыңыз, бәрін қайта жазбаңыз, бүкіл жүйені көшірмеңіз және тек біреуін таңдап, кодыңыздан не жоғалатынын көріңіз. Платформа сізге жақсырақ қарабайырды бергенде, жеңіс JavaScript-тің аз жолдары ғана емес, сізді алаңдататын нәрселер аз болады. Менің GitHub репосындағы толық бастапқы кодты тексеріңіз. Қосымша оқу Popovers және қатысты API интерфейстеріне тереңірек ену үшін:
«Поппин' In», Джефф Грэм «Поповерлер мен диалогтар арасындағы қарым-қатынасты нақтылау», Зел Лью «Popover = кеңес дегеніміз не?», Уна Кравец «Шақырушы командалары», Дэниел Шварц «HTML Popover көмегімен автоматты жабылу хабарландыруын жасау», Preethi UI Popover API түсіндіргішін ашыңыз «Әуе шарлары» Джон Риа «CSS зәкірінің орналасуы», Хуан Диего Родригес
MDN сонымен қатар Popover API үшін толық техникалық құжаттаманы ұсынады.
