Објашњење изгледа као најмањи проблем са корисничким интерфејсом који можете имати. Они су мали и обично скривени. Када неко пита како да га направи, традиционални одговор се скоро увек враћа коришћењем неке ЈаваСцрипт библиотеке. И дуго је то био разуман савет. И ја сам га пратио. На површини, опис алата је једноставан. Задржите показивач миша или фокусирајте на елемент, покажите мали оквир са неким текстом, а затим га сакријте када се корисник удаљи. Али када један пошаљете правим корисницима, ивице почињу да се виде. Корисници тастатуре Табулатором на окидач, али никада не виде опис алата. Читачи екрана то најављују два пута, или не најављују уопште. Објашњење трепери када пребрзо померите миш. Преклапа садржај на мањим екранима. Притиском на Есц се не затвара. Фокус се губи. Временом је мој код објашњења прерастао у нешто што више нисам желео да поседујем. Нагомилали су се слушаоци догађаја. Лебдењем и фокусом се морало управљати одвојено. Спољашњи кликови потребни су посебни случајеви. АРИА атрибути су морали да се синхронизују ручно. Свака мала поправка додала је још један слој логике. Библиотеке су помогле, али су више личиле на црне кутије око којих сам радио уместо да у потпуности разумем шта се дешава иза кулиса. То ме је подстакло да погледам новији Поповер АПИ. Желео сам да видим шта ће се догодити ако поново направим један опис алата користећи изворни модел претраживача без помоћи библиотеке. Када почнемо, вреди напоменути да, као и са сваком новом функцијом, постоје неке ствари које се још увек исправљају. Уз то, тренутно ужива одличну подршку за прегледач, иако постоји неколико делова укупног АПИ-ја који се мењају. У међувремену је вредно пазити на Цаниусеа. „Стари“ опис алата Пре Поповер АПИ-ја, коришћење библиотеке описа алата није била пречица. То је било подразумевано. Прегледачи нису имали изворни концепт описа алата који је функционисао преко миша, тастатуре и помоћне технологије. Ако вам је стало до исправности, једина опција вам је била да користите библиотеку, а ја сам управо то урадио. На високом нивоу, образац је увек био исти: елемент окидача, скривени елемент описа алата и ЈаваСцрипт за координацију ова два.
<буттон цласс="инфо">?буттон> <див цласс="тоолтип" роле="тоолтип">Корисни текстдив>
Библиотека је управљала ожичењем које је омогућило елементу да се прикаже при лебдењу или фокусу, сакрије при замућењу или напуштању миша и да промени положај/промени величину при померању.
Временом би опис алата могао постати крхак. Мале промене су носиле ризик. Мање поправке су изазвале регресије. Што је још горе, додавање нових описа алата наследило је исту сложеност. Ствари су технички функционисале, али никада се нису осећале решено или комплетно. То је било стање када сам одлучио да поново направим опис алата користећи изворни Поповер АПИ претраживача. Тренутак када сам испробао Поповер АПИ Нисам прешао на коришћење Поповер АПИ-ја јер сам желео да експериментишем са нечим новим. Пребацио сам се јер сам био уморан од одржавања понашања у опису алатки за које сам веровао да је претраживач већ требало да разуме. У почетку сам био скептичан. Већина нових веб АПИ-ја обећавају једноставност, али и даље захтевају лепак, руковање ивицама или резервну логику која тихо ствара исту сложеност од које сте покушавали да побегнете. Дакле, пробао сам Поповер АПИ на најмањи могући начин. Ево како је то изгледало:
<буттон поповертаргет="тип-1">?буттон>
<див ид="тип-1" поповер="мануал" роле="тоолтип"> Ово дугме покреће користан савет. див>
1. Тастатура „само ради“ Подршка за тастатуру зависила је од правилног постављања више слојева: фокус је морао да покрене опис алата, замућење је морало да га сакрије, Есц је морао да се повеже ручно, а тајминг је био важан. Ако сте пропустили једну ивицу, опис алатке би или остао отворен предуго или нестао пре него што би могао да се прочита. Са атрибутом поповер подешеним на аутоматски или ручно, претраживач преузима основе: Таб и Схифт+Таб се понашају нормално, Есц сваки пут затвара опис алата и нису потребни додатни слушаоци. <див поповер="мануал"> Корисно објашњење див>
Оно што је нестало из моје базе кода били су глобални обрађивачи тастера, логика чишћења специфична за Есц и провере стања током навигације тастатуром. Искуство са тастатуром је престало да буде нешто што сам морао да одржавам и постало је гаранција претраживача. 2. Предвидљивост читача екрана Ово је билонајвеће побољшање. Чак и уз пажљив рад АРИА-е, понашање је варирало, као што сам раније навео. Свака мала промена је била ризична. Коришћење поповер-а са одговарајућом улогом изгледа и делује много стабилније и предвидљивије у погледу онога што ће се догодити: <див поповер="мануал" роле="тоолтип"> Корисно објашњење див>
И ево још једне победе: Након пребацивања, Лигхтхоусе је престао да означава нетачна упозорења о стању АРИА за интеракцију, углавном зато што више не постоје прилагођена АРИА стања да бих случајно погрешио.
3. Управљање фокусом Фокус је некада био крхак. Раније сам имао правила као што су: нека окидач фокуса покаже опис алата, помери фокус у опис алата и не затварај, замути окидач када је преблизу и затвори опис алата и врати фокус ручно. Ово је функционисало док није. Са Поповер АПИ-јем, претраживач примењује једноставнији модел где фокус може природније да се помери у искачући прозор. Затварање искачућег екрана враћа фокус на окидач и нема невидљивих замки фокуса или изгубљених тренутака фокуса. И нисам додао код за враћање фокуса; Уклонио сам га.
Закључак Поповер АПИ значи да описи више нису нешто што симулирате. Они су нешто што претраживач разуме. Отварање, затварање, понашање тастатуре, руковање Есцапе-ом и велики део приступачности сада долазе са саме платформе, а не из ад-хоц ЈаваСцрипт-а. То не значи да су библиотеке описа алата застареле јер и даље имају смисла за сложене системе дизајна, тешка прилагођавања или застарела ограничења, али подразумевана вредност се променила. По први пут, најједноставнији опис алата може бити и најисправнији. Ако сте радознали, покушајте са овим експериментом: једноставно замените само један опис алата у свом производу Поповер АПИ-јем, немојте све поново писати, немојте мигрирати цео систем, и само изаберите један и видите шта нестаје из вашег кода. Када вам платформа пружи бољи примитив, победа није само мање редова ЈаваСцрипт-а, већ је то мање ствари о којима уопште морате да бринете. Погледајте цео изворни код у мом ГитХуб репо. Даље читање За дубље уроњење у искачуће и повезане АПИ-је:
„Поппин’ Ин“, Џеф Грејем „Расјашњавање односа између искакања и дијалога“, Зелл Лиев „Шта је поповер=хинт?“, Уна Краветс „Команде инвокера“, Данијел Шварц „Креирање обавештења о аутоматском затварању помоћу ХТМЛ искачућег приказа“, Преетхи Отворите УИ Поповер АПИ Екплаинер „Поп(овер) тхе Баллоонс“, Јохн Рхеа „ЦСС Анцхор Поситионинг”, Хуан Диего Родригуез
МДН такође нуди свеобухватну техничку документацију за Поповер АПИ.